Последнее обновление:
GetX управление навигацией

GetX - легкое и удобное управление навигацией во Flatter

Flutter

Пакет GetX очень удобен и многофункционален. В нем содержится три менеджера, каждый из которых отвечает за одну из функций:

  • Управление состоянием
  • Управление маршрутами
  • Управление зависимостями

В этой статье будет рассмотрен только менеджер маршрутов.

Установка

Добавьте Get в файл pubspec.yaml:

dependencies:
  get: 3.24.0

Импортируйте в свои файлы, зависимости которые будут использоваться:

import 'package: get / get.dart';

Управление маршрутами

Одно из самых больших преимуществ использования Get - вам не нужно больше использовать контекст.

Вот посмотрите сами.

Добавьте Get перед своим MaterialApp, превратив его в GetMaterialApp.

GetMaterialApp(
  home: MyHome(),
)

Что мы делали раньше, чтобы перейти на новый экран?

Navigator.of(context).push (context, builder [...])

Get упрощает разработку. Вместо того, чтобы писать 8 строк кода для вызова маршрута, вы можете просто написать:

Get.to(NextScreen());

Вернуться к предыдущему экрану:

Get.back();

Перейти к следующему экрану без возможности вернуться к предыдущему экрану:

Get.off(NextScreen());

Перейти к следующему экрану и отменить все предыдущие маршруты:

Get.offAll(NextScreen());

Перейти к следующему маршруту и ​​получить или обновить данные, как только вы вернетесь назад:

var data = await Get.to(Payment());

Вернуть данные с текущего экрана для предыдущего маршрута:

Get.back(result: 'success');

Снэк

Раньше, чтобы создать простой SnackBar , вы должны были получить контекст Scaffold, или использовать GlobalKey, прикрепленный к вашему Scaffold:

final snackBar = SnackBar(
content: Text('Привет'),
  action: SnackBarAction(
  label: 'Я старый и ужасный SnackBar :(',
    onPressed: (){}
  ),
);
Scaffold.of(context).showSnackBar(snackBar);

С Get вам достаточно написать одну строчку:

Get.snackbar('Привет', 'Я простой и удобный snackbar');

Диалоги

Открыть диалог с помощью Get также просто:

Get.dialog(YourDialogWidget());

А так, можно создать простой диалог:

Get.defaultDialog(
  onConfirm: () => print("Ok"),
middleText: "Диалог написан тремя строчками кода"
);

BottomSheets

Get.bottomSheet делает тоже, что и showModalBottomSheet, но с Get для этого не требуется контекст, создать bottomSheet можно в любом месте:

Get.bottomSheet(
  Container(
    child: Wrap(
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.music_note),
          title: Text('Music'),
          onTap: () => {}
        ),
        ListTile(
          leading: Icon(Icons.videocam),
          title: Text('Video'),
          onTap: () => {},
        ),
      ],
    ),
  )
);

Комментарии