Navigator.pushとpopで画面をプッシュしたりポップしたりし、コンストラクターでデータを渡し、画面が閉じるときに結果を受け取りましょう。
このレッスンを Kodokon で開くFlutterは画面をスタックとして管理します。Navigator.pushは新しい画面を一番上に置き、Navigator.popは一番上の画面を取り除いて前の画面を現します。各画面はルートであり、MaterialPageRouteがプラットフォーム固有のトランジションを提供します。Androidの戻るボタンは、一行のコードもなしにあなたの代わりにpopを呼び出します。
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Home')),
body: Center(
child: FilledButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return const DetailScreen(
productName: 'Headphones',
);
},
),
);
},
child: const Text('View product'),
),
),
);
}
}次の画面にデータを渡すのに、魔法のような仕組みはありません。遷移先の画面は他と変わらないウィジェットであり、コンストラクターを通じてデータを受け取ります。型付けされ、明示的で、フィールドが欠けているとコンパイラーが指摘してくれます。プッシュされた画面のAppBarは、あなたが何も書かなくても戻るボタンを表示することに注目してください。
import 'package:flutter/material.dart';
class DetailScreen extends StatelessWidget {
const DetailScreen({
super.key,
required this.productName,
});
final String productName;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(productName)),
body: Center(
child: FilledButton(
onPressed: () {
Navigator.pop(context, true);
},
child: const Text('Add to cart'),
),
),
);
}
}Navigator.pushは、画面が閉じられたときにpopへ渡された値とともに完了するFutureを返します。したがって画面の結果を待つことができます。確認、リストから選ばれた項目、入力されたフォームなどです。ジェネリック型push<bool>は、あなたが何を受け取ろうとしているかを明示します。
import 'package:flutter/material.dart';
Future<void> openDetail(BuildContext context) async {
final added = await Navigator.push<bool>(
context,
MaterialPageRoute<bool>(
builder: (context) {
return const DetailScreen(
productName: 'Headphones',
);
},
),
);
if (!context.mounted) return;
final message = (added ?? false)
? 'Product added to cart'
: 'No product added';
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text(message)),
);
}