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

Введение:

Добро пожаловать обратно в нашу серию 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, практикуйтесь в создании сложных приложений и изучайте более продвинутые методы навигации и решения для управления состоянием.