Contents
前回のレシピでは、新しいルートを作成してNavigatorにプッシュすることで、新しい画面に移動する方法を学習しました
ただし、アプリの多くの部分で同じ画面に移動する必要がある場合、このアプローチではコードが重複する可能性があります。
解決策は、名前付きルートを定義し、ナビゲーションに名前付きルートを使用することです。
名前付きルートを操作するには、Navigator.pushNamed()
メソッドを使用します。
この例では、元のレシピの機能を複製し、次の手順を使用して名前付きルートを使用する方法を示します。
- 2つの画面を作成します。
- ルートを定義します。
Navigator.pushNamed()
を使用してSecondScreenに移動します。Navigator.pop()
を使用してFirstScreenに戻ります。
1. Create two screens
まず、操作する2つの画面を作成します。
最初の画面(FirstScreen)には、2番目の画面に移動するボタンが含まれています。
2番目の画面(ScondScreen)には、最初の画面に戻るためのボタンが含まれています。
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Screen'),
),
body: Center(
child: ElevatedButton(
child: Text('Launch screen'),
onPressed: () {
// Navigate to the second screen when tapped.
},
),
),
);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Screen"),
),
body: Center(
child: ElevatedButton(
onPressed: () {
// Navigate back to first screen when tapped.
},
child: Text('Go back!'),
),
),
);
}
}
2. Define the routes
次に、MaterialApp
コンストラクターに追加のプロパティ(initialRoute
およびroutes
それ自体)を提供して、ルートを定義します。
このinitialRoute
プロパティは、アプリを開始するルートを定義します。(アプリを起動したときに一番最初に表示される画面(ルート))
routes
プロパティは、使用可能な名前付きルートと、それらのルートに移動するときに作成するウィジェットを定義します。
MaterialApp(
// Start the app with the "/" named route. In this case, the app starts
// on the FirstScreen widget.
initialRoute: '/',
routes: {
// When navigating to the "/" route, build the FirstScreen widget.
'/': (context) => FirstScreen(),
// When navigating to the "/second" route, build the SecondScreen widget.
'/second': (context) => SecondScreen(),
},
);
Warning:initialRouteプロパティを使うときは、homeプロパティは定義しないようにしましょう。
ウィジェットとルートを配置したら、Navigator.pushNamed()
メソッドを使用してナビゲーションをトリガーし ます。
これは、routes
テーブル(マップ)で定義されたウィジェットを作成して画面を起動する(移動する)ようにFlutterに指示 します。
FirstScreenウィジェットのbuild()メソッドの、onPressedコールバックに以下のコードを追加します。
// Within the `FirstScreen` widget
onPressed: () {
// Navigate to the second screen using a named route.
Navigator.pushNamed(context, '/second');
}
4. Return to the first screen
FirstScreenに戻るために、Navigator.pop()メソッドを使います。
// Within the SecondScreen widget
onPressed: () {
// Navigate back to the first screen by popping the current route
// off the stack.
Navigator.pop(context);
}
Interactive example
import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title: 'Named Routes Demo', // Start the app with the "/" named route. In this case, the app starts // on the FirstScreen widget. initialRoute: '/', routes: { // When navigating to the "/" route, build the FirstScreen widget. '/': (context) => FirstScreen(), // When navigating to the "/second" route, build the SecondScreen widget. '/second': (context) => SecondScreen(), }, )); } class FirstScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('First Screen'), ), body: Center( child: ElevatedButton( child: Text('Launch screen'), onPressed: () { // Navigate to the second screen using a named route. Navigator.pushNamed(context, '/second'); }, ), ), ); } } class SecondScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Second Screen"), ), body: Center( child: ElevatedButton( onPressed: () { // Navigate back to the first screen by popping the current route // off the stack. Navigator.pop(context); }, child: Text('Go back!'), ), ), ); } }
参考