Навигация во Flutter с использованием именованных маршрутов

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

Данная проблема может быть решена с использованием именованных маршрутов для навигации.

Итак, у нас имеется два экрана. На первом экране находится кнопка для перехода на второй экран. На втором экране - кнопка для возврата к первому.

Первый экран:

class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text(
          'First Screen',
        ),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {

          },
          child: const Text('Second Screen'),
        ),
      ),
    );
  }
}

Второй экран:

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  const SecondScreen({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text(
          'Second Screen',
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {

              },
              child: const Text('Back'),
            ),
          ],
        ),
      ),
    );
  }
}

Добавление именованных маршрутов

Первым делом необходимо воспользоваться свойством routes виджета MaterialApp. Данное свойство содержит доступные именованные маршруты и виджеты, которые будут созданы при переходе по этим маршрутам.

routes: {
  '/': (context) => const FirstScreen(),
  '/second': (context) => const SecondScreen(),
},

Здесь для перехода на FirstScreen необходимо перейти по маршруту '/', а для перехода на SecondScren - по маршруту '/second', соответственно.

Теперь, необходимо определить начальный маршрут - стартовый экран приложения. Для этого нужно установить значение в свойство initialRoute того же самого виджета MaterialApp.

initialRoute: '/',

В данном случае, начальным маршрутом будет '/'. Это означает, что стартовым экраном приложения будет FirstScreen.

То есть виджет MaterialApp должен выглядеть следующим образом:

MaterialApp(
  title: 'Flutter Named Routes',
  initialRoute: '/',
  routes: {
    '/': (context) => const FirstScreen(),
    '/second': (context) => const SecondScreen(),
  },
)

Использование метода pushNamed()

Теперь, для перехода на второй экран можно использовать метод Navigator.pushNamed() с двумя аргументами:

1. Контекст
2. Название маршрута

onPressed: () {
  Navigator.pushNamed(context, '/second');
}

Вызов данного метода добавлен на нажатие кнопки 'Second Screen' на первом экране.

Использование метода pop()

Для возвращения на экран используется метод Navigator.pop() с одним аргументом - context:

onPressed: () {
  Navigator.pop(context);
}

Вызов данного метода добавлен на нажатие кнопки 'Back' на втором экране.

Таким образом, осуществляется навигация между экранами с помощью более компактной записи, чем в случае с использованием метода push().

Полный исходный код можно найти в репозитории на GitHub.

Полезные ссылки:

Навигация во Flutter
Как передавать данные между экранами
Передача данных именованному маршруту

Телеграм: https://t.me/the_cybermania
Код: https://github.com/AlexeyShpavda/flutter_navigator_pushnamed
Видео: https://www.youtube.com/watch?v=4GMW0yphxN4