Flutterで画面遷移する方法【2パターン】

Flutterで画面遷移する方法は2パターンあります。

説明で出てくるMyPageクラスのコード


class MyPage extends StatelessWidget {
  final String title;
  const MyPage({Key? key, required this.title}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(title),
      ),
      body: const Text('MyPage'),
    );
  }
}

パターン1：ルートを最初に定義して遷移する

ルートを定義する

最初にページに名前を付けて定義します。

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      initialRoute: '/', //初期画面

      // 遷移する画面を定義する
      routes: <String, WidgetBuilder>{
        '/': (BuildContext context) => const MyPage(title: 'RootPage'),
        '/PageA': (BuildContext context) => const MyPage(title: 'PageA'),
        '/PageB': (BuildContext context) => const MyPage(title: 'PageB'),
      },
    );
  }
}

動的に定義する方法

遷移する方法

名前を指定して遷移する

Navigator.pushNamed(context, '/');

パターン2:いきなり遷移する

いきなり、ルートを作って飛ぶこともできます。

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const MyPage(title: 'PageA')),
);

いきなり遷移に名前を付ける方法

settingsにRouteSettingsでnameをつけて遷移することもできます。
ページを動的に作るけど名前を付けたい場合などに使えますね！

Navigator.push(
  context,
  MaterialPageRoute(
      builder: (context) => MyPage(title: 'MyPage3'),
      settings: RouteSettings(name: '/MyPage3')),
);