Лекция 6

1. ПМ5. Проектирование ПО

2. Темы

Тема 3.3: Навигация между экранами. Navigator, Routes (именованные и
анонимные).
Тема 3.4: Передача данных между экранами (через конструкторы).

3. Тема 3.3: Навигация между экранами. Navigator, Routes (именованные и анонимные).

Тема 3.3: Навигация между
экранами. Navigator, Routes (именованные и
анонимные).
Flutter предоставляет полноценную систему для навигации между экранами и обработки
глубоких ссылок. Небольшие приложения без сложных глубоких ссылок могут использовать
Navigator, в то время как приложениям со специфическими требованиями к глубоким
ссылкам и навигации следует также использовать Router для корректной обработки
глубоких ссылок на Android и iOS, а также для синхронизации с адресной строкой при
работе приложения в веб-браузере.
Использование Navigator
Виджет «Навигатор» отображает экраны в виде стека, используя правильные анимации
перехода для целевой платформы. Чтобы перейти к новому экрану, получите доступ к
навигатору через BuildContext маршрута и вызовите императивные методы, такие как
Поскольку Navigator хранит стек объектов Route (представляющих стек
push() или pop():
истории), метод push() также принимает объект Route. Объект
MaterialPageRoute является подклассом Route и определяет анимацию
переходов для Material Design.
child: const Text('Open second screen'),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute<void>(
builder: (context) => const SecondScreen(),),);
},

4. Тема 3.3: Навигация между экранами. Navigator, Routes (именованные и анонимные).

Тема 3.3: Навигация между
экранами. Navigator, Routes (именованные и
анонимные).
Использование именованных маршрутов
Приложения с простой навигацией и требованиями к глубоким ссылкам могут использовать
Navigator для навигации и параметр MaterialApp.routes для глубоких ссылок:
child: const Text('Open second screen'),
onPressed: () {
Navigator.pushNamed(context, '/second');
},
/second обозначает именованный маршрут, объявленный в списке MaterialApp.routes.
Ограничения
Хотя именованные маршруты могут обрабатывать прямые ссылки, их поведение всегда одинаково
и не может быть изменено. Когда платформа получает новую прямую ссылку, Flutter добавляет
новый маршрут в Navigator независимо от текущего местоположения пользователя.
Flutter также не поддерживает кнопку «Перейти» в браузере для приложений, использующих
именованные маршруты. По этим причинам не рекомендуется использовать именованные маршруты
в большинстве приложений. Вместо этого используйте пакет маршрутизации, например
go_router, или используйте Navigator с MaterialPageRoute.

5. Тема 3.3: Навигация между экранами. Navigator, Routes (именованные и анонимные).

Тема 3.3: Навигация между
экранами. Navigator, Routes (именованные и
анонимные).
Использование Router
В приложениях Flutter с расширенными требованиями к навигации и маршрутизации (например,
в веб-приложениях, использующих прямые ссылки на каждый экран, или в приложениях с
несколькими виджетами Navigator) следует использовать пакет маршрутизации, такой как
go_router, который может анализировать путь маршрута и настраивать Navigator всякий раз,
когда приложение получает новую прямую ссылку.
Чтобы использовать Router, переключитесь на конструктор Router в MaterialApp или
CupertinoApp и укажите в нем конфигурацию Router. Пакеты маршрутизации, такие как
go_router, обычно предоставляют конфигурацию маршрутов, и маршруты можно использовать
следующим образом:
child: const Text('Open second screen'),
onPressed: () => context.go('/second'),
Поскольку такие пакеты, как go_router, являются декларативными, они всегда будут
отображать один и тот же экран (или экраны) при получении прямой ссылки.

6. Тема 3.3: Навигация между экранами. Navigator, Routes (именованные и анонимные).

Тема 3.3: Навигация между
экранами. Navigator, Routes (именованные и
анонимные).
Работа с вкладками
Работа с вкладками — распространённый шаблон в приложениях, следующих принципам Material
Design. Flutter предоставляет удобный способ создания макетов с вкладками в рамках
библиотеки Material Design.
В этом примере создаётся приложение с вкладками, используя следующие шаги:
1.Создать TabController.
return MaterialApp(
2.Создать вкладки.
home: DefaultTabController(length: 3, child: Scaffold()),
3.Создать контент для каждой вкладки.
);
1. Создайте TabController
Для корректной работы вкладок необходимо синхронизировать выбранную вкладку и разделы
контента. Это задача TabController.
Вы можете создать TabController вручную или автоматически, используя виджет
DefaultTabController.
Использование DefaultTabController — самый простой вариант, поскольку он создает
TabController и делает его доступным для всех дочерних виджетов.

7. Тема 3.3: Навигация между экранами. Navigator, Routes (именованные и анонимные).

Тема 3.3: Навигация между
экранами. Navigator, Routes (именованные и
анонимные).
2. Создание вкладок
При выборе вкладки необходимо отобразить её содержимое. Вкладки можно создавать с помощью
виджета TabBar. В этом примере создайте TabBar с тремя виджетами вкладок и поместите его
внутрь AppBar.
return MaterialApp(
home: DefaultTabController(
По умолчанию TabBar ищет ближайший
length: 3,
DefaultTabController в дереве виджетов. Если вы
child: Scaffold(
создаете TabController вручную, передайте его в
appBar: AppBar(
TabBar.
bottom: const TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
body: const TabBarView(
Tab(icon: Icon(Icons.directions_transit)),
children: [
Tab(icon: Icon(Icons.directions_bike)),],),),),),);
Icon(Icons.directions_car),
3. Создайте контент для каждой вкладки
Теперь, когда у вас есть вкладки, отображайте
контент при выборе вкладки. Для этого
используйте виджет TabBarView.
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),],
),

8. Тема 3.3: Навигация между экранами. Navigator, Routes (именованные и анонимные).

Тема 3.3: Навигация между
экранами. Navigator, Routes (именованные и
анонимные).
Возвращать данные с экрана
Как вернуть данные с нового экрана.
В некоторых случаях вы можете вернуть данные с нового экрана. Например, предположим, что вы
нажимаете на новый экран, который представляет пользователю два варианта. Когда пользователь
нажимает на опцию, вы хотите сообщить на первом экране о выборе пользователя, чтобы он мог
действовать с этой информацией.
Вы можете сделать это с помощью метода Navigator.pop(), выполнив следующие действия:
1.Определить главный экран
2.Добавьте кнопку, которая запускает экран выбора
3.Показать экран выбора с двумя кнопками
4.При нажатии кнопки закройте экран выбора
5.Показать закусочную на главном экране с выбором

9. Тема 3.3: Навигация между экранами. Navigator, Routes (именованные и анонимные).

Тема 3.3: Навигация между
экранами. Navigator, Routes (именованные и
анонимные).
1. Определить главный экран
На главном экране отображается кнопка. При нажатии запускается экран выбора
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Returning Data Demo')),
// Create the SelectionButton widget in the next step.
body: const Center(child: SelectionButton()),
);
}
}

10. Тема 3.3: Навигация между экранами. Navigator, Routes (именованные и анонимные).

Тема 3.3: Навигация между
экранами. Navigator, Routes (именованные и
анонимные).
2. Добавьте кнопку, которая запускает экран выбора
Теперь создайте кнопку выбора, которая выполняет следующие действия:
•Запускает Selectet Screen при надавии.
class _SelectionButtonState extends State<SelectionButton> {
•Ожидание, пока SelectScreen вернет результат
class SelectionButton extends StatefulWidget {
const SelectionButton({super.key});
@override
State<SelectionButton> createState() =>
_SelectionButtonState();
}
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {
_navigateAndDisplaySelection(context);
},
child: const Text('Pick an option, any option!'),
);
}
Future<void> _navigateAndDisplaySelection(BuildContext context) as
// Navigator.push returns a Future that completes after calling
// Navigator.pop on the Selection Screen.
final result = await Navigator.push(
context,
// Create the SelectionScreen in the next step.
MaterialPageRoute<String>(builder: (context) => const SelectionScr
);
}
}