今回は「Navigator.pushNamed()」を使って2スクリーン間以上での画面遷移をする方法を解説します。
目次
MaterialAppで「initialRoute」「routes」を指定
MaterialApp(
//ホーム画面を指定
initialRoute: '/',
//スクリーンパスを作成
routes: {
'/': (context) => const Screen0(),
'/screen1': (context) => const Screen1(),
'/screen2': (context) => const Screen2(),
},
),
MaterialAppのroutesでホーム画面・遷移画面のパスを作成し、initialRouteでホーム画面を指定します。今回は「Screen0」をinitialRouteで指定しています。
指定したパスに画面遷移させる|Navigator.pushNamed()
Navigator.pushNamed(context, 'スクリーンパス');
Navigator.pushNamed()に先ほど作成したスクリーンパスを使用して画面遷移させます。
//完成ソース(Screen0)
class Screen0 extends StatelessWidget {
const Screen0({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('スクリーン0'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(
width: double.infinity,
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/screen1');
},
child: const Text('スクリーン1'),
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/screen2');
},
child: const Text('スクリーン2'),
),
],
),
);
}
}
Screen1とScreen2も同様に作業を行います。
完成コード
これで2スクリーン以上での画面遷移の実装は完了です。
//完成ソース
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => const Screen0(),
'/screen1': (context) => const Screen1(),
'/screen2': (context) => const Screen2(),
},
),
);
}
class Screen0 extends StatelessWidget {
const Screen0({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('スクリーン0'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(
width: double.infinity,
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/screen1');
},
child: const Text('スクリーン1'),
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/screen2');
},
child: const Text('スクリーン2'),
),
],
),
);
}
}
class Screen1 extends StatelessWidget {
const Screen1({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('スクリーン1'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(
width: double.infinity,
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/');
},
child: const Text('スクリーン0'),
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/screen2');
},
child: const Text('スクリーン2'),
),
],
),
);
}
}
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: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(
width: double.infinity,
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/');
},
child: const Text('スクリーン0'),
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/screen1');
},
child: const Text('スクリーン1'),
),
],
),
);
}
}
以上です。