Flutter — переход от одного экрана к другому
Приложения Flutter могут иметь несколько экранов или страниц. Страницы — это группы функций. Пользователь перемещается между разными страницами, чтобы использовать разные функции. Такие понятия, как страницы, называются маршрутами во Flutter. Мы можем использовать Navigator.push() для перехода к новому маршруту и Navigator.pop() для перехода к предыдущему маршруту. Маршруты управляются Navigatorwidget. Навигатор управляет стеком маршрутов. Маршруты могут быть помещены в стек с помощью метода push() и извлечены из стека с помощью метода pop(). Верхний элемент в стеке — это текущий активный маршрут. Navigator — это виджет с состоянием, состоянием которого является NavigatorState. В этой статье мы увидим, как переходить с одного экрана на другой во Flutter.
Как использовать:
Класс Navigator имеет метод push для перехода к следующему экрану.
Navigator.push(context,MaterialPageRoute(builder: (context) =>NextPage()));
Пример видео приведен ниже, чтобы получить представление о том, что мы собираемся делать в этой статье.
Пошаговая реализация
Шаг 1. Создайте новый проект в Android Studio.
Чтобы настроить Flutter Development в Android Studio, обратитесь к разделу «Настройка Android Studio для разработки Flutter», а затем создайте новый проект в Android Studio, пожалуйста, обратитесь к разделу «Создание простого приложения во Flutter».
Шаг 2: Импорт пакета материалов
Добавление пакета материалов, который дает нам важные функции и вызывает метод runApp в основной функции, которая будет вызывать наше приложение.
import "package:flutter/material.dart";
void main() {
runApp(RunMyApp(home: RunMyApp(),debugShowCheckedModeBanner: false,
theme: ThemeData(primarySwatch: Colors.green),)
));
}Шаг 3: Создайте первый экран или главный экран RunMyApp
Dart
class RunMyApp extends StatelessWidget { RunMyApp({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Home Page"), ), body: Center( child: ElevatedButton( onPressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) => NextPage())); }, child: Text("Goto Next Page")), ), ); }} |
Создал класс без сохранения состояния, потому что нет никаких изменений, которые возвращают каркас, который позволяет нам установить AppBar и тело. Тело содержит виджет Center с кнопкой Elevated Button , которая также имеет свойство onPressed . Класс Navigator имеет метод push для перехода к следующему экрану.
Шаг 4: Создайте второй экран или NextPage
Dart
class NextPage extends StatelessWidget { const NextPage({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("Next Page"),), body: Center( child: Text("GeeksForGeeks"), ), ); }} |
Экран NextPage содержит Scaffold , который позволяет нам установить AppBar и body . Тело содержит центральный виджет, дочерним элементом которого является текст.
Окончательный код
Dart
import "package:flutter/material.dart"; void main() { runApp(MaterialApp(home: RunMyApp(),debugShowCheckedModeBanner: false, theme: ThemeData(primarySwatch: Colors.green),));} class RunMyApp extends StatelessWidget { RunMyApp({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Home Page"), ), body: Center( child: ElevatedButton( onPressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) => NextPage())); }, child: Text("Goto Next Page")), ), ); }} class NextPage extends StatelessWidget { const NextPage({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("Next Page"),), body: Center( child: Text("GeeksForGeeks"), ), ); }} |
Выход: