シェアする

Flutter routes ルーティングの使い方

Flutter MaterialPageRouteを使用してルーティングを設計する方法

flutterで開発しているといわゆる、vueRouterなどのルーティング機構が欲しくなる。
flutterでおルーティング機構はデフォルトで用意されているため、
今回はroutesパラメータを使用することでルーティングを設計する方法、
MaterialPageRouteで実際にページ遷移する方法を書き溜める。

広告

main.dartへのルーティング記述方法

main.dartに記述すること。
initialRoute:で、アプリ起動時の最初のルートを指定できます。
下記のように、”/パス名” => パスのクラス()といった形で記述していく。

 

ルーティングでページ遷移する方法

routesを記述したら好きなようにページ遷移が可能。
記述しなくてもMaterialPageRouteを使用すると、独立したページへ遷移も可能。

MaterialPageRouteでページ遷移する方法

記述したルーティングに対して、MaterialPageRouteを使用してページ遷移が可能です。
ボタンを押した際などで利用しやすい。基本的にこれをつかう。
Navigator.pushやNavigator.replaceについては今度まとめます。

MaterialPageRouteで独立したページ遷移する方法

main.dart ルーティングに書いていないページへ遷移したい。
そんなときにもMaterialPageRouteが役に立つ。
Nullを指定することで、独自のページへルーティングが可能です。

最近では、とりあえずmain.dartにはルーティングだけ書いて、
そこから開発を進めていると思う。


じゃあね〜〜〜〜。