Приветствуем Flutter с Riverpod 1.0.0!

Управление состояниями во Flutter — это важная тема, которую нельзя упускать из виду. Очевидно, что вы не можете просто использовать set state(); во всем проекте, состоящем из 3000 строк кода в 20 различных файлах! Во Flutter существует множество подходов, которые вы можете использовать для управления состоянием и для инъекции зависимостей.

Некоторые из дарттастических подходов к управлению состоянием следующие:

  1. BLoC
  2. Riverpod
  3. GetXИ многие другие…

Примечание: я не включаю Provider, так как Riverpod является лучшей версией Provider.

Итак, теперь давайте разберемся в Riverpod.

Как я уже говорил, Riverpod — это улучшенная версия Providers, и поэтому Providers играет важную роль в Riverpod.
Что же такое Провайдеры…

final thisIsProvider = Provider((ref) {
  return MyValue();
}); 
Вход в полноэкранный режим Выход из полноэкранного режима

финал thisIsProvider — это объявление переменной. Provider(); происходит из класса Riverpod. MyValue() относится к объекту, который возвращает наш Провайдер. Это может быть string, int или любой другой тип данных.

Для более наглядного понимания на реальных примерах кода давайте научимся импортировать riverpod.

Установка Riverpod

Существует 3 типа riverpod

Для этого блога мы будем использовать flutter_riverpod.

В pubspec.yaml в разделе dependencies добавьте flutter_riverpod.

dependencies:
  flutter_riverpod:
Вход в полноэкранный режим Выйти из полноэкранного режима

Оберните корень дерева виджетов (класс MyApp()) с помощью ProviderScope()

void main() {
  runApp(
    //Right Here👇
    ProviderScope(
      child: MyApp(),
    ),
  );
}
Войдите в полноэкранный режим Выйти из полноэкранного режима

И не забудьте импортировать riverpod в свои .dart файлы

import 'package:flutter_riverpod/flutter_riverpod.dart';
Войти в полноэкранный режим Выйти из полноэкранного режима

Давайте теперь поиграем с riverpod

Итак… после всего этого, давайте действительно используем riverpod с помощью базового Provider().

Скопируйте следующий код

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(
//Don't forget to wrap MyApp() with ProviderScope()
    const ProviderScope(child: MyApp()),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Home());
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Riverpod')),
      body: Center(
        child: 
          return Text('Riverpod says Hello');
      ),
    );
  }
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Код не требует пояснений для любого разработчика с базовыми знаниями flutter с изменениями, которые мы обсуждали ранее при установке riverpod. Теперь мы будем использовать провайдер riverpod для отображения текста в Text() в Center() из Scaffold().

  1. Измените StatelessWidget() на ConsumerWidget()
class Home extends ConsumerWidget {
...
}
Войдите в полноэкранный режим Выйти из полноэкранного режима
  1. Передайте другой объект с именем WidgetRef ref в метод build() метода ConsumerWidget()
class Home extends ConsumerWidget {
  @override
 Widget build(BuildContext context, WidgetRef ref) {
...
}
Вход в полноэкранный режим Выход из полноэкранного режима
  1. Теперь давайте создадим Provider(), самый простой из всех.
void main() {
  runApp(
//Don't forget to wrap MyApp() with ProviderScope()
    const ProviderScope(child: MyApp()),
  );
}
//Right Here😉
final helloTextProvider = Provider((ref) {
  return "Hello Riverpod";
}); 
class Home extends ConsumerWidget {
  @override
 Widget build(BuildContext context, WidgetRef ref) {
...
}
Вход в полноэкранный режим Выход из полноэкранного режима
  1. Давайте watch() наш helloTextProvider()
class Home extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(title: const Text('Riverpod')),
      body: Center(
        child: 
//Over here Brother and Sisters😊,
          return Text(ref.watch(helloTextProvider()));
      ),
    );
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Заключительный код

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(
//Don't forget to wrap MyApp() with ProviderScope()
    const ProviderScope(child: MyApp()),
  );
}

//Right Here😉
final helloTextProvider = Provider((ref) {
  return "Hello Riverpod";
}); 

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Home());
  }
}

class Home extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(title: const Text('Riverpod')),
      body: Center(
        child: 
          //Over here Brother and Sisters😊,
          return Text(ref.watch(helloTextProvider()));
      ),
    );
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

И поздравляю🎉🎉, вы сделали свое первое приложение Riverpod (если оно работает успешно🤭😉) .

В моем следующем блоге мы научимся использовать StateProvider(), где вы действительно узнаете преимущества flutter_riverpod.
До этого Oh Boy! вам всем нужно подождать!

Первоначально опубликовано на Hashnode 29 декабря 2020 года

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *