使用命名路由導航

在 導航到新螢幕並返回 的食譜中，您學習瞭如何透過建立新路由並將其推送到 Navigator 來導航到新螢幕。

但是，如果您需要在應用中的許多地方導航到同一個螢幕，這種方法可能會導致程式碼重複。解決方案是定義一個命名路由，並使用該命名路由進行導航。

要使用命名路由，請使用 Navigator.pushNamed() 函式。此示例透過以下步驟複製了原始食譜的功能，演示瞭如何使用命名路由：

1. 建立兩個螢幕。
2. 定義路由。
3. 使用 Navigator.pushNamed() 導航到第二個螢幕。
4. 使用 Navigator.pop() 返回第一個螢幕。

首先，建立兩個螢幕供您使用。第一個螢幕包含一個導航到第二個螢幕的按鈕。第二個螢幕包含一個導航回第一個螢幕的按鈕。

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!'),
        ),
      ),
    );
  }
}

接下來，透過為 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(),
  },
)

在小部件和路由就緒後，透過使用 Navigator.pushNamed() 方法觸發導航。這會告訴 Flutter 構建 routes 表中定義的小部件並啟動螢幕。

在 FirstScreen 小部件的 build() 方法中，更新 onPressed() 回撥。

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

要導航回第一個螢幕，請使用 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!'),
        ),
      ),
    );
  }
}