Flutter (v2.10.4)
Flutterの画面遷移方法についての記事です。
次の画面へ移動
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('１ページ目')),
body: Center(
child: TextButton(
child: Text('次の画面へ'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HogeSreen()),
);
}),
),
);
}
}