【Flutter】pushNamedで画面遷移する方法

pushNamedで画面遷移をする方法のまとめ

1.クリック時に画面遷移する設定

まずはボタンを押したら、画面遷移できるようにするため、該当のbottonのonPressedに画面遷移ができるように設定します。

TextButton(
  onPressed: () {
    int index = data.indexOf(i);
    Navigator.pushNamed(context, '/searchResult',
      arguments: {
        "itemName": index + 1,
        "flag": flag
    });
 },

Navigator.pushNamed(context, '遷移したい画面のpath', argument: {遷移後に渡したい引数}をonPressed内に記述します。
遷移したい画面のpathの設定は次に説明します。

2.MaterialApp内でpathやWidgetの設定

MaterialAppで、onGenerateRouteの設定を行う必要があるので、それの対応をします。

return MaterialApp(
      home: MyPage(),
      onGenerateRoute: (settings) {
        switch (settings.name) {
          case '/searchResult':
            return PageTransition(
              child: SearchResultPage(itemName: settings.arguments, flag:                   settings.arguments,),
              duration: Duration(milliseconds: 200),
              reverseDuration: Duration(milliseconds: 200),
              type: PageTransitionType.bottomToTop,
              settings: settings,
            );
          default:
            return null;
        }
      },
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
        textTheme: Theme.of(context).textTheme.apply(
              bodyColor: Colors.white,
              displayColor: Colors.white,
            ),
        scaffoldBackgroundColor: Color(0xFF333333),
      ),
    );

caseに遷移したい画面のpathを記述します。（このpathは任意のもので大丈夫なので、好きな名を命名して下さい。）
今回は画面遷移時にアニメーションをつけたいので、PageTransitionで囲ったWidgetを返すようにします。
childには、画面遷移後のページとなるWidgetを設定し、次のページで使用したい引数を渡しておきます。（keyは1のargumentsで設定したもの、valueにはsettings.argumentsを渡せば大丈夫です。）
アニメーション関連はまた別途まとめれたらいいと思っているので、今度の機会にします。

3.遷移後の画面設定

最後に画面遷移後のWidget内で下記のように設定を行います。

class SearchResultPage extends StatefulWidget {
  final itemName;
  final flag;

  SearchResultPage({required this.itemName, required this.flag});

  @override
  State<SearchResultPage> createState() => _SearchResultPageState();
}

これで、widget.itemName['itemName']とwidget.flag['flag']でそれぞれWidget内で変数として使用できるようになりました。

このほかにもまだまだ良い方法があると思うので、色々教えていただけたらと思います。