Управление состоянием 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(),
),
);
}
}
Вот и все, наслаждайтесь