[Flutter] アプリ起動から画面の呼び出しまでの流れ

今回は先日からのサンプルアプリの呼び出しについて紹介しておきます。
ここ数回の記事では、StatelessWidgetかStatefulWidgetを継承したSampleというクラスで各実装方法を紹介をしてきました。
しかし、実際にはそれだけをコピーしても実際に画面を表示することはできません。

基本的な構成となる部分についての解説を追加したいと思います。

それでははじめましょう。

プロジェクトの構成

Flutterを学ぶようになって、lib内でどのようなファイル構成にするのかが喫緊の課題でした。
現時点では、BLoC (Business Logic of Components) にも適用しやすく、以下のような構成を取るようにしています。

lib
├ main.dart
└ src
  ├ app.dart
  ├ ui
  | ├ sample.dart
  | └ ...その他
  ...その他

まず、lib/main.dartがアプリが起動時に呼び出されるmain()を定義するソースファイルです。

void main() => runApp(App());

上記にある通り、runApp()でApp()の呼び出しをしています。

このAppクラスをlib/src/app.dartで定義します。

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SampleApp with Routes',
      routes: <String, WidgetBuilder>{
        '/': (_) => Sample(),//Splash(),
        '/login': (_) => Login(),
        '/home': (_) => Home(),
      },
      theme: ThemeData.dark(),
    );
  }
}

現在開発しているアプリから呼び出す形を取るため、 MaterialAppの引数でroutesに対して’/’のルート（最上位)でSample()クラスを呼び出すようにして、毎回動作を記録するようにしています。
routesによるWidget間の画面遷移については、今後取り上げて行くようにしていきたいと思います。

上記のような形で組んでもらえたら、実際にサンプルも実行できるかと思います。

お疲れさまでした。