バッテラが如く

プログラミングしましょ!

【Flutter】Navigatorを使った画面遷移

Flutterの画面遷移方法についての記事です。

※この記事の情報は次のバージョンで動作確認しています。

  • MacOS Monterey (12.1) Flutter (v2.10.4) VSCode (v1.67.2)
  • 次の画面へ移動

    Navigator.push(context,
                        MaterialPageRoute(builder: (context) => SampleScreen()),
                      );

    前の画面に戻る

     Navigator.pop(context);

    エラーが起きるケースもある

    最初ネット記事を見て実践したところ以下のエラーが発生した

    Navigator operation requested with a context that does not include a Navigator

    解決策としては、 MaterialAppの中で NavigatorのAPIを使うとエラーが発生するようでした。 なので、MateralAppとWidgetを分離するコードの書き方にすると解消した。

    // サンプル
    import 'package:flutter/material.dart';
    import 'package:free/screen/hoge_screen.dart';
    
    class SampleApp extends StatelessWidget {
      
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: SampleScreen(),
        );
      }
    }
    
    class SampleScreen extends StatelessWidget {
      const SampleScreen({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: const Text('1ページ目')),
            body: Center(
              child: TextButton(
                child: Text('次の画面へ'),
                onPressed: () {
                  Navigator.push(
                    context, 
                    MaterialPageRoute(builder: (context) => HogeSreen()),
                  );
                }),              
            ),
          );
      }
    }
    

    参考にしたサイト様

    qiita.com