2023年3月26日
開発環境
OS：Windows 11
SDK：VS Code + flutter 3.7.5
ページ移動＝画面遷移とは
１画面にアプリの機能を全て集約すると見た目が煩雑となり、操作性が悪くなります。
そこで機能を分別し、機能ごとに画面を構成します。
そして、操作に合わせて適切な画面を表示するようことでアプリの機能が全て満たせるよう実装できるわけです。
この操作に合わせて適切な画面を表示することを画面遷移と呼びます。
画面遷移ロジック
画面遷移を行うにはNavigatorクラスを使用します。
基本的なロジックは下記となります。
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const (遷移先画面クラス)()),
);ボタンをタップする、状態が変わるなどのトリガーが発生した際に上記ロジックをコールすれば指定した画面に遷移できます。
実装してみる
テキストを表示するだけのサブ画面を作成します。
class SubPage extends StatelessWidget {
const SubPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: double.infinity,
height: double.infinity,
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text('Sub Page')
],)
),
);
}
}あとはメイン画面にボタンを配置し、ボタンをタップするとサブ画面に遷移するようにします。
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: double.infinity,
height: double.infinity,
alignment: Alignment.center,
child: Column(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
alignment: Alignment.center,
child:Image.asset('images/sample.jpg'),),),
Expanded(
flex :1,
child: Container(
alignment: Alignment.center,
child: ElevatedButton(
onPressed: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => const SubPage())
);
},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
),
child: const Text('Next Page'),
),))
],
),
),
);
}実際にWebで実行してみると以下の通りです。
「Next Page」ボタンをタップするとサブ画面に遷移します。
Navigatorクラスには他にも幾つかのメソッドが用意されています。
| メソッド | 挙動 |
|---|---|
| push | 遷移前の画面を残し、遷移先画面を表示する |
| pushReplacement | 遷移前の画面を残さず、遷移先画面を表示する |
| pushNamed | 指定したルートの画面を表示する（Route登録必要） |
| pop | 画面を消去する |
用途に合わせ、使い分けることができます。
今回は以上です。
