かとのぼのマイコード・マイライフ

個人開発者かとのぼのプログラミングと雑談のブログです。たまに読書と銭湯も

ロード画面の実装にmodal_progress_hud【Flutter】【Loading】

f:id:katonobo:20191017180242p:plain

Flutterでローディング画面の実装

Flutterのパッケージに「modal_progress_hud」という便利な機能があったので記録しておく。

pub.dev

こちらのパッケージを使えば、簡単にローディング中の画面を実装することができる。

下記のレジュメの通り。

pub.dev

ステップ1:pubspec.yamlファイルに依存関係の追加

dependencies:

modal_progress_hud: ^0.1.3

ステップ2:インストール

$ flutter pub get

ステップ3:インポート

使うファイルでインポート

import 'package:modal_progress_hud/modal_progress_hud.dart';

使用方法も上記のリンクを参照すれば簡単に実装できる。

ポイントは以下

  • 変数名を真偽値で指定する
  • Body要素のところで「ModalProgressHUD」で囲う
  • inAsyncCall: _savingのようにセットする。
  • ボタンを押す箇所のように実際にしようするところで、setStateをTrueにしてローディング画面を登場させる

 

 

Flutter モバイルアプリ開発バイブル

 

 

Android/iOSクロス開発フレームワーク Flutter入門

 

 

Flutter×Firebaseで始めるモバイルアプリ開発 (技術の泉シリーズ(NextPublishing))