颜色 BLoC 练习

screenshot

视频教程

用于重复

创建新的 Bloc 项目

  1. 新项目：创建新项目，添加 flutter_bloc，equatable
  2. Flutter 颜色容器：删除 runApp 下方的所有代码，创建一个新的 StatelessWidget，其中 MaterialApp 被 Container 包裹，并带有 FloatingActionButton
  3. Bloc 模板文件：使用 `lib/blocs/color/` 中的扩展名创建 event、state、bloc 文件
  4. BlocProvider：包裹 MaterialApp
  5. BlocBuilder：包裹 Container

配置 State、Event、Bloc 文件

  1. state：删除代码。创建新的 ColorState 类，它继承自 Equatable。创建一个 final Color color。导入 material
    1. 构造函数 - 改为 required
    2. equatable
    3. toString
    4. copyWith
    5. factory – ColorState.initial 返回 pink
  2. event：添加 ChangeColorEvent
  3. bloc
    1. ColorState.initial()
    2. ChangeColorEvent – 发出 ColorState amber

在 UI 上显示 Bloc 信息

  1. 将颜色设置为 Bloc state 的容器

从按钮更改 Bloc 状态

  1. 从 FloatingActionButton 向 Bloc 流添加新状态

修改 Bloc 以发出随机颜色

  1. 将回调函数组织到单独的方法中
  2. 发出随机颜色

GitHub

查看 Github