Введение:
Добро пожаловать обратно в нашу серию Flutter! В этом сообщении блога мы углубимся в критические концепции навигации во Flutter.
По мере того как вы продолжаете создавать более сложные приложения, вам необходимо понимать, как перемещаться между различными экранами и отправлять данные между экранами.
Давайте рассмотрим эти темы, чтобы создать удобный пользовательский интерфейс и надежные приложения Flutter!
Понимание навигации во Flutter:
Навигация — это процесс перемещения между различными экранами или страницами в приложении.
Во Flutter вы можете осуществлять навигацию с помощью виджета Navigator
и маршрутов.
Каждый экран представлен в виде отдельного виджета, и вы можете перемещать виджеты в стек навигации и из него для навигации по приложению.
Реализация базовой навигации:
Начнем с наиболее распространенной формы навигации: навигации между двумя экранами.
Сначала создайте два отдельных виджета, каждый из которых представляет собой экран. Например, мы создадим виджеты Screen1
и Screen2
.
import 'package:flutter/material.dart'; class Screen1 extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Screen 1')), body: Center( child: ElevatedButton( onPressed: () { // Navigate to Screen2 when the button is tapped Navigator.push( context, MaterialPageRoute(builder: (context) => Screen2()), ); }, child: Text('Go to Screen 2'), ), ), ); } } class Screen2 extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Screen 2')), body: Center( child: ElevatedButton( onPressed: () { // Navigate back to Screen1 when the button is tapped Navigator.pop(context); }, child: Text('Go back to Screen 1'), ), ), ); } }
В приведенном выше коде Screen1
и Screen2
— это два отдельных виджета, каждый из которых представляет экран.
При нажатии кнопки на Screen1
мы используем Navigator.push
для перехода к Screen2
.
Когда кнопка нажата на Screen2
, мы используем Navigator.pop
, чтобы вернуться к Screen1
.
Отправка данных между экранами:
Часто вам нужно будет передавать данные с одного экрана на другой во время навигации.
Flutter позволяет передавать данные с помощью конструктора экрана назначения. Давайте изменим наш пример, чтобы отправлять данные с Screen1
на Screen2
:
import 'package:flutter/material.dart'; class Screen1 extends StatelessWidget { final String message; Screen1({required this.message}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Screen 1')), body: Center( child: ElevatedButton( onPressed: () { // Navigate to Screen2 with data when the button is tapped Navigator.push( context, MaterialPageRoute( builder: (context) => Screen2(message: 'Hello from Screen 1!'), ), ); }, child: Text('Go to Screen 2'), ), ), ); } } class Screen2 extends StatelessWidget { final String message; Screen2({required this.message}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Screen 2')), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('Received Message: $message'), ElevatedButton( onPressed: () { // Navigate back to Screen1 when the button is tapped Navigator.pop(context); }, child: Text('Go back to Screen 1'), ), ], ), ), ); } }
В измененном коде мы добавили параметр message
к виджетам Screen1
и Screen2
.
При переходе от Screen1
к Screen2
мы передаем сообщение "Привет с экрана 1!"к Screen2
.
Screen2
мы отображаем полученное сообщение в виджете Text
.
Заключение:
Поздравляем! Вы изучили основы навигации и отправки данных между экранами во Flutter.
Теперь вы можете перемещаться между экранами с помощью виджета Navigator
и передавать данные между экранами.
Продолжая свое путешествие по Flutter, практикуйтесь в создании сложных приложений и изучайте более продвинутые методы навигации и решения для управления состоянием.