DevGang
Авторизоваться

Упростите приложение Flutter с помощью Provider 

Возможно, вам известно о виджетах с сохранением состояния и без состояния, но что, если вы хотите обмениваться данными между несколькими различными виджетами в своем приложении? Вы можете передавать данные между виджетами, но если вы создаете что-то отзывчивое, которое, например, будет меняться в зависимости от размера экрана, вам может потребоваться по-разному структурировать пользовательский интерфейс в зависимости от размера экрана или поворота. Становится действительно сложно управлять состоянием вашего приложения, передавая эти данные в и из ваших виджетов. Вместо этого я предлагаю вам подумать о включении системы менеджера состояний!

И вообще, что такое менеджер состояний?

Управление состоянием - это процесс хранения и обмена данными между различными компонентами. Это позволяет вам хранить данные, относящиеся к состоянию вашего приложения, и извлекать эти данные из любого другого места без необходимости передавать их! Можно сказать, это помогает вам управлять своим состоянием!

Хорошо, а что такое Провайдер?

Провайдер - это пакет, который помогает с управлением состоянием! Короче говоря, он вставляет виджет в ваше дерево виджетов, в котором хранятся значения состояния вашего приложения. Из-за этого любые дочерние элементы этого виджета Provider могут получить доступ к этому состоянию, потому что оно существует в том же дереве виджетов!

Как мне начать работать с Провайдером?

Как и в случае с любым другим пакетом, перед продолжением рекомендуется прочитать документацию по pub.dev. Вот ссылка на провайдера:

Итак, вы читали документацию?

Теперь мы можем импортировать его в наш проект, просто включив его в свой файл pubspec.yaml:

dependencies:
  provider: ^5.0.0

Теперь, когда вы импортировали пакет, нам нужно начать его использовать. Чтобы создать поставщик в дереве виджетов, вам необходимо сначала определить лучшее место в дереве виджетов (часто прямо на верхнем уровне для небольших проектов), а затем создать виджет поставщика. Вот пример, когда я решил обернуть все свое приложение в Провайдера, который я назвал MyProvider

void main() {
  runApp(ChangeNotifierProvider(
    create: (_) => MyProvider(),
     child: MyApp()));
}

class MyProvider extends ChangeNotifier {
  int counter = 0;

  void increment() {
    counter++;
    notifyListeners();
  }

  void decrement() {
    counter--;
    notifyListeners();
  }
}

Итак, как мы можем получить к нему доступ и обновить его?

Это просто! Есть несколько разных способов взаимодействия с вашим провайдером. Если вы пытаетесь получить доступ или изменить состояние извне с помощью метода StatelessWidget.build или State.build, вы должны получить к нему доступ следующим образом:

Provider.of<MyProvider>(context).increment();

Если вы пытаетесь получить доступ к состоянию в функции сборки, вы можете использовать этот пример:

context.watch<MyProvider>().counter;

В этих двух функциях есть что-то действительно интересное. Они вызовут обновление пользовательского интерфейса! Вызывая notifyListeners() в конце функций увеличения и уменьшения, мы сообщаем пользовательскому интерфейсу, что его состояние изменилось и его следует перестроить!

Есть еще несколько способов чтения состояния от провайдера, которые я хотел бы затронуть:

context.select((MyProvider myProvider) => myProvider.counter);

Функциональность Provider Select / Selector действительно мощная! Это заставляет ваш виджет следить только за изменениями определенного члена состояния, а не всего объекта состояния. Это становится действительно полезным, если у вас есть несколько разных переменных, в которых вы пытаетесь сохранить состояние, но вы хотите, чтобы ваш виджет заботился только об одной из них!

Selector<MyProvider, int>(
        builder: (context, data, child) {
          return Text("$data");
        },
        selector: (_, myProvider) => myProvider.counter,
      ),

Верно! Если вы создаете это непосредственно в функции сборки и у вас есть виджеты, зависящие от этих данных, вы можете создать соответствующие виджеты, которые эквивалентны приведенным выше операторам контекста! В данном случае я решил сделать пример виджета «Селектор».

Наконец, если вы отлаживаете, вы можете увидеть значения всех ваших провайдеров в Flutter DevTools!

Я также хочу упомянуть, что есть более новый пакет управления состоянием под названием Riverpod. Многие считают его «Провайдером 2.0» и предлагают несколько потрясающих улучшений. Я скоро напишу о Riverpod!

#Flutter
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Поделитесь своим опытом, расскажите о новом инструменте, библиотеке или фреймворке. Для этого не обязательно становится постоянным автором.

Попробовать

В подарок 100$ на счет при регистрации

Получить