【Flutter】画面遷移(Navigatorとroutes)をする方法

Flutterで最近個人開発を始めた、個人アプリ開発をしているものです。

はい、ということで、今回は、Flutterの画面遷移についてやっていきたいと思います！

Flutterで画面遷移する方法はいくつかありますが、今回は、名前付きのルーティングの方法をご紹介します。

実装用のサンプルコードがありますので、よかったらみてください。

zor3/flutter_cookbook

Youtubeチャンネルもやっています。

さて、Flutterの画面遷移の方法ですが、コードベースでお話しします。

っと、時間のない方は「まとめです。」だけ見てください。

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
       title: 'routing Demo',
       theme: ThemeData(
         primarySwatch: Colors.blue,
         visualDensity: VisualDensity.adaptivePlatformDensity,
       ),
       initialRoute: '/',　←★ここ
       routes: {　←★ここ
         '/': (context) => HomePage(),
         '/listPage': (context) => ListPage(),
         '/addPage': (context) => AddPage(),
       },
     );
 }
}

上記は、Flutterのルーティングを設定する際のクラスになります。

initialRoute: '/',

これはアプリロード時に一番初めに表示されるページのルーティングの設定になります。

       routes: {
         '/': (context) => HomePage(),
         '/listPage': (context) => ListPage(),
         '/addPage': (context) => AddPage(),
       },

こちらは、ルーティングの一覧の記述になります。

routes配下に「/」「/listPage」「/addPage」みたいに記述されている箇所がルーティング名になり、これを利用したい際には下記のように指定します。

Navigator.pushNamed(context, '/listPage');

この例だと、listPageに遷移します。

続いて、「 (context) => ListPage(),」ですが、(context)はおまじないとして、

「ListPage()」とか「HomePage()」とあるのが、遷移先のクラス名になります。

ですので、上記の例ですと、listPageクラスに画面遷移します。

分かりにくければ、実際に上記に乗せてあるgithubのソースコードをご覧いただければわかると思います。

ちなみに、画面遷移先から戻る場合は下記を利用します。

Navigator.of(context).pop();

画面遷移の方法には色々な方法がありますが、一旦はここまでとします。

もじ需要があるのでしたら更に細かく書かせていただこうかとは思ってます。

まとめです。

initialRoute: '/',

に初期画面を指定して・・・

       routes: {
         '/': (context) => HomePage(),
         '/listPage': (context) => ListPage(),
         '/addPage': (context) => AddPage(),
       },

routesの左にルーティング名、右にクラス名を指定して・・・

Navigator.pushNamed(context, '/listPage');

Navigatorで画面遷移

Navigator.of(context).pop();

で画面を戻る

以上です。

Flutterの状態管理でproviderを利用する方法はこちらです。

https://note.com/imesto/n/na760d591855d

​