初学者的 Flutter bloc

Jimmy_is_jimmy

发布于 2024-05-07 09:17:00

770

发布于 2024-05-07 09:17:00

文章被收录于专栏：call_me_Rcall_me_R

原文链接：Flutter bloc for beginners - 原文作者 Ana Polo
本文采用意译的方式

Flutter Bloc 是什么？

flutter Bloc 是 Flutter 应用的其中一个状态管理。我们可以通过它很容易处理应用中所有可能的状态。

Flutter Bloc 很容易使用，因为我们和我们团队可以很快明白相关的概念，不管你是什么水平，该库有非常好的文档和很多的案例，它在 Flutter 社区中是广泛使用的那个，所以我们如果有任何问题，我们都可以在网络上通过简单的搜索找到对应的解决方案。

它很强大，因为它可以帮助你创建所有类型的应用，比如，你可以创建以学习为目的的应用，或者创建在生产环境中使用的复杂的应用，Flutter Bloc 都可以应用。

这个库另一个很重要的方面是，它可以帮助我们很容易测试 Bloc 的逻辑。

更多的内容，我们可以直接到官网上查看：bloclibrary.dev/#/gettingst…。

我们怎么开始 Flutter Bloc?

首先，我们应该通过官方文档，阅读相关的基础内容，在本文中，我们尝试解析这些基础点，如果需要深入了解，推荐去看官方文档。

它是怎么工作的？

当我们使用 Flutter Bloc，我们要在应用中创建事件触发交互，然后 Bloc 会发射 emit 请求数据，存在在 state 中，在真实的场景中，它会像这样：

用户点击按钮来获取游戏列表
事件被触发，然后它会告知 Bloc 用户想获取游戏列表
Bloc 将会请求数据（比如从一个存储库，该存储库负责连接到 API 来获取数据）
当 Bloc 有数据，它将决定数据是否成功，然后 emit 发射一个状态 state
视图 view 将监听所有 Bloc 发射 emit 成功的状态 state 并作出反应。比如，如果 Bloc 发射一个成功的状态，视图将根据返回的游戏列表重新构建，但是如果返回的状态是错误的，视图会根据错误信息或者我们要展示的其他内容来重新构建。

完美，现在，我们知道主要的概念，了解了 Flutter Bloc 是怎么工作！现在，是时候知道怎么去使用它。

假设我们想创建一个关于游戏的 Bloc 逻辑，我们需要下面三个类：

games_bloc.dart
games_state.dart
games_event.dart

正如你所看到的，我们将需要一个 bloc, 一个 state 和一个 event 类。在每个类中，我们将管理所需的信息，别担心，我们将会讲解它们，但是现在，我们先解析关于 bloc 挂件的基本概念。

Bloc Widgets

这个库提供了我们需要掌握所有可能类型的挂件，比如，添加一个事件，监听一个状态，发射一个状态，根据状态重新构建页面等等。

BlocProvider/MultiBlocProvider

BlocProviders 控制给其子挂件提供一个 bloc。在使用它之前，需要初始化 bloc。

如果我们需要不止一个 bloc，我们可以使用 MultiBlocProvider 来获取不同的 providers。

BlocListener

这个挂件，我们可以监听 listen 从 bloc 中发射 emit 出来的不同状态，并作出反应，比如，展示 snackbar，对话框，或者导航到另一个页面... 这个挂件不会重新构建视图，它只会监听。

BlocBuilder

通过这个挂件，我们能够根据它们的状态重新构建我们的挂件。

BlocConsumer

当我们需要控制 bloc 状态去重新构建挂件或者导航或者展示对话框等，BlocConsumer 这个挂件很有用。这个挂件有 listener 和 builder 函数，所以我们可以一起使用。

BlocSelector

这个挂件允许开发者基于当前 bloc 状态选择一个新的值指定更新。

这些解析都是高等级的，有很多使用它们的方式。更多的内容，我们应该查看官网。

我们了解这些后，下面可以应用到案例中 ?

在真实项目中使用 Flutter Bloc

在这个项目中，我们将从 games API 消费数据，获取关于游戏的信息并在页面中展示出来。

该 API 我们选择的是 RAWG。为了使用它，我们需要创建一个 API Key。

本文我们不会介绍存储库和服务部分，但是如果你感兴趣，可以参考文本的代码。

下面是我完成的应用效果。

该首页有不同的部分，我们看下。

Header

这是个简单的挂件，我们展示了两行文本和一个圆形的头像。

Category 挂件

展示通过调用 getGenres 方法 API 返回的不同的类型。这个挂件有四种可能的状态：

成功：真实分类列表
错误：展示错误信息
加载：展示一个 CircularProgressIndicator 挂件
选中：更改选中类别的大小和颜色

Game by category widget

通过 genres 额外参数调用 getGames 方法，展示 API 返回的过滤游戏数据。它有三个可能的状态：

成功：通过分类展示游戏列表
错误：展示错误信息
加载：展示一个 CircularProgressIndicator 挂件

All games widget

不通过过滤获取游戏列表。这个挂件只有在它的 bloc 发射成功一个状态后才展示出来，它有三个状态：

成功：展示游戏列表
错误：展示一个错误信息
加载：展示一个 CircularProgressIndicator 挂件

项目结构

这个案例中，我们创建下面代码结构：

正如我们在 home 挂件文件夹中所看到之前提及的那样。每个挂件都有自己的 bloc，所以这会更加干净和可维护。

首页

这个页面很重要，所以这里我们使用了两个 Bloc 挂件：

MultiBlocProvider 和 RepositoryProvider。

当页面被初始化后，这个页面中所有的 bloc 准备就绪，所以，我们需要做的是使用一个 RepositoryProvider 来包裹子挂件，以为所有的 bloc 提供一个存储库，而且，我们需要通过一个 MultiBlocProvider 来初始化所有的 bloc。

// home_page_games.dart
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:infogames/repository/game_repository.dart';
import 'package:infogames/repository/service/game_service.dart';
import 'package:infogames/ui/home/pages/home_layout.dart';
import 'package:infogames/ui/home/widgets/category/category_barrel.dart';
import 'package:infogames/ui/home/widgets/all_games_list_widget/all_games_barrel.dart';
import 'package:infogames/ui/home/widgets/games_by_category/games_by_category.dart';

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.deepOrangeAccent,
      body: RepositoryProvider(
        create: (context) => GameRepository(service: GameService()),
        child: MultiBlocProvider(
          providers: [
            BlocProvider<AllGamesBloc>(
              create: (context) => AllGamesBloc(
                gameRepository: context.read<GameRepository>(),
              )..add(
                  GetGames(),
                ),
            ),
            BlocProvider<CategoryBloc>(
              create: (context) => CategoryBloc(
                gameRepository: context.read<GameRepository>(),
              )..add(
                  GetCategories(),
                ),
            ),
            BlocProvider<GamesByCategoryBloc>(
              create: (context) => GamesByCategoryBloc(
                gameRepository: context.read<GameRepository>(),
              ),
            ),
          ],
          child: HomeLayout(),
        ),
      ),
    );
  }
}

实际上，正如我们所看到的代码，在开始的时候添加两个 bloc 分别对应两个事件：

GetGames
GetCategories

这是其中一个方法 - 添加时间来通知它的 bloc 我们需要一些数据。至此，这个首页有三个 blocs 和两个事件触发。现在，我们看看首页布局 HomeLayout。

HomeLayout

正如上面所提及，这个类有三个主要的挂件，包含视图的骨架。

// home_layout_games.dart
import 'package:flutter/material.dart';
import 'package:infogames/ui/home/widgets/all_games_widget/all_games_widget.dart';
import 'package:infogames/ui/home/widgets/category_widget/categories_widget.dart';
import 'package:infogames/ui/home/widgets/games_by_category_widget/games_by_category_widget.dart';
import 'package:infogames/ui/home/widgets/header_title/header_title.dart';
import 'package:infogames/ui/widgets/container_body.dart';

class HomeLayout extends StatelessWidget {
  const HomeLayout({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 80.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          HeaderTitle(),
          const SizedBox(height: 40.0),
          ContainerBody(
            children: [
              CategoriesWidget(),
              GamesByCategoryWidget(),
              AllGamesWidget(title: 'All games'),
            ],
          )
        ],
      ),
    );
  }
}

下一步是进一步看看这些挂件，我们从挂件 CateoriesWidget 开始。

CategoriesWidget

Category event

这里我们为这个挂件创建所有需要的事件。

GetCategories：获取分类的事件
SelectCategories：当分类被选中的事件

// category_event.dart
part of 'category_bloc.dart';

class CategoryEvent extents Equatable {
  @override
  List<Object?> get props => [];
}

class GetCategories extends CategoryEvent {}

class SelectCategory extends CategoryEvent {
  SelectCategory({
    required this.idSelected;
  });
  final int idSelected;
  
  @override
  List<Object?> get props => [idSelected];
}

Category state

这个类包含 bloc 能够发射的不同状态。我们尽量用简短和清晰的方式来处理视图中的所有可能。

我们使用 Equatable 库来比较 Dart 中不同的对象，如果你们不知道这些知识，我们推荐你阅读下文档。

// category_state.dart
part of 'category_bloc.dart';

enum CategoryStatus { initial, success, error, loading, selected }

extension CategoryStatusX on CategoryStatus {
  bool get isInitial => this == CategoryStatus.initial;
  bool get isSuccess => this == CategoryStatus.success;
  bool get isError => this == CategoryStatus.error;
  bool get isLoading => this == CategoryStatus.loading;
  bool get isSelected => this == CategoryStatus.selected;
}

class CategoryState extends Equatable {
  const CategoryState({
    this.status = CategoryStatus.initial,
    List<Genre>? categories,
    int idSelected = 0,
  })  : categories = categories ?? const [],
        idSelected = idSelected;

  final List<Genre> categories;
  final CategoryStatus status;
  final int idSelected;

  @override
  List<Object?> get props => [status, categories, idSelected];

  CategoryState copyWith({
    List<Genre>? categories,
    CategoryStatus? status,
    int? idSelected,
  }) {
    return CategoryState(
      categories: categories ?? this.categories,
      status: status ?? this.status,
      idSelected: idSelected ?? this.idSelected,
    );
  }
}

Category bloc

在这里，我们需要处理所有的事件。正如你所看到的，在下面 on<GetCatogories>(_mapGetCategoriesEventToState) 和 on<SelectCategory>(_mapSelectCategoryEventToState) 这两行代码中，我们检查事件是否是一个或另一个以创建其方法。

mapGetCategoriesEventToState：这个方法调用一个存储库从 API 获取数据。当存储库返回数据或者抛出错误，bloc 会发射对应状态。
mapSelectCategoryEventToState：这个方法将发射状态，比如 selected

// category_bloc.dart
import 'package:equatable/equatable.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:infogames/repository/game_repository.dart';
import 'package:infogames/repository/models/model_barrel.dart';

part 'category_event.dart';
part 'category_state.dart';

class CategoryBloc extends Bloc<CategoryEvent, CategoryState> {
  CategoryBloc({
    required this.gameRepository,
  }) : super(const CategoryState()) {
    on<GetCategories>(_mapGetCategoriesEventToState);
    on<SelectCategory>(_mapSelectCategoryEventToState);
  }
  final GameRepository gameRepository;

  void _mapGetCategoriesEventToState(
      GetCategories event, Emitter<CategoryState> emit) async {
    emit(state.copyWith(status: CategoryStatus.loading));
    try {
      final genres = await gameRepository.getGenres();
      emit(
        state.copyWith(
          status: CategoryStatus.success,
          categories: genres,
        ),
      );
    } catch (error, stacktrace) {
      print(stacktrace);
      emit(state.copyWith(status: CategoryStatus.error));
    }
  }

  void _mapSelectCategoryEventToState(
      SelectCategory event, Emitter<CategoryState> emit) async {
    emit(
      state.copyWith(
        status: CategoryStatus.selected,
        idSelected: event.idSelected,
      ),
    );
  }
}

至此，我们怎么检查页面中的状态呢？

嗯，当一个状态被发射，我们想要根据对应的数据重新构建视图。为了实现这个，在我们视图中添加了 BlocBuilder。

在这个案例中，我们只想在当前状态成功后重新构建视图，所以我们使用 buildWhen() 来实现。

// categories_widget.dart
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:infogames/ui/home/widgets/category_widget/category_barrel.dart';

class CategoriesWidget extends StatelessWidget {
  const CategoriesWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<CategoryBloc, CategoryState>(
      buildWhen: (previous, current) => current.status.isSuccess,
      builder: (context, state) {
        return CategoriesSuccessWidget();
      },
    );
  }
}

很棒，当这个挂件被展示出来，用户可以点击其中一个分类，当这个发生，我们将添加两个事件：

GetGamesByCategory：获取按类型过滤游戏。这将通过另一个 bloc ： GameByCategoryBloc。我们后面将讲解这个 bloc。
SelectCategory：更改视图中选中项的颜色和大小。我们将在同一个 bloc ：CategoryBloc 中处理

下面是完整的类。

// categories_success_widget.dart
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:infogames/repository/models/genre.dart';
import 'package:infogames/ui/home/widgets/category_widget/category_barrel.dart';
import 'package:infogames/ui/home/widgets/games_by_category_widget/games_by_category_barrel.dart';

class CategoriesSuccessWidget extends StatelessWidget {
  const CategoriesSuccessWidget({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<CategoryBloc, CategoryState>(
      builder: (context, state) {
        return SizedBox(
          height: MediaQuery.of(context).size.height * .15,
          child: ListView.separated(
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            shrinkWrap: true,
            itemBuilder: (context, index) {
              return CategoryItem(
                key: ValueKey('${state.categories[index].name}$index'),
                category: state.categories[index],
                callback: (Genre categorySelected) {
                  context.read<GamesByCategoryBloc>().add(
                        GetGamesByCategory(
                          idSelected: categorySelected.id,
                          categoryName: categorySelected.name ?? '',
                        ),
                      );
                  context.read<CategoryBloc>().add(
                        SelectCategory(
                          idSelected: categorySelected.id,
                        ),
                      );
                },
              );
            },
            scrollDirection: Axis.horizontal,
            separatorBuilder: (_, __) => SizedBox(
              width: 16.0,
            ),
            itemCount: state.categories.length,
          ),
        );
      },
    );
  }
}

当 state.isSelected 被改变的时候，我们看看视图发生了什么。

我们使用一个 BlocSelector 来控制这情形，当用户点击其中一个分类，事件将会被触发并且 bloc 将发射一个选中分类的 id 状态 isSelected，所以在 bloc selector 中，我们必须检查这些状态是 true 才能使用一个新的尺寸和颜色重新构建视图。

// category_item.dart
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:infogames/repository/models/genre.dart';
import 'package:infogames/ui/home/widgets/category_widget/category_barrel.dart';

typedef CategoryCLicked = Function(Genre categorySelected);

class CategoryItem extends StatelessWidget {
  const CategoryItem({
    Key? key,
    required this.category,
    required this.callback,
  }) : super(key: key);

  final Genre category;
  final CategoryCLicked callback;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => callback(category),
      child: BlocSelector<CategoryBloc, CategoryState, bool>(
        selector: (state) =>
            (state.status.isSelected && state.idSelected == category.id)
                ? true
                : false,
        builder: (context, state) {
          return Column(
            children: [
              AnimatedContainer(
                duration: const Duration(milliseconds: 400),
                curve: Curves.easeInOutCirc,
                padding: const EdgeInsets.symmetric(horizontal: 2.0),
                alignment: Alignment.center,
                height: state ? 70.0 : 60.0,
                width: state ? 70.0 : 60.0,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: state ? Colors.deepOrangeAccent : Colors.amberAccent,
                ),
                child: Icon(
                  Icons.gamepad_outlined,
                ),
              ),
              SizedBox(height: 4.0),
              Container(
                width: 60,
                child: Text(
                  category.name ?? '',
                  style: TextStyle(
                      fontSize: 10.0,
                      fontWeight: FontWeight.bold,
                      color: Colors.black87),
                  textAlign: TextAlign.center,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
              )
            ],
          );
        },
      ),
    );
  }
}

GameByCategoryWidget

GameByCategoryEvent

这里，我们创建一个事件来获取所有通过分类过滤的游戏，并将分类名字作为列表的标题。

// games_by_category_event.dart
part of 'games_by_category_bloc.dart';

class GamesByCategoryEvent extends Equatable {
  @override
  List<Object?> get props => [];
}

class GetGamesByCategory extends GamesByCategoryEvent {
  GetGamesByCategory({
    required this.idSelected,
    required this.categoryName,
  });
  final int idSelected;
  final String categoryName;

  @override
  List<Object?> get props => [idSelected, categoryName];
}

GameByCategoryState

和之前状态类相似，这里我们添加了一个扩展，来检查不同的状态和通过一个 copyWith 的方法来创建游戏列表的副本。

// games_by_category_state.dart
part of 'games_by_category_bloc.dart';

enum GamesByCategoryStatus { initial, success, error, loading }

extension GamesByCategoryStatusX on GamesByCategoryStatus {
  bool get isInitial => this == GamesByCategoryStatus.initial;
  bool get isSuccess => this == GamesByCategoryStatus.success;
  bool get isError => this == GamesByCategoryStatus.error;
  bool get isLoading => this == GamesByCategoryStatus.loading;
}

class GamesByCategoryState extends Equatable {
  const GamesByCategoryState({
    this.status = GamesByCategoryStatus.initial,
    List<Result>? games,
    String? categoryName,
  })  : games = games ?? const [],
        categoryName = categoryName ?? '';

  final List<Result> games;
  final GamesByCategoryStatus status;
  final String categoryName;

  @override
  List<Object?> get props => [status, games, categoryName];

  GamesByCategoryState copyWith({
    List<Result>? games,
    GamesByCategoryStatus? status,
    String? categoryName,
  }) {
    return GamesByCategoryState(
      games: games ?? this.games,
      status: status ?? this.status,
      categoryName: categoryName ?? this.categoryName,
    );
  }
}

GameByCategoryBloc

在这个 bloc 总，我们将通过方法 GetGamesByCategory 来调用存储库以获取满足该分类 id 的所有游戏数据。当存储库返回有效数据，bloc 将返回放射成功信息，比如状态或者一份列表的副本或者分类名字，相反的，如果结果无效，bloc 需要返回错误的状态。

// game_by_category_bloc.dart
import 'package:equatable/equatable.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:infogames/repository/game_repository.dart';
import 'package:infogames/repository/models/model_barrel.dart';

part 'games_by_category_event.dart';
part 'games_by_category_state.dart';

class GamesByCategoryBloc
    extends Bloc<GamesByCategoryEvent, GamesByCategoryState> {
  GamesByCategoryBloc({
    required this.gameRepository,
  }) : super(const GamesByCategoryState()) {
    on<GetGamesByCategory>(_mapGetGamesByCategoryEventToState);
  }
  final GameRepository gameRepository;

  void _mapGetGamesByCategoryEventToState(
      GetGamesByCategory event, Emitter<GamesByCategoryState> emit) async {
    try {
      emit(state.copyWith(status: GamesByCategoryStatus.loading));

      final gamesByCategory =
          await gameRepository.getGamesByCategory(event.idSelected);
      emit(
        state.copyWith(
          status: GamesByCategoryStatus.success,
          games: gamesByCategory,
          categoryName: event.categoryName,
        ),
      );
    } catch (error) {
      emit(state.copyWith(status: GamesByCategoryStatus.error));
    }
  }
}

完美，下一步是在视图中检查状态并做出响应。

// games_by_category_widget.dart
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:infogames/ui/widgets/error_widget.dart';
import 'games_by_category_barrel.dart';

class GamesByCategoryWidget extends StatelessWidget {
  const GamesByCategoryWidget({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<GamesByCategoryBloc, GamesByCategoryState>(
      builder: (context, state) {
        return state.status.isSuccess
            ? GameByCategorySuccessWidget(
                categoryName: state.categoryName,
                games: state.games,
              )
            : state.status.isLoading
                ? Center(
                    child: CircularProgressIndicator(),
                  )
                : state.status.isError
                    ? ErrorGameWidget()
                    : const SizedBox();
      },
    );
  }
}

正如所看到的那样，我们根据状态的三个选项来处理视图：

错误：暂时公共的错误挂件
加载：展示 CircularProgressIndicator
成功：展示 GameByCategorySuccessWidget。这个挂件控制通过分类游戏列表的展示。下面是这个挂件：

// games_by_category_success_widget.dart
import 'package:flutter/material.dart';
import 'package:infogames/repository/models/result.dart';
import 'package:infogames/ui/home/widgets/games_by_category_widget/games_by_category_barrel.dart';

class GameByCategorySuccessWidget extends StatelessWidget {
  const GameByCategorySuccessWidget({
    Key? key,
    required this.categoryName,
    required this.games,
  }) : super(key: key);

  final String categoryName;
  final List<Result> games;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: const EdgeInsets.only(
            left: 24.0,
            bottom: 16.0,
          ),
          child: Text(
            categoryName,
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 18.0,
            ),
          ),
        ),
        Container(
          height: MediaQuery.of(context).size.height * .2,
          child: ListView.separated(
            padding: const EdgeInsets.only(
              left: 24.0,
              right: 24.0,
            ),
            scrollDirection: Axis.horizontal,
            itemBuilder: (context, index) {
              return GameByCategoryImage(
                name: games[index].name ?? 'No data',
                backgroundImage: games[index].backgroundImage ?? '',
              );
            },
            separatorBuilder: (_, __) => SizedBox(
              width: 25.0,
            ),
            itemCount: games.length,
          ),
        ),
      ],
    );
  }
}

最后关于首页布局的那部分，是 AllGamesWidget。

AllGamesWidget

AllGamesEvent

我们创建一个从 API 获取所有游戏的事件。

// all_games_event.dart
part of 'all_games_bloc.dart';

class AllGamesEvent extends Equatable {
  @override
  List<Object?> get props => [];
}

class GetGames extends AllGamesEvent {
  @override
  List<Object?> get props => [];
}

AllGamesState

像之前那样，我们创建一个扩展来处理所有可能的状态，并且有一个 copyWith 方法来创建一个我们所需的对象副本。

// all_games_state.dart
part of 'all_games_bloc.dart';

enum AllGamesStatus { initial, success, error, loading }

extension AllGamesStatusX on AllGamesStatus {
  bool get isInitial => this == AllGamesStatus.initial;
  bool get isSuccess => this == AllGamesStatus.success;
  bool get isError => this == AllGamesStatus.error;
  bool get isLoading => this == AllGamesStatus.loading;
}

class AllGamesState extends Equatable {
  const AllGamesState({
    this.status = AllGamesStatus.initial,
    Game? games,
  }) : games = games ?? Game.empty;

  final Game games;
  final AllGamesStatus status;

  @override
  List<Object?> get props => [status, games];

  AllGamesState copyWith({
    Game? games,
    AllGamesStatus? status,
  }) {
    return AllGamesState(
      games: games ?? this.games,
      status: status ?? this.status,
    );
  }
}

AllGamesBloc

这里我们调用存储库，当有可用的数据的时候，bloc 发射一个游戏列表副本的成功值，相反的，如果存储库返回无效值，bloc 会发射一个错误的状态。

// all_games_bloc.dart
import 'package:equatable/equatable.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:infogames/repository/game_repository.dart';
import 'package:infogames/repository/models/model_barrel.dart';

part 'all_games_event.dart';
part 'all_games_state.dart';

class AllGamesBloc extends Bloc<AllGamesEvent, AllGamesState> {
  AllGamesBloc({
    required this.gameRepository,
  }) : super(const AllGamesState()) {
    on<GetGames>(_mapGetGamesEventToState);
  }

  final GameRepository gameRepository;

  void _mapGetGamesEventToState(
      GetGames event, Emitter<AllGamesState> emit) async {
    try {
      emit(state.copyWith(status: AllGamesStatus.loading));
      final games = await gameRepository.getGames();
      emit(
        state.copyWith(
          status: AllGamesStatus.success,
          games: games,
        ),
      );
    } catch (error) {
      emit(state.copyWith(status: AllGamesStatus.error));
    }
  }
}

AllGamesWidget

下面是所有游戏的挂件。这里，我们有一个 BlocBuilder 基于状态来重新构建视图。

// all_games_widget.dart
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:infogames/ui/home/widgets/all_games_widget/all_games_barrel.dart';
import 'package:infogames/ui/widgets/error_widget.dart';

class AllGamesWidget extends StatelessWidget {
  const AllGamesWidget({
    Key? key,
    required this.title,
  }) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<AllGamesBloc, AllGamesState>(
      builder: (context, state) {
        return state.status.isSuccess
            ? AllGamesSuccessWidget(
                title: title,
                games: state.games.results,
              )
            : state.status.isLoading
                ? Center(
                    child: CircularProgressIndicator(),
                  )
                : state.status.isError
                    ? ErrorGameWidget()
                    : const SizedBox();
      },
    );
  }
}

这里有状态的三种类型：

错误：展示公共的错误挂件
加载：展示 CircularProgressIndicator 挂件
成功：展示 AllGamesSuccessWidget。这个挂件控制展示游戏列表。下面是该挂件的内容：

// all_games_success_widget.dart
import 'package:flutter/material.dart';
import 'package:infogames/repository/models/result.dart';
import 'package:infogames/ui/home/widgets/all_games_widget/all_games_barrel.dart';

class AllGamesSuccessWidget extends StatelessWidget {
  const AllGamesSuccessWidget({
    Key? key,
    required this.games,
    required this.title,
  }) : super(key: key);

  final List<Result> games;
  final String title;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Padding(
          padding: const EdgeInsets.only(left: 24.0),
          child: Text(
            title,
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 18.0,
            ),
          ),
        ),
        Container(
          height:
              ((100 * games.length) + MediaQuery.of(context).size.width) + 24.0,
          child: ListView.separated(
            physics: NeverScrollableScrollPhysics(),
            padding: const EdgeInsets.only(
              left: 24.0,
              right: 24.0,
              top: 24.0,
            ),
            itemBuilder: (context, index) {
              return AllGamesItem(
                game: games[index],
              );
            },
            separatorBuilder: (_, __) => SizedBox(
              height: 20.0,
            ),
            itemCount: games.length,
          ),
        ),
      ],
    );
  }
}

额外内容 ?

如果我们想要一个日志，来知道当前状态和下个我们添加的事件，我们需要一个 Bloc Observer 类。我们应该创建这个类并在主类中初始化它。

// bloc_observer.dart
class AppBlocObserver extends BlocObserver {
  @override
  void onChange(BlocBase bloc, Change change) {
    super.onChange(bloc, change);
    if (bloc is Cubit) print(change);
  }

  @override
  void onTransition(Bloc bloc, Transition transition) {
    super.onTransition(bloc, transition);
    print(transition);
  }
}

// main class

void main() async {
  BlocOverrides.runZoned(
    () => runApp(const MyApp()),
    blocObserver: AppBlocObserver(),
  );
}