【Flutter】砂時計のアニメーションを表示|読み込み中のスピナーを実装

読み込み中(ローディング中)に砂時計のアニメーションを表示させる方法を紹介します。

今回はFlutterパッケージflutter_spinkitで砂時計のアニメーションを表示させます。

\ 世界最大級のオンライン学習サービス /

目次

事前準備|flutter_spinkitの導入

$ flutter pub add flutter_spinkit
import 'package:flutter_spinkit/flutter_spinkit.dart';

flutter_spinkitを導入します。

砂時計のアニメーションを表示

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    SpinKitHourGlass(
      color: Colors.amber,
      size: 100,
    ),
    SizedBox(height: 100),
    SpinKitPouringHourGlass(
      color: Colors.amber,
      size: 100,
    ),
    SizedBox(height: 100),
    SpinKitPouringHourGlassRefined(
      color: Colors.amber,
      size: 100,
    ),
  ],
),

flutter_spinkitで使用できる砂時計のアニメーションはSpinKitHourGlassSpinKitPouringHourGlassSpinKitPouringHourGlassRefinedの3つがあります。

スピナーの色、サイズはそれぞれcolorsizeで指定できます。

サンプルコード

import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FlutterZero')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SpinKitHourGlass(
                color: Colors.amber,
                size: 100,
              ),
              SizedBox(height: 100),
              SpinKitPouringHourGlass(
                color: Colors.amber,
                size: 100,
              ),
              SizedBox(height: 100),
              SpinKitPouringHourGlassRefined(
                color: Colors.amber,
                size: 100,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

一緒に読みたい

参考

  • URLをコピーしました!
目次