Navigate with named routes

前回のレシピでは、新しいルートを作成してNavigatorにプッシュすることで、新しい画面に移動する方法を学習しました

ただし、アプリの多くの部分で同じ画面に移動する必要がある場合、このアプローチではコードが重複する可能性があります。

解決策は、名前付きルートを定義し、ナビゲーションに名前付きルートを使用することです。

名前付きルートを操作するには、Navigator.pushNamed()メソッドを使用します。

この例では、元のレシピの機能を複製し、次の手順を使用して名前付きルートを使用する方法を示します。

1. 2つの画面を作成します。
2. ルートを定義します。
3. Navigator.pushNamed()を使用してSecondScreenに移動します。
4. 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プロパティは定義しないようにしましょう。

3. Navigate to the second screen

ウィジェットとルートを配置したら、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!'),
        ),
      ),
    );
  }
}

参考

https://flutter.dev/docs/cookbook/navigation/named-routes