バッテラのハローワールド研究室

エンジニア、プログラミングに関する情報を掲載中!

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

次の画面へ移動

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