BETA

[Flutter] スプラッシュ画面の作り方

投稿日:2018-11-09
最終更新:2018-11-09

スプラッシュ画面が必要になるとき

FlutterではSharedPreferenceやデータベースのアクセスが非同期でしか行えません。

アプリ起動時に初期データを読み出したい場合に、スプラッシュ画面が有効です!

自作アプリでも同じ状況になりスプラッシュ画面を実装したので、まとめておきます。

スプラッシュ画面からメイン画面への遷移のやり方

通常、画面を遷移させる場合Navigator.pushを使いますが、このメソッドを使って遷移すると、バックキーでスプラッシュ画面に戻れてしまいます。

メイン画面でのバックキーではスプラッシュ画面に戻るのではなく、アプリを終了して欲しいのです。

そのため、画面を上乗せするのではなく、置き換えをするNavigator.pushReplacementを使います。

簡単!

スプラッシュ画面の実装

スプラッシュ画面では初期化処理とタイマーで一定時間待ち合わせの2つを実装します。

タイマー処理は初期化処理がすぐ終わるとスプラッシュ画面が一瞬で消えてしまうので、最低限表示したい時間を設定しています。

初期化処理を行わないスプラッシュ画面なら、タイマーの待ち合わせだけ行えば良いです!

class SplashScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _SplashScreen();
}

class _SplashScreen extends State<SplashScreen> {
  final Settings _settings = Settings();
  bool _initialized = false;
  bool _expired = false;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(// TODO スプラッシュ画面に表示するなにか
      ),
    );
  }

  // 初期化処理
  _initialize() {
    _settings.load(() {
      _initialized = true;
      _moveToMainScreen();
    });
  }

  // スプラッシュ画面を終了させるタイマーを開始する
  _startTimer() async {
    Timer(Duration(seconds: 2), () {
      _expired = true;
      _moveToMainScreen();
    });
  }

  // スプラッシュ画面をメイン画面に置き換えて遷移する
  _moveToMainScreen() {
    if (_initialized && _expired) {
      Navigator.pushReplacement(context, MaterialPageRoute(
          builder: (context) => MainScreen()
      ));
    }
  }
}

あとはmain.dartで最初に表示する画面をスプラッシュ画面に変更すれば完成です!

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@chihara'の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう