Help us understand the problem. What is going on with this article?

Flutter 全面にローディングを表示させるサンプル

実現したいこと

なにか処理中で、操作を受け付けれないような状態の時に、
全画面でローディングを表示させるやりかたについて書きたいと思います。

動作の様子

ボタンを押すとローディングが表示。2秒後に自動的に閉じます。

動作コード

こちらに一式用意しています。
https://github.com/quqjp/flutter-test

コード箇所はこちら。
https://github.com/quqjp/flutter-test/tree/master/lib/sample1

構成

ローディング表示のWidget OverlayLoadingMolecules を作成。

組み込む側メインのコードにて、Stack Widget を用いて最前面に配置します。

ローディングWidget OverlayLoadingMolecules

表示の状態 visible プロパティを持ち表示を外部から制御できるようになっています。
非表示時は、空のContainer()が表示されます。
くるくるローディング表示自体は、CircularProgressIndicator Widget を用いた。

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

//
// 全面表示のローディング
//
class OverlayLoadingMolecules extends StatelessWidget {
  OverlayLoadingMolecules({@required this.visible});

  //表示状態
  final bool visible;

  @override
  Widget build(BuildContext context) {
    return visible
        ? Container(
            decoration: new BoxDecoration(
              color: Color.fromRGBO(0, 0, 0, 0.6),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                CircularProgressIndicator(
                    valueColor: new AlwaysStoppedAnimation<Color>(Colors.white))
              ],
            ),
          )
        : Container();
  }
}

組み込む側メインのコード

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

//third party package

//my package

//same package
import "overlay_loading_molecules.dart";

//
// 全面にローディングを表示させるサンプル
//
class Sample1Page extends StatefulWidget {
  Sample1Page({Key key, this.title}) : super(key: key);

  // タイトル
  final String title;

  @override
  _State createState() => _State();
}

class _State extends State<Sample1Page> {
  //ローディング表示の状態
  bool visibleLoading = false;

  @override
  void initState() {
    super.initState();
  }

  //
  //
  // ボタンハンドラ
  onPressMyButton() async {
    //ローディングを表示
    setState(() {
      visibleLoading = true;
    });

    //2秒待つ
    await Future.delayed(const Duration(milliseconds: 2000), () {});

    //ローディングを非表示
    setState(() {
      visibleLoading = false;
    });
  }

  ///
  ///
  ///
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      //
      body: ClipRect(
        child: Stack(
          fit: StackFit.expand,
          overflow: Overflow.clip,
          children: <Widget>[
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                //
                //ローディングを表示させるためのボタン
                RaisedButton(
                  onPressed: onPressMyButton,
                  child: Text('ローディングを表示', style: TextStyle(fontSize: 20)),
                ),
              ],
            ),
            //
            //ローディング
            OverlayLoadingMolecules(visible: visibleLoading)
          ],
        ),
      ),
    );
  }
}

まとめ

flutter で全面にローディングを表示させる方法をまとめました。
flutter初学者のため、アドバイスなどいただけると嬉しいです。

quqjp
フリーランスフロントエンドエンジニア。ブログ・note執筆、個人開発(ツール系アプリ)にも取り組んでいます。 出版社・Web制作会社にてサービスの立ち上げや広告系キャンペーンサイト等のフロントエンド実装に携わる→独立→フリーランス9年目。
https://twitter.com/quqjp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away