初心者でもわかる！FlutterでBLoCパターンを導入しよう

はじめに
BLoCパターンとは？
1. BLoCの特徴
BLoCの導入手順
1. BLoCのインストール
2. 基本構成
BLoCパターンの基本的な使い方
UIでBLoCを利用する
1. ProviderでBLoCを提供
2. イベントの発行と状態の監視
BLoCパターンの利点
応用的な使い方
1. 複数のBLoCを使う
まとめ
1. この記事のポイント

はじめに

Flutterでのアプリ開発が進むにつれ、アプリの複雑さが増すことがあります。例えば、複数の画面で同じデータを扱ったり、ユーザーの操作に応じてアプリの状態を管理する必要が出てきます。このようなときに、適切な状態管理パターンを導入することが非常に重要です。

その中で、BLoCパターンは非常に人気があり、業界標準としても広く使われています。この記事では、BLoCパターンを初心者にもわかりやすく解説し、Flutterアプリでの導入方法とその基本的な使い方を紹介します。

BLoCパターンとは？

BLoCとは「Business Logic Component」の略で、ビジネスロジックを独立したコンポーネントとして分離するための設計パターンです。このパターンを使うと、UIのロジックとビジネスロジックを明確に分けることができ、アプリケーションのテスト性や保守性が向上します。

BLoCの特徴

状態管理のシンプル化: 状態の変化をストリームで管理し、画面がビジネスロジックに依存しない設計が可能。
再利用性の向上: ビジネスロジックをUIとは独立した形で記述できるため、複数の画面で同じロジックを使い回すことができます。
テストがしやすい: UIの影響を受けずにビジネスロジックをユニットテストできます。

BLoCの導入手順

BLoCのインストール

FlutterでBLoCパターンを導入するには、flutter_blocというパッケージを利用します。まず、pubspec.yamlにBLoCパッケージを追加します。

YAML

dependencies:
  flutter:
    sdk: flutter
  flutter_bloc: ^8.0.0
  bloc: ^8.0.0

その後、以下のコマンドでパッケージをインストールします。

Bash

flutter pub get

基本構成

BLoCパターンの基本的な構成は以下の通りです。

Event: ユーザーの操作やアプリの状態変化などを表します。例えば、「ボタンが押された」や「データを取得したい」といった動作をイベントとして定義します。
State: アプリケーションの状態を表します。画面に表示するデータや、現在の状態を管理します。
Bloc: イベントに応じて状態を変化させるロジックを実装します。イベントを受け取り、ビジネスロジックを処理して新しい状態を生成します。

BLoCパターンの基本的な使い方

ここでは、簡単なカウンターアプリを例に、BLoCパターンの使い方を見ていきましょう。

イベントの定義

まず、カウンターの増減を表すイベントを定義します。イベントは通常、enumやclassとして定義されます。

Dart

// counter_event.dart
abstract class CounterEvent {}

class Increment extends CounterEvent {}

class Decrement extends CounterEvent {}

状態の定義

次に、アプリの状態を定義します。今回はカウンターの値を管理するため、int型の状態を持つことにします。

Dart

// counter_state.dart
class CounterState {
  final int counter;

  CounterState({required this.counter});
}

BLoCの実装

CounterBlocというクラスを作成し、イベントに応じて状態を変化させます。

Dart

// counter_bloc.dart
import 'package:flutter_bloc/flutter_bloc.dart';

class CounterBloc extends Bloc<CounterEvent, CounterState> {
  // 状態の初期化
  CounterBloc() : super(CounterState(counter: 0)) {
    on<Increment>((event, emit) {
    // emitは状態の通知
      emit(CounterState(counter: state.counter + 1));
    });

    on<Decrement>((event, emit) {
      // emitは状態の通知
      emit(CounterState(counter: state.counter - 1));
    });
  }
}

ここでは、Incrementイベントが発生するとカウンターが1増え、Decrementイベントが発生するとカウンターが1減るように実装しています。

UIでBLoCを利用する

次に、BLoCを使ったカウンターアプリのUIを実装してみましょう。

ProviderでBLoCを提供

BlocProviderを使って、BLoCをUIに提供します。

Dart

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (context) => CounterBloc(),
        child: CounterScreen(),
      ),
    );
  }
}

イベントの発行と状態の監視

次に、ボタンが押されたときにイベントを発行し、状態が変わったときにUIを更新します。

BlocBuilderは、状態が変わるたびにUIを再ビルドするために使用します。
context.read<CounterBloc>().add()で、イベントをBLoCに発行します。

Dart

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('BLoC Counter')),
      body: Center(
        child: BlocBuilder<CounterBloc, CounterState>(
          builder: (context, state) {
            return Text('Count: ${state.counter}', style: TextStyle(fontSize: 40));
          },
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () => context.read<CounterBloc>().add(Increment()),
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () => context.read<CounterBloc>().add(Decrement()),
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}