Flutter UI组件集成插件bloc_widgets的使用

Flutter UI组件集成插件bloc_widgets的使用

bloc_widgets 是一个用于简化 Flutter 中 flutter_bloc 包使用的插件。它通过扩展 StatelessWidget 并覆盖 build 方法来提供一个名为 buildWithBloc 的方法，该方法用于根据给定的状态构建小部件。

BlocConsumerWidget 还提供了 listenWhen、buildWhen 和 listen 方法，这些方法与 BlocConsumer 相同。BlocBuilderWidget 提供了 buildWhen 方法，与 BlocBuilder 相同。BlocListenerWidget 提供了 listenWhen 方法，与 BlocListener 相同。SelectorWidget 提供了 selector 方法，与 BlocSelector 相同。

这些小部件支持 Bloc 和 Cubit。

特性

• 将 BlocConsumer 功能封装到 BlocConsumerWidget 中。
• 将 BlocBuilder 功能封装到 BlocBuilderWidget 中。
• 将 BlocListener 功能封装到 BlocListenerWidget 中。
• 将 BlocSelector 功能封装到 BlocSelectorWidget 中。

安装

在你的 pubspec.yaml 文件中添加 bloc_widgets 作为依赖：

dependencies:
  bloc_widgets: ^1.1.2

示例代码

以下是一个完整的示例，展示了如何使用 bloc_widgets 插件中的不同小部件。

import 'package:bloc_widgets/bloc_widgets.dart';
import 'package:flutter/material.dart';

import 'calculator_bloc.dart';
import 'calculator_cubit.dart';

void main() => runApp(const MyApp());

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      // home: const MyHomePage(title: 'BlocWidget Demo'),
      home: const MySelectorHomePage(title: 'BlocSelectorWidget Demo'),
    );
  }
}

class MyConsumerHomePage extends BlocConsumerWidget<CalculatorBloc, BlocState> {
  const MyConsumerHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  CalculatorBloc bloc(BuildContext context) => CalculatorBloc();

  [@override](/user/override)
  void onMount(CalculatorBloc bloc) => bloc.add(CalculatorEvent.onMount);

  [@override](/user/override)
  void listener(context, bloc, state) {
    ScaffoldMessenger.of(context).clearSnackBars();

    if (state.counter == 0) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Counter cleared')),
      );
      return;
    }

    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('Counter changed')),
    );
  }

  [@override](/user/override)
  Widget build(context, bloc, state) {
    final textTheme = Theme.of(context).textTheme;
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('Counter value:'),
            Text('${state.counter}', style: textTheme.headlineMedium),
          ],
        ),
      ),
      bottomNavigationBar: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            FloatingActionButton(
              onPressed: () => bloc.add(CalculatorEvent.remove),
              tooltip: 'Decrement',
              child: const Icon(Icons.exposure_minus_1),
            ),
            TextButton(
              onPressed: () => bloc.add(CalculatorEvent.clear),
              child: const Text('Clear counter'),
            ),
            FloatingActionButton(
              onPressed: () => bloc.add(CalculatorEvent.add),
              tooltip: 'Increment',
              child: const Icon(Icons.exposure_plus_1),
            ),
          ],
        ),
      ),
    );
  }
}

class MyBuilderHomePage extends BlocBuilderWidget<CalculatorBloc, BlocState> {
  const MyBuilderHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  CalculatorBloc bloc(BuildContext context) => CalculatorBloc();

  [@override](/user/override)
  void onMount(CalculatorBloc bloc) => bloc.add(CalculatorEvent.onMount);

  [@override](/user/override)
  Widget build(context, bloc, state) {
    final textTheme = Theme.of(context).textTheme;
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('Counter value:'),
            Text('${state.counter}', style: textTheme.headlineMedium),
          ],
        ),
      ),
      bottomNavigationBar: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            FloatingActionButton(
              onPressed: () => bloc.add(CalculatorEvent.remove),
              tooltip: 'Decrement',
              child: const Icon(Icons.exposure_minus_1),
            ),
            TextButton(
              onPressed: () => bloc.add(CalculatorEvent.clear),
              child: const Text('Clear counter'),
            ),
            FloatingActionButton(
              onPressed: () => bloc.add(CalculatorEvent.add),
              tooltip: 'Increment',
              child: const Icon(Icons.exposure_plus_1),
            ),
          ],
        ),
      ),
    );
  }
}

class MySelectorHomePage extends BlocSelectorWidget<CalculatorCubit, CubitState, int> {
  const MySelectorHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  CalculatorCubit bloc(BuildContext context) => CalculatorCubit();

  [@override](/user/override)
  void onMount(CalculatorCubit bloc) => bloc.changeCounter(-1);

  [@override](/user/override)
  int selector(CubitState state) => state.counter;

  [@override](/user/override)
  Widget build(context, bloc, selector) {
    final textTheme = Theme.of(context).textTheme;
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            const Text('Counter value:'),
            Text('$selector', style: textTheme.headlineMedium),
          ],
        ),
      ),
      bottomNavigationBar: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            FloatingActionButton(
              onPressed: () => bloc.changeCounter(selector - 1),
              tooltip: 'Decrement',
              child: const Icon(Icons.exposure_minus_1),
            ),
            TextButton(
              onPressed: () => bloc.changeCounter(0),
              child: const Text('Clear counter'),
            ),
            FloatingActionButton(
              onPressed: () => bloc.changeCounter(selector + 1),
              tooltip: 'Increment',
              child: const Icon(Icons.exposure_plus_1),
            ),
          ],
        ),
      ),
    );
  }
}

class MyListenerHomePage extends BlocListenerWidget<CalculatorCubit, CubitState> {
  const MyListenerHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  CalculatorCubit bloc(BuildContext context) => CalculatorCubit();

  [@override](/user/override)
  void onMount(CalculatorCubit bloc) => bloc.changeCounter(-1);

  [@override](/user/override)
  void listener(BuildContext context, CalculatorCubit bloc, CubitState state) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Counter value: ${state.counter}')),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context, CalculatorCubit bloc) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: const Center(child: Text('Click to show SnackBar with value')),
    );
  }
}