今回は「Navigator.push()」「Navigator.pop()」を使って2画面での画面遷移をする方法を解説します。
目次
Navigator.push()|ホーム画面からの画面遷移
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const Screen2()),
);
ホーム画面から別のスクリーンに画面遷移する場合は「Navigator.push」を使用します。
「Screen2()」に遷移先のWidgetを指定します。
//完成ソース(Screen1)
class Screen1 extends StatelessWidget {
const Screen1({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('ホーム'),
),
body: Center(
child: ElevatedButton(
child: const Text('Go'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const Screen2()),
);
},
),
),
);
}
}
Navigator.pop()|画面遷移先からホームに戻る
Navigator.pop(context);
遷移先からホーム画面に戻るにいは「Navigator.pop」を使用します。
//完成ソース(Screen2)
class Screen2 extends StatelessWidget {
const Screen2({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('スクリーン2'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('Back'),
),
),
);
}
}
完成コード
これで2スクリーン間での画面遷移の実装は完了です。
//完成ソース
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: Screen1()));
class Screen1 extends StatelessWidget {
const Screen1({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('ホーム'),
),
body: Center(
child: ElevatedButton(
child: const Text('Go'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const Screen2()),
);
},
),
),
);
}
}
class Screen2 extends StatelessWidget {
const Screen2({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('スクリーン2'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('Back'),
),
),
);
}
}
以上です。