【Flutter】flutter_blocでデザインパターン

flutter_blocとは
使い方

flutter_blocとは

flutter_blocは、FlutterアプリケーションでBLoC（Business Logic Component）デザインパターンを簡単に実装するためのパッケージです。これにより、ビジネスロジックとUIの分離が促進され、コードのテストと再利用性が向上します。このパッケージは、BLoCとCubitを統合し、状態管理を簡単に行うためのさまざまなウィジェットを提供します。

flutter_bloc | Flutter package

Flutter Widgets that make it easy to implement the BLoC (Business Logic Component) design pattern. Built to be used with...

使い方

インストール

まず、pubspec.yamlファイルにflutter_blocの依存関係を追加します。

dependencies:
  flutter:
    sdk: flutter
  flutter_bloc: ^8.1.5

基本的な使用例

以下は、flutter_blocを使用してカウンターアプリを作成する例です。

CounterCubitの作成

まず、カウンターのビジネスロジックを管理するCubitを作成します。

import 'package:bloc/bloc.dart';

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);
  void decrement() => emit(state - 1);
}

main.dart

次に、BlocProviderを使ってCounterCubitを提供するCounterAppウィジェットを作成します。

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'counter_cubit.dart';

void main() => runApp(CounterApp());

class CounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (_) => CounterCubit(),
        child: CounterPage(),
      ),
    );
  }
}

CounterPageの作成

CounterPageは、カウンターの値を表示し、インクリメントおよびデクリメントボタンを提供するウィジェットです。

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'counter_cubit.dart';

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: BlocBuilder<CounterCubit, int>(
        builder: (context, count) => Center(child: Text('$count')),
      ),
      floatingActionButton: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            child: const Icon(Icons.add),
            onPressed: () => context.read<CounterCubit>().increment(),
          ),
          const SizedBox(height: 4),
          FloatingActionButton(
            child: const Icon(Icons.remove),
            onPressed: () => context.read<CounterCubit>().decrement(),
          ),
        ],
      ),
    );
  }
}

ウィジェットの詳細

BlocBuilder

BlocBuilderは、BLoCの状態に応じてウィジェットを構築するためのFlutterウィジェットです。これは、BLoCの状態が変化するたびにウィジェットを再構築するために使用されます。

BlocBuilder<CounterCubit, int>(
  builder: (context, count) {
    return Text('$count');
  },
);

BlocListener

BlocListenerは、BLoCの状態変化に応じて一度だけ何らかのアクションを実行するためのFlutterウィジェットです。これは、ナビゲーションやダイアログ表示などの一度だけ行う操作に適しています。

BlocListener<CounterCubit, int>(
  listener: (context, state) {
    if (state == 5) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Count is 5')));
    }
  },
  child: CounterPage(),
);

BlocProvider

BlocProviderは、BLoCをウィジェットツリー内の子供に提供するための依存性注入（DI）ウィジェットです。これにより、BLoCの単一インスタンスをサブツリー内の複数のウィジェットに提供できます。

BlocProvider(
  create: (context) => CounterCubit(),
  child: CounterPage(),
);

MultiBlocProvider

MultiBlocProviderは、複数のBlocProviderを一つにまとめるためのウィジェットです。これにより、複数のBLoCを提供する際の可読性が向上し、ネストの必要がなくなります。

MultiBlocProvider(
  providers: [
    BlocProvider<CounterCubit>(create: (context) => CounterCubit()),
    BlocProvider<AnotherCubit>(create: (context) => AnotherCubit()),
  ],
  child: AppWidget(),
);