【Flutter】画面が開く前にローディングを表示

flutter

1. 概要

今回は画面が開く前にローディングを表示する内容となります。

先日開かれたisubの2022年忘年会(忘年会)にてPankoを使って景品抽選会を行ったのですが、あんまりにも結果が直ぐ表示され、ドキドキ感がないので少し間がほしいね。という話から本記事のような機能を入れる事になりました。

対象としては開発を1年程やってて自分で最初から開発してみたい方になります。そのため細かい用語などの説明はしません。

2. プロジェクトの準備

2-1. プロジェクトを作成

3. Dependenciesの追加

3-1. loading_animation_widgetを追加

flutter pub add loading_animation_widget

4. ソースコード

4-1. main.dart

import 'package:flutter/material.dart';

import 'home.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

4-2. home.dart

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: FutureBuilder(
          future: _wait(7),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return _loadingWidget(100);
            } else {
              return Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    const Text(
                      'You have pushed the button this many times:',
                    ),
                    Text(
                      '$_counter',
                      style: Theme.of(context).textTheme.headline4,
                    ),
                  ],
                ),
              );
            }
          }),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }

  Widget _loadingWidget(double size) {
    return Center(
      child: LoadingAnimationWidget.beat(
        color: Colors.blue,
        size: size,
      ),
    );
  }

  Future _wait(seconds) async {
    return await Future.delayed(Duration(seconds: seconds));
  }
}
  • 7秒間、結果画像のようなローディングが表示された後、本画面が開く
    • _wait
      • 待機
    • _loadingWidget
      • ローディング中に表示するWidget

5. 結果

6. 備考

この例では「beat」を採用してますが、色んな種類が用意されてますね。

7. 参考

投稿者プロフィール

Sondon
開発好きなシステムエンジニアです。
卓球にハマってます。

関連記事

  1. flutter

    【Flutter】GoogleMapを使用したアプリの開発について P…

  2. flutter

    【Flutter】2回目以降のリリース,Android,iOS

  3. flutter

    【Flutter】アプリ名やアイコンの変更とローンチスクリーンの表示

  4. flutter

    【Flutter】FlutterとKotlinでそれぞれCounter…

  5. 【Widget of the Week】#3 Wrap

  6. flutter

    【Flutter】リリース,Android,iOS

最近の記事

  1. AWS
  2. flutter

制作実績一覧

  1. Checkeys