Оценок пока нет Переход на новый экран и обратно

Большинство приложений содержат несколько экранов для отображения различных типов информации. Например, приложение может иметь экран, на котором отображаются продукты. Когда пользователь нажимает на изображение продукта, на новом экране отображаются сведения о продукте.

Терминология: во Flutter экраны и страницы называются маршрутами. Остальная часть этой статьи относится к маршрутам.

В Android маршрут эквивалентен действию. В iOS маршрут эквивалентен ViewController. Во Flutter маршрут — это просто виджет.

Переход к новому маршруту осуществляется с помощью навигатора Navigator.

Следующая работа над кодом покажет нам, как перемещаться между двумя маршрутами, используя следующие шаги:

  1. Создадим два маршрута.
  2. Перейдем ко второму маршруту, используя Navigator.push().
  3. Вернемся к первому маршруту, используя Navigator.pop().

1. Создаем два маршрута

Сначала создайте два маршрута для работы. Поскольку это базовый пример, каждый маршрут содержит только одну кнопку. Нажатие кнопки на первом маршруте позволяет перейти ко второму маршруту. Нажатие кнопки на втором маршруте возвращает к первому маршруту.

Сначала настройте визуальную структуру:

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open route'),
          onPressed: () {
            // Navigate to second route when tapped.
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            // Navigate back to first route when tapped.
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

2. Перейдем ко второму маршруту, используя Navigator.push().

Чтобы переключиться на новый маршрут, используйте метод Navigator.push(). Метод push() добавляет маршрут Route в стек маршрутов, управляемых навигатором. Откуда берется маршрут Route? Вы можете создать свой собственный или использовать MaterialPageRoute, который полезен, потому что он переходит на новый маршрут, используя анимацию для конкретной платформы.

В методе build() виджета FirstRoute обновите обратный вызов onPressed():

// Within the `FirstRoute` widget
onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );
}

3. Возврат к первому маршруту, используя Navigator.pop ().

Как закрыть второй маршрут и вернуться на первый? Используя метод Navigator.pop(). Метод pop() удаляет текущий маршрут Route из стека маршрутов, управляемых навигатором.

Чтобы реализовать возврат к исходному маршруту, обновите обратный вызов onPressed() в виджете SecondRoute:

// Within the SecondRoute widget
onPressed: () {
  Navigator.pop(context);
}

Полный пример

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: FirstRoute(),
  ));
}

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open route'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondRoute()),
            );
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}
Визуальный результат тестирования

Данная статься является переводом официальной статьи по ссылке Navigate to a new screen and back

Пожалуйста, оцените материал

WebSofter

Web - технологии