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

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

Вот различные способы поддержания состояния во флаттере:

Модель с заданным объемом
БЛОК
Редукс
МобХ

Флаттер провайдер с примером:

Система внедрения зависимостей, построенная с помощью виджетов для виджетов. provider в основном является синтаксическим сахаром для InheritedWidget, чтобы упростить общие варианты использования.

Давайте пройдемся по самым популярным ‘Виджет счетчика‘:

Добавьте это в файл pubspec.yaml вашего пакета:
зависимости:
провайдер: ^2.0.0+1

1. Создайте свой модельный класс.

import 'package:flutter/cupertino.dart';

class CounterModel with ChangeNotifier {
  int _counter = 0;

  getCounter() => _counter;

  setCounter(int counter) => _counter = counter;

  void incrementCounter() {
    _counter++;
    notifyListeners();
  }

  void decrementCounter() {
    _counter--;
    notifyListeners();
  }
}

2. Создайте свой виджет.
Здесь ваш виджет «StatelessWidget».

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

import 'counter_model.dart';

class CounterView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterModel = Provider.of<CounterModel>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Provider Demo'),
      ),
      body: Center(
        child: Text(
          'Counter Value is: ${counterModel.getCounter()}',
          style: TextStyle(fontSize: 24.0),
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () => counterModel.incrementCounter(),
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
          SizedBox(width: 30),
          FloatingActionButton(
            onPressed: () => counterModel.decrementCounter(),
            tooltip: 'Decrement',
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

3.Ваш основной.дротик.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:provider_demo/counter_model.dart';
import 'package:provider_demo/counter_view.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.indigo,
      ),
      home: ChangeNotifierProvider<CounterModel>(
        builder: (_) => CounterModel(),
        child: CounterView(),
      ),
    );
  }
}

Симулятор.png

Вот и все, наслаждайтесь 😃

Похожие записи

Добавить комментарий

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