名前付きルートを使用してナビゲートする

コンテンツ

の中に新しい画面に移動して戻るレシピ、新しいルートを作成して新しい画面に移動する方法を学習しました。それを押し込むNavigator。

ただし、多くの部分で同じ画面に移動する必要がある場合は、アプリの場合、このアプローチではコードの重複が発生する可能性があります。解決策は、名前付きルート、名前付きルートをナビゲーションに使用します。

名前付きルートを操作するには、使用Navigator.pushNamed()関数。この例では、元のレシピの機能を複製します。次の手順を使用して名前付きルートを使用する方法を示します。

2つの画面を作成します。
ルートを定義します。
を使用して 2 番目の画面に移動しますNavigator.pushNamed()。
を使用して最初の画面に戻りますNavigator.pop()。

1. 2つの画面を作成する

まず、作業する 2 つの画面を作成します。最初の画面には、 2 番目の画面に移動するボタン。 2 番目の画面には、最初に戻るボタン。

import 'package:flutter/material.dart';

class FirstScreen extends StatelessWidget {
  const FirstScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Navigate to the second screen when tapped.
          },
          child: const Text('Launch screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Navigate back to first screen when tapped.
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

2. ルートを定義する

次に、追加のプロパティを指定してルートを定義します。にMaterialAppコンストラクター:initialRouteそしてそのroutes彼ら自身。

のinitialRouteプロパティは、アプリがどのルートから開始するかを定義します。のroutesプロパティは、使用可能な名前付きルートとウィジェットを定義しますこれらのルートに移動するときに構築します。

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) => const FirstScreen(),
    // When navigating to the "/second" route, build the SecondScreen widget.
    '/second': (context) => const SecondScreen(),
  },
)

3. 2 番目の画面に移動します

ウィジェットとルートを配置したら、Navigator.pushNamed()方法。これにより、Flutter に、routesテーブルを選択して画面を起動します。

の中にbuild()の方法FirstScreenウィジェット、更新しますonPressed()折り返し電話：

// Within the `FirstScreen` widget
onPressed: () {
  // Navigate to the second screen using a named route.
  Navigator.pushNamed(context, '/second');
}

4. 最初の画面に戻ります

最初の画面に戻るには、Navigator.pop()関数。

// Within the SecondScreen widget
onPressed: () {
  // Navigate back to the first screen by popping the current route
  // off the stack.
  Navigator.pop(context);
}

インタラクティブな例

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) => const FirstScreen(),
        // When navigating to the "/second" route, build the SecondScreen widget.
        '/second': (context) => const SecondScreen(),
      },
    ),
  );
}

class FirstScreen extends StatelessWidget {
  const FirstScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          // Within the `FirstScreen` widget
          onPressed: () {
            // Navigate to the second screen using a named route.
            Navigator.pushNamed(context, '/second');
          },
          child: const Text('Launch screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          // Within the SecondScreen widget
          onPressed: () {
            // Navigate back to the first screen by popping the current route
            // off the stack.
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}