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

2020/1/3 書き溜め

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

概要

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

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

class OmohikaneApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return
      MultiProvider(
        providers: [],
        child:
          MaterialApp(
            title: 'Omohikane ルーティング App',
            initialRoute: '/',
            routes: <String, WidgetBuilder>{
              '/': (BuildContext context) => TopScreen(),
              '/recommend': (BuildContext context) => RecommendScreen(),
              "/upload": (BuildContext context) => UploadFormScreen(),
              "/setting_list": (BuildContext context) => SettingListScreen(),
              "/notifications": (BuildContext context) => NotificationsScreen()
            }
          ),
      );
  }
}

class OmohikaneApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return

MultiProvider(

providers: [],

child:

MaterialApp(

title: 'Omohikane ルーティング App',

initialRoute: '/',

routes: <String, WidgetBuilder>{

'/': (BuildContext context) => TopScreen(),

'/recommend': (BuildContext context) => RecommendScreen(),

"/upload": (BuildContext context) => UploadFormScreen(),

"/setting_list": (BuildContext context) => SettingListScreen(),

"/notifications": (BuildContext context) => NotificationsScreen()

}

);

}

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

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

MaterialPageRouteでページ遷移する方法

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

Navigator.push(
    context,
    MaterialPageRoute(
        settings: RouteSettings(name: "/"),
        builder: (BuildContext context) => TopScreen()
    )
);

Navigator.push(

context,

MaterialPageRoute(

settings: RouteSettings(name: "/"),

builder: (BuildContext context) => TopScreen()

)

);

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

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

 Navigator.push(context, new MaterialPageRoute<Null>(
     builder: (BuildContext context) => new DokurituPage(
       title: "独立したページ"
     )
 ));

Navigator.push(context, new MaterialPageRoute<Null>(

builder: (BuildContext context) => new DokurituPage(

title: "独立したページ"

)

));

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

じゃあね〜〜〜〜。