flutter riverpod 状态管理计数案例

ShenSJay

已于 2022-07-21 16:16:50 修改

阅读量495

点赞数

分类专栏： Flutter 文章标签： flutter

于 2022-07-21 16:15:40 首次发布

本文链接：https://blog.csdn.net/qq_32234855/article/details/125914420

版权

Flutter 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

运行效果
官网
官网首页的用例代码
包引用
在这里插入图片描述

1 创建监听对象，继承自 StateNotifier，初始状态为0，提供加一减一方法

class CounterNotifier extends StateNotifier<int> {
  CounterNotifier() : super(0);
  void increment() => state = state + 1;
  void decrement() => state = state - 1;
}

2 创建生产者常量对象，跟着官网写

final counterProvider = StateNotifierProvider.autoDispose<CounterNotifier, int>(
      (ref) => CounterNotifier(),
);

3 创建消费者组件，继承自ConsumerWidget组件，通过ConsumerWidget组件的watch和read方法获取或者更新状态
消费者组件代码
4 完整代码

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

void main() {
  runApp(
    const ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const CounterPage(),
    );
  }
}

class CounterNotifier extends StateNotifier<int> {
  CounterNotifier() : super(0);
  void increment() => state = state + 1;
  void decrement() => state = state - 1;
}

final counterProvider = StateNotifierProvider.autoDispose<CounterNotifier, int>(
      (ref) => CounterNotifier(),
);

class CounterPage extends ConsumerWidget {
  const CounterPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context,WidgetRef ref) {
    final counter = ref.watch(counterProvider);
    return Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("$counter",style: Theme.of(context).textTheme.headline4)
            ],
          ),
        ),
        persistentFooterButtons:[
          FloatingActionButton(
            onPressed: () {
              ref.read(counterProvider.notifier).increment();
            },
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ),
          FloatingActionButton(
            onPressed: () {
              ref.read(counterProvider.notifier).decrement();
            },
            tooltip: 'decrement',
            child: const Icon(Icons.minimize),
          )
        ]
    );
  }
}