🧩Navigator

Что такое Navigator

Navigator в Flutter — это виджет, который управляет стеками маршрутов (или страниц) в вашем приложении. Он позволяет вам переходить между различными экранами, а также управлять тем, какие экраны видны и как происходит навигация. Navigator поддерживает управление стеком, что означает, что вы можете возвращаться на предыдущие экраны, аналогично тому, как работает навигация в мобильных приложениях.

Основные функции Navigator

  1. Переход между экранами: Navigator позволяет перемещаться от одного экрана к другому с помощью метода push.

  2. Возврат на предыдущий экран: Вы можете вернуться на предыдущий экран с помощью метода pop.

  3. Управление маршрутом: Вы можете создавать, удалять и изменять маршруты в стеке.

Пример использования

Вот простой пример использования Navigator для перехода между двумя экранами:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Первый экран'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Переход на второй экран
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: Text('Перейти на второй экран'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Второй экран'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Возврат на первый экран
            Navigator.pop(context);
          },
          child: Text('Назад на первый экран'),
        ),
      ),
    );
  }
}

Как работает код

  1. MaterialApp: Создает приложение с темой Material.

  2. FirstScreen: Первый экран приложения, содержащий кнопку для перехода на второй экран.

  3. Navigator.push: Используется для перехода на новый экран, создаваемый с помощью MaterialPageRoute.

  4. SecondScreen: Второй экран, содержащий кнопку для возврата на первый экран с помощью Navigator.pop.

Основные методы Navigator

  1. Navigator.push(BuildContext context, Route<T> route)

    • Описание: Добавляет новый маршрут на стек.

    • Пример:

      Navigator.push(context, MaterialPageRoute(builder: (context) => NewScreen()));
  2. Navigator.pop(BuildContext context, [T? result])

    • Описание: Убирает текущий маршрут из стека и возвращает на предыдущий экран.

    • Пример:

      Navigator.pop(context);
  3. Navigator.pushReplacement(BuildContext context, Route<T> newRoute)

    • Описание: Заменяет текущий маршрут новым, убирая его из стека.

    • Пример:

      Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => NewScreen()));
  4. Navigator.popUntil(BuildContext context, RoutePredicate predicate)

    • Описание: Убирает маршруты из стека, пока не останется маршрут, который соответствует предикату.

    • Пример:

      Navigator.popUntil(context, ModalRoute.withName('/'));
  5. Navigator.canPop(BuildContext context)

    • Описание: Проверяет, может ли текущий Navigator вернуться на предыдущий маршрут.

    • Пример:

      if (Navigator.canPop(context)) {
        Navigator.pop(context);
      }
  6. Navigator.of(BuildContext context)

    • Описание: Получает текущий Navigator для указанного контекста.

    • Пример:

      final navigator = Navigator.of(context);

Заключение

Navigator — это важный компонент в Flutter, который управляет переходами между экранами и упрощает управление маршрутами в приложении. Используя Navigator, вы можете легко создавать сложные навигационные сценарии и управлять пользовательским интерфейсом вашего приложения.

Last updated