モケラ

Tech Sheets

mokelab

Flutterで、名前を使って画面遷移する

最終更新日:2019-05-02

Flutterでは、WebのURLのように名前を使って画面遷移することもできます。ヘルプページのような、遷移元がたくさんあるような場面で使うとよいでしょう。

遷移先となるWidgetはこちらを参照してください。

名前とWidgetの対応を設定する

名前と画面(Widget)の対応は MaterialApproutes に記述します。

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.amber,
    ),
    home: MyHomePage(title: 'Flutter Demo Home Page'),
    routes: <String, WidgetBuilder> {
      '/next': (BuildContext context) => NextPage(),
    },
  );
}

画面遷移する

名前で画面遷移をするには、 Navigator.pushNamed() を使用します。

// FABの部分だけ記述
FloatingActionButton(
    onPressed: () => Navigator.pushNamed(this.context, '/next'),
    tooltip: 'Next',
    child: Icon(Icons.arrow_right),
)

一覧に戻る