使用Riverpod在Flutter中创建Todo列表

简介: 学习如何使用Riverpod在Flutter中构建一个功能完整的Todo列表应用。通过Consumer组件、ConsumerStatefulWidget类、ref.read方法和provider build重写,了解Riverpod的状态管理和更新状态机制。

使用Riverpod在Flutter中创建Todo列表

视频

https://www.bilibili.com/video/BV1jj42197c8/

前言

原文 https://ducafecat.com/blog/flutter-todo-list-with-riverpod-guide-02

riverpod todo manage

学习如何使用Riverpod在Flutter中构建一个功能完整的Todo列表应用。通过Consumer组件、ConsumerStatefulWidget类、ref.read方法和provider build重写,了解Riverpod的状态管理和更新状态机制。

参考

https://pub.dev/packages/riverpod

https://riverpod.dev/

https://flutter.ducafecat.com/

知识点

  1. Consumer 组件:
    Consumer组件是Riverpod提供的用于订阅和监听Provider数据变化的组件。它接收一个或多个Provider,并在数据发生变化时重新构建其子组件。
  2. ConsumerStatefulWidget 类:
    ConsumerStatefulWidget是一个抽象类,继承自StatefulWidget。通过继承ConsumerStatefulWidget类并实现其createState方法,可以创建一个具有可变状态和自动重建机制的组件。
  3. ref.read 方法:
    ref.read方法用于从ProviderContainer中获取Provider的值,而无需订阅或监听它。它适用于在不需要实时更新的情况下获取Provider的当前值。
  4. provider build 重写:
    通过重写Provider的build方法,可以在Provider的值发生变化时重新构建其依赖项。这使得我们可以控制在数据变化时如何更新UI。
  5. update state 更新状态:
    在Riverpod中,状态更新是通过修改可变的Provider值或使用 invalidateSelf 来完成,触发UI的重建。

步骤

实例对象 TodoEntity

lib/entity/todo.dart

class TodoEntity {
   
   
  final int? id;
  final String? title;
  final String? description;
  final bool? completed;

  TodoEntity({
   
   this.id, this.title, this.description, this.completed});

  Map<String, dynamic> toMap() {
   
   
    return {
   
   
      'id': id,
      'title': title,
      'description': description,
      'completed': completed,
    };
  }

  static TodoEntity fromMap(Map<String, dynamic> map) {
   
   
    return TodoEntity(
      id: map['id'],
      title: map['title'],
      description: map['description'],
      completed: map['completed'],
    );
  }
}

实现 todo provider

lib/provider/todo_list.dart

定义 TodoList provider 类,todo 数据集合

part 'todo_list.g.dart';


class TodoList extends _$TodoList {
   
   
  static List<TodoEntity> items = [];

  
  Future<List<TodoEntity>> build() async {
   
   
    return items;
  }

  ...

实现新增 add 功能

  Future<void> addTodo(TodoEntity todo) async {
   
   
    // await http.post(
    //   Uri.https('your_api.com', '/todos'),
    //   // 我们序列化 Todo 对象并将其 POST 到服务器。
    //   headers: {'Content-Type': 'application/json'},
    //   body: jsonEncode(todo.toJson()),
    // );

    // 延迟 1 秒
    await Future.delayed(const Duration(seconds: 1));

    // 我们将新的 Todo 添加到 items 列表中。
    items.add(todo);
  }

Consumer 新增 todo 按钮栏

lib/pages/todo/widgets/bar.dart

TodoBarWidget 类

class TodoBarWidget extends StatelessWidget {
   
   
  const TodoBarWidget({
   
   super.key});

Consumer 方式实现关联 riverpod

  Widget _buildView() {
   
   
    // Consumer 提供监听功能的小部件
    return Consumer(builder: (
      BuildContext context,
      WidgetRef ref,
      Widget? widget,
    ) {
   
   
      return Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: () {
   
   
              // 事件处理用 read 方式读取 provider
              ref.read(todoListProvider.notifier).addTodo(
                    TodoEntity(
                      description: 'This is a new todo',
                    ),
                  );
            },
            child: const Text('Add todo'),
          ),
        ],
      );
    });
  }

注意使用 ref.read,虽然 ref.watch 也能用

  
  Widget build(BuildContext context) {
   
   
    return _buildView();
  }

状态更新两种方式

lib/provider/todo_list.dart

直接设置新状态值

  Future<void> addTodo(TodoEntity todo) async {
   
   
    ...

    // 直接设置 state 值
    state = AsyncData(items);
  }

将本地缓存标记为脏

  Future<void> addTodo(TodoEntity todo) async {
   
   
    ...

    // 将本地缓存标记为脏
    ref.invalidateSelf();
    // 重新构建 TodoList, 呼叫 build 方法
    await future;
  }

ConsumerWidget 监听 todo 列表

lib/pages/todo/widgets/list.dart

TodoListWidget 类 继承 ConsumerWidget

class TodoListWidget extends ConsumerWidget {
   
   
  const TodoListWidget({
   
   super.key});

监听 todo 列表

  Widget _buildList(ref) {
   
   
    var todos = ref.watch(todoListProvider);
    return switch (todos) {
   
   
      AsyncData<List<TodoEntity>>(:final value) => ListView.builder(
          itemCount: value.length,
          itemBuilder: (context, index) {
   
   
            return ListTile(
              title: Text(value[index].description ?? ""),
              subtitle: Text((value[index].completed ?? false) ? "yes" : "no"),
            );
          },
        ),
      AsyncError() => const Text('Oops, something unexpected happened'),
      _ => const CircularProgressIndicator(),
    };
  }
  
  Widget build(BuildContext context, WidgetRef ref) {
   
   
    return _buildList(ref);
  }

build 回调会有一个 ref 对象,直接传入 _buildList 使用

todo 主界面实现

lib/pages/todo/index.dart

TodoPage 类,使用 StatelessWidget 就行

class TodoPage extends StatelessWidget {
   
   
  const TodoPage({
   
   super.key});

界面 build

  Widget _buildView(BuildContext context) {
   
   
    return const Center(
      child: Column(
        children: <Widget>[
          // StatelessWidget 的组件
          TodoBarWidget(),

          // StatefulWidget 的组件
          // TodoBarStfWidget(),

          // ConsumerWidget 的列表
          Expanded(
            child: TodoListWidget(),
          ),
        ],
      ),
    );
  }
  
  Widget build(BuildContext context) {
   
   
    return Scaffold(
      appBar: AppBar(title: const Text('Todo List')),
      body: _buildView(context),
    );
  }

加入启动菜单

lib/pages/index.dart

  Widget _buildView(BuildContext context) {
   
   
    return Center(
      ...

          _buildBtn(context, '03 TODO 列表', const TodoPage()),
        ],
      ),
    );
  }

ConsumerStatefulWidget 界面 UI 交互

编写 TodoBarStfWidget 继承 ConsumerStatefulWidget

可以用插件 Flutter Riverpod Snippets 简化输入代码块

https://marketplace.visualstudio.com/items?itemName=robert-brunhage.flutter-riverpod-snippets

class TodoBarStfWidget extends ConsumerStatefulWidget {
   
   
  const TodoBarStfWidget({
   
   super.key});

  
  ConsumerState<ConsumerStatefulWidget> createState() =>
      _TodoBarStfWidgetState();
}

class _TodoBarStfWidgetState extends ConsumerState<TodoBarStfWidget> {
   
   

定义 Future 状态对象监听变化

  // 待处理的 addTodo 操作。如果没有待处理的,则为 null。
  Future<void>? _pendingAddTodo;

通过 FutureBuilder 更新 UI


  Widget _buildView() {
   
   
    return FutureBuilder(
      // 我们监听待处理的操作,以相应地更新 UI。
      future: _pendingAddTodo,
      builder: (context, snapshot) {
   
   
        // 计算是否存在错误状态。
        // 检查 connectionState 用于在重试操作时进行处理。
        // 是否错误
        final isErrored = snapshot.hasError &&
            snapshot.connectionState != ConnectionState.waiting;
        // 是否等待
        final isWaiting = snapshot.connectionState == ConnectionState.waiting;

        return Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 按钮
            ElevatedButton(
              style: ButtonStyle(
                // 如果出现错误,我们会将该按钮显示为红色
                backgroundColor: MaterialStateProperty.all(
                  isErrored ? Colors.red : null,
                ),
              ),
              // 设置 null 后按钮灰色禁止点击
              onPressed: isWaiting == true
                  ? null
                  : () {
   
   
                      // 我们将 addTodo 返回的 future 保存在变量中
                      final future = ref
                          .read(todoListProvider.notifier)
                          .addTodo(
                              TodoEntity(description: 'This is a new todo'));

                      // 我们将这个 future 存储在本地的状态中
                      setState(() {
   
   
                        _pendingAddTodo = future;
                      });
                    },
              child: const Text('Add todo V2'),
            ),

            // 操作正在等待,让我们显示一个进度指示器
            if (isWaiting) ...[
              const SizedBox(width: 8),
              const CircularProgressIndicator(),
            ]
          ],
        );
      },
    );
  }
  
  Widget build(BuildContext context) {
   
   
    return _buildView();
  }

代码

https://github.com/ducafecat/flutter_develop_tips/tree/main/flutter_application_riverpod

小结

本文介绍了如何使用Riverpod在Flutter中实现一个Todo列表功能。通过Consumer组件和ConsumerStatefulWidget类,我们可以订阅和监听数据变化,并在需要时更新UI。使用ref.read方法可以获取Provider的值,从而实现数据的读取和操作。通过provider build重写,我们可以在数据变化时重新构建UI。这篇文章帮助读者更深入地了解了如何使用Riverpod进行状态管理,并实现了一个基本的Todo列表应用。

感谢阅读本文

如果有什么建议,请在评论中让我知道。我很乐意改进。


© 猫哥
ducafecat.com

end

相关文章
|
7月前
|
Dart
带你读《深入浅出Dart》三十、Flutter实战之TODO应用(1)
带你读《深入浅出Dart》三十、Flutter实战之TODO应用(1)
|
7月前
|
Dart
带你读《深入浅出Dart》三十、Flutter实战之TODO应用(2)
带你读《深入浅出Dart》三十、Flutter实战之TODO应用(2)
|
7天前
|
存储 缓存 监控
【Flutter前端技术开发专栏】Flutter中的列表滚动性能优化
【4月更文挑战第30天】本文探讨了Flutter中优化列表滚动性能的策略。建议使用`ListView.builder`以节省内存,避免一次性渲染所有列表项。为防止列表项重建,可使用`UniqueKey`或`ObjectKey`。缓存已渲染项、减少不必要的重绘和异步加载大数据集也是关键。此外,选择轻量级组件,如`StatelessWidget`,并利用Flutter DevTools监控性能以识别和解决瓶颈。持续测试和调整以提升用户体验。
【Flutter前端技术开发专栏】Flutter中的列表滚动性能优化
|
7天前
|
前端开发 数据处理
【Flutter 前端技术开发专栏】Flutter 中的滚动性能优化与无限列表实现
【4月更文挑战第30天】本文探讨了 Flutter 中的滚动性能优化和无限列表实现。关键点包括:1) 滚动性能直接影响用户满意度,优化可提升响应速度;2) 影响因素有布局复杂度、频繁重绘和数据处理;3) 优化措施包括懒加载、简化布局、减少不必要的重绘和高效处理数据;4) 无限列表通过监听滚动位置,动态加载新数据;5) 实现时注意加载策略、数据处理效率和内存管理。案例分析和总结强调了优化在实际开发中的重要性。
【Flutter 前端技术开发专栏】Flutter 中的滚动性能优化与无限列表实现
|
7天前
|
前端开发 UED 开发者
【Flutter前端技术开发专栏】Flutter中的列表与滚动视图优化
【4月更文挑战第30天】Flutter开发中,优化列表和滚动视图至关重要。本文介绍了几种优化方法:1) 使用`ListView.builder`和`GridView.builder`实现懒加载;2) 复用子组件以减少实例创建;3) 利用`CustomScrollView`和`Slivers`提升滚动性能;4) 通过`NotificationListener`监听滚动事件;5) 使用`KeepAlive`保持列表项状态。掌握这些技巧能提升应用性能和用户体验。
【Flutter前端技术开发专栏】Flutter中的列表与滚动视图优化
|
7月前
|
Dart
带你读《深入浅出Dart》三十、Flutter实战之TODO应用(3)
带你读《深入浅出Dart》三十、Flutter实战之TODO应用(3)
|
10月前
|
Dart
《深入浅出Dart》Flutter实战之TODO应用
Flutter实战之TODO应用 在本篇文章中,我们将构建一个TODO应用,使用最新的Dart语法和Flutter框架。这个TODO应用将具备添加、编辑、删除任务,以及任务的状态管理等功能。让我们一步一步地构建这个TODO应用。 步骤 1:创建Flutter项目 首先,我们需要创建一个Flutter项目。打开终端并执行以下命令:
113 0
|
11月前
|
Android开发
Flutter一天一控件之ListTile(列表的实现)
Flutter一天一控件之ListTile(列表的实现)
|
iOS开发 容器
重识Flutter 在不同的滑动列表场景,请选择合适的Slivers - part2
在Flutter中,碰到复杂的、不同的滑动业务场景,若是选择了一个合适的Slivers组件,那么我认为问题会变得简单!
重识Flutter 在不同的滑动列表场景,请选择合适的Slivers - part2
|
测试技术 容器
Flutter Web网站之Markdown展示与博客列表
Flutter Web网站之Markdown展示与博客列表
187 0
Flutter Web网站之Markdown展示与博客列表