Toni_Dev 
23.03.2023 
0 
493 Навигация является важной частью любого мобильного приложения, и Flutter предоставляет богатый набор виджетов и API для реализации навигации в вашем приложении. В этой статье мы рассмотрим различные опции, доступные для навигации во Flutter.
Основные понятия навигации
Давайте в начале рассмотрим некоторые основные концепции навигации во Flutter.
Navigator
Navigator — это виджет, который управляет стеком экранов в вашем приложении Flutter. Он предоставляет методы для добавления нового экрана в стек, удаления верхнего экрана из стека или замены текущего экрана новым экраном.
BuildContext
BuildContext — это объект, который представляет местоположение виджета в дереве виджетов. Он обычно используется во Flutter для получения ссылки на ближайший виджет навигатора, который можно использовать для выполнения навигационных операций.
Screen или route
В Flutter screen или route представляют собой отдельную страницу или экран в вашем приложении. Каждому экрану обычно соответствует отдельный виджет, который определяет пользовательский интерфейс для этого экрана.
Именованные маршруты
Именованные маршруты — это способ присвоить каждому экрану в вашем приложении уникальный идентификатор. Вместо перехода к экрану, помещая его в стек, вы можете перейти к экрану, используя его уникальный идентификатор. Такой подход облегчает навигацию между экранами и может упростить код для управления навигацией внутри вашего приложения.
Передача данных между экранами
Приложениям часто приходится передавать данные между экранами. В Flutter вы можете передавать данные на новый экран при переходе к нему, передавая аргументы виджету Navigator. Затем вы можете получить доступ к этим данным в виджете нового экрана, чтобы заполнить пользовательский интерфейс.
В целом, навигация в Flutter включает в себя управление стеком экранов или маршрутов с помощью виджета Navigator и объектов BuildContext. Именованные маршруты и передача данных между экранами — это дополнительные концепции, которые могут помочь вам создать более сложную и гибкую навигацию в вашем приложении.
Виджет Navigator
Виджет Navigator является фундаментальным компонентом навигации во Flutter. Он управляет стеком экранов или маршрутов и предоставляет методы для добавления новых экранов в стек, удаления экранов из стека и замены текущего экрана новым экраном.
Когда вы помещаете новый экран в стек, новый экран добавляется в верхнюю часть стека, а предыдущий экран опускается на один уровень ниже. Это создает набор экранов, по которым можно перемещаться с помощью кнопки «Назад» на устройствах Android или жеста «свайп» на устройствах iOS.
Чтобы использовать виджет Navigator, вам обычно необходимо получить ссылку на него с помощью объекта BuildContext. Это делается путем передачи объекта BuildContext обратному вызову onPressed виджета или аналогичному обработчику событий. Как только у вас появится ссылка на навигатор, вы можете использовать его методы для перемещения, всплывания или замены экранов в стеке.
Вот некоторые из наиболее распространенных методов работы виджета Navigator:
- push: помещает новый экран в стек.
- pop: удаляет текущий экран из стека и возвращает к предыдущему экрану.
- popUntil: удаляет все экраны из стека до тех пор, пока не будет выполнено определенное условие.
- pushReplacement: заменяет текущий экран новым экраном.
- pushNamed: помещает именованный маршрут в стек.
Вот пример использования виджета Navigator для добавления нового экрана в стек:
import 'package:flutter/material.dart';
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Screen'),
),
body: Center(
child: ElevatedButton(
child: Text('Go to Second Screen'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
},
),
),
);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Screen'),
),
body: Center(
child: ElevatedButton(
child: Text('Go back to First Screen'),
onPressed: () {
Navigator.pop(context);
},
),
),
);
}
}В этом примере у нас есть два экрана. Когда пользователь нажимает кнопку Go to Second Screen на первом экране, приложение переходит ко второму экрану, помещая его в стек с помощью метода Navigator.push. Аналогично, когда пользователь нажимает кнопку Go back to First Screen на втором экране, приложение извлекает второй экран из стека с помощью метода Navigator.pop, возвращаясь к первому экрану.
Базовая навигация
Самая простая форма навигации в Flutter — это использование виджета Navigator для перемещения экранов в стек и из него. Вот пример:
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);В этом примере мы помещаем новый экран в стек, используя метод Navigator.push. Мы передаем BuildContext для текущего экрана, а также MaterialPageRoute, который определяет новый экран, который будет помещен в стек. В этом случае новый экран является экземпляром SecondScreen.
Чтобы вернуться к предыдущему экрану, мы можем использовать метод Navigator.pop:
Navigator.pop(context);Это выводит текущий экран из стека и возвращает к предыдущему экрану.
Именованные маршруты
Хотя базовый подход к навигации прекрасно работает для небольших приложений, он может быстро стать громоздким по мере усложнения приложения. Лучшим подходом является использование именованных маршрутов, которые присваивают каждому экрану в приложении уникальный идентификатор. Вот пример:
MaterialApp(
routes: {
'/': (context) => HomeScreen(),
'/second': (context) => SecondScreen(),
},
);В этом примере мы определяем два именованных маршрута: ‘/‘, который сопоставляется виджету HomeScreen, и ‘/second‘, который сопоставляется виджету SecondScreen. Затем мы можем использовать метод Navigator.pushNamed для перехода к экрану, используя его именованный маршрут:
Navigator.pushNamed(context, '/second');Это более структурированный подход к навигации, поскольку он позволяет нам легко добавлять новые экраны в приложение и переходить к ним, используя их уникальные идентификаторы.
Передача данных между экранами
Еще одним распространенным требованием в мобильных приложениях является возможность передачи данных между экранами. Это может быть достигнуто в Flutter путем передачи аргументов новому экрану при переходе к нему:
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen(data: 'Hello')),
);В этом примере мы передаем строку ‘Hello’ виджету SecondScreen, используя аргумент data. Затем мы можем получить доступ к этим данным в виджете SecondScreen
class SecondScreen extends StatelessWidget {
final String data;
SecondScreen({required this.data});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Second Screen')),
body: Center(child: Text(data)),
);
}
}В этом примере мы обращаемся к аргументу data, переданному SecondScreen в конструкторе, и используем его для отображения строки ‘Hello’ в пользовательском интерфейсе.
Заключение
Навигация является важной частью любого мобильного приложения, и Flutter предоставляет богатый набор инструментов и API для реализации навигации в вашем приложении. Независимо от того, используете ли вы базовую навигацию с помощью виджета Navigator или более продвинутые методы, такие как именованные маршруты и передача данных, Flutter позволяет легко создавать адаптивную и интуитивно понятную навигацию для ваших пользователей.
