Flutter開発入門48 BLoCアーキテクチャとflutter_blocの使い方を解説

Flutter

はじめに

Flutterでの状態管理の方法は多くありますが、その中でも特に人気なのがBLoCアーキテクチャです。BLoC（Business Logic Component）アーキテクチャは、ビジネスロジックをUIロジックから分離する設計手法で、アプリの状態管理をより効率的に行うことができます。

このアーキテクチャに基づいたFlutter用パッケージである**flutter_bloc**を使うことで、状態の管理とリビルドをシンプルに行うことが可能です。この記事では、BLoCアーキテクチャの基本的な概念から、flutter_blocの使い方、実践的なサンプルコードまでを紹介します。

BLoCアーキテクチャとは

BLoCアーキテクチャとは、Business Logic Componentの略で、Flutterでの状態管理とビジネスロジックの実装を効率化するための設計パターンです。BLoCアーキテクチャは、次のような特徴を持っています。

BLoCアーキテクチャの特徴

  • ビジネスロジックとUIロジックの分離：ビジネスロジックをUIから切り離し、独立したモジュールとして扱うことで、コードの再利用性やテストが容易になります。
  • イベント駆動型の状態管理：ユーザーアクションやシステムイベントに基づいて状態が変更され、その結果がUIに反映されます。
  • ストリームを活用：状態管理にストリーム（Stream）を使い、非同期処理やリアルタイムのデータ更新を効率的に扱います。

BLoCの主なコンポーネント

  1. イベント（Events）
    ユーザーの操作やシステムからのアクションがトリガーとなり、BLoCに対して何をすべきかを伝える役割を持ちます。
  2. ステート（State）
    アプリの状態を表します。BLoCはイベントを受け取り、状態を更新し、その状態がUIに反映されます。
  3. BLoC
    アプリケーションのビジネスロジックを担い、イベントに基づいて状態を変更します。通常、入力としてイベントを受け取り、出力として状態をストリームで提供します。

flutter_blocの基本的な使い方

flutter_blocは、BLoCアーキテクチャを実装するための便利なFlutterパッケージです。このパッケージを使うことで、BLoCパターンに基づいた状態管理が簡単に行えます。

1. flutter_blocのセットアップ

まず、pubspec.yamlファイルにflutter_blocパッケージを追加します。

dependencies:
  flutter:
    sdk: flutter
  flutter_bloc: ^8.1.6
  equatable: ^2.0.5

その後、依存関係をインストールします。

flutter pub get

equatableは、BLoCで状態の比較を簡単にするために使います。

2. flutter_blocの基本的な流れ

BLoCを使ったアプリケーションでは、次の3つの要素が重要です。

  1. イベント（Events）：ユーザーのアクションやシステムイベントを表す。
  2. 状態（State）：現在のUIの状態を表す。
  3. BLoC（Business Logic Component）：イベントに応じて状態を変更するビジネスロジックを持つ。

3. イベント、状態、BLoCクラスの定義

イベントの定義

まず、ユーザーアクションを表すイベントクラスを定義します。例えば、カウントを増加させるイベントを定義します。

import 'package:equatable/equatable.dart';

abstract class CounterEvent {}

class Increment extends CounterEvent {}
状態の定義

次に、アプリの状態を表すクラスを定義します。ここでは、カウンターの値を持つシンプルな状態クラスを作ります。

class CounterState extends Equatable {
  final int count;

  const CounterState(this.count);

  @override
  List<Object?> get props => [count];
}
BLoCクラスの定義

BLoCクラスでは、イベントに基づいて状態を変更するロジックを実装します。

import 'package:flutter_bloc/flutter_bloc.dart';

class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(const CounterState(0)) {
    on<Increment>((event, emit) {
      emit(CounterState(state.count + 1));
    });
  }
}

4. flutter_blocの利用方法

BLoCのイベントと状態の定義が完了したら、それをUIで使うことができます。BlocProviderでBLoCを提供し、BlocBuilderでUIを構築します。

BlocProviderとBlocBuilderを使ったUI
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(),
      ),
    );
  }
}

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter with BLoC')),
      body: Center(
        child: BlocBuilder<CounterBloc, CounterState>(
          builder: (context, state) {
            return Text('Count: ${state.count}', style: TextStyle(fontSize: 40));
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read<CounterBloc>().add(Increment());
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

解説

  • BlocProvider：アプリ全体にBLoCを提供するプロバイダで、BLoCのインスタンスを生成してUIに渡します。
  • BlocBuilder：BLoCの状態を監視し、状態が変更されるたびにUIを更新します。
  • context.read<CounterBloc>().add(Increment())：ユーザーがボタンを押したときに、IncrementイベントをBLoCに送ります。

flutter_blocの応用

flutter_blocは、シンプルなカウンターアプリだけでなく、複雑な状態管理にも対応できます。以下にいくつかの応用的な機能を紹介します。

1. 複数のイベント処理

BLoCは、複数のイベントに応じて状態を管理できます。以下は、増加と減少の2つのイベントを持つカウンターBLoCの例です。

abstract class CounterEvent {}

class Increment extends CounterEvent {}

class Decrement extends CounterEvent {}

class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(const CounterState(0)) {
    on<Increment>((event, emit) {
      emit(CounterState(state.count + 1));
    });
    on<Decrement>((event, emit) {
      emit(CounterState(state.count - 1));
    });
  }
}

2. 状態のリセットや複雑なビジネスロジック

BLoCは、API呼び出しやデータベース操作といった複雑なビジネスロジックにも対応できます。例えば、サーバーからのデータフェッチやエラーハンドリングをBLoCで管理することで、UIコードがシンプルになります。

まとめ

BLoCアーキテクチャは、Flutterアプリ開発における強力な設計パターンで、ビジネスロジックをUIロジックから分離し、状態管理を効率化します。flutter_blocを使えば、BLoCアーキテクチャに基づいた実装が非常に簡単になります。BlocProviderやBlocBuilderを使って状態の監視や変更を直感的に行い、アプリケーションのテストや保守性も向上させることができます。

コメント