Оценок пока нет Навигация по именованным маршрутам

В статье Навигации к новому экрану и в обратно мы узнали, как перейти к новому экрану, создав новый маршрут и передав его в навигатор Navigator.

Однако, если вам нужно перейти к одному и тому же экрану во многих частях вашего приложения, такой подход может привести к дублированию кода. Решение состоит в том, чтобы определить именованный маршрут и использовать именованный маршрут для навигации.

Для работы с именованными маршрутами используйте функцию Navigator.pushNamed(). В этом примере реплицируется функциональность из исходного рецепта, демонстрируя, как использовать именованные маршруты, выполнив следующие шаги:

1. Создайте два экрана.
2. Определите маршруты.
3. Перейдите на второй экран, используя Navigator.pushNamed().
4. Вернитесь к первому экрану с помощью Navigator.pop().

1. Создаем два экрана

Сначала создайте два экрана для работы. Первый экран содержит кнопку для перехода ко второму экрану. Второй экран содержит кнопку, которая возвращает вас к первому.

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: RaisedButton(
          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: RaisedButton(
          onPressed: () {
            // Navigate back to first screen when tapped.
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

2. Определение маршрутов

Затем определяем маршруты, предоставив дополнительные свойства для конструктора 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(),
  },
);

[info] Предупреждение: при использовании initialRoute не определяйте свойство home. [/info]

3. Перейдем на второй экран

При наличии виджетов и маршрутов запустите навигацию с помощью метода 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) => 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: RaisedButton(
          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: RaisedButton(
          onPressed: () {
            // Navigate back to the first screen by popping the current route
            // off the stack.
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

Данная статься является переводом официальной статьи на официальной статьи по ссылке Navigate with named routes.