FlutterのBlocとは何か：それの使い方についての完全なガイド

Flutterアプリケーションの状態管理ツールの一つに、Flutter Blocがあります。これを使うとアプリケーションの可能な全ての状態を簡単に管理することができます。

アプリケーションのコードをよりクリアで、スケーラブル、テスト可能にするために、BLoC（ビジネスロジックコンポーネント）はアプリケーションのビジネスロジックをユーザーインターフェースから分離しようとします。

BLoCの基本的な考え方は、FlutterのWebアプリケーション開発では、全てをイベントの流れとして視覚化するべきだということです。ウィジェットはイベントを提出するものであり、他のウィジェットが反応します。BLoCは中央で会話をコントロールします。ストリームを扱うための構文もDartに組み込まれています！

Blocがどのように機能するかを理解するために、イベントと状態が何かを理解する必要があります：

イベント：

イベントはBLoCに行動を要求します。UIウィジェットを含むどこからでもイベントを発火できます。外部の状況、例えばセンサーの読み取り変更やネットワークの接続性などです。

状態：

Flutterでの状態は、それぞれのウィジェットが処理するデータを意味します。ウィジェットは状態に応じて自分自身を変化させます。

Flutter blocは使いやすく、どんなレベルでも素早くその概念をつかめます。このライブラリは豊富な例を含む素晴らしいドキュメンテーションを持っています。Flutterコミュニティでは最も人気のあるものの一つで、質問や問題があれば、インターネットで素早く答えを見つけられるでしょう。

Blocで提供される異なるタイプのFlutterウィジェット：

Blocは、イベントの追加、状態の監視、状態の発行、状態に基づいたビューの再構築など、潜在的な全シナリオを管理するための異なるタイプのFlutterウィジェットを提供します。

BlocProvider：

BlocProviderは子ウィジェットにblocを提供する責任があります。これは「使用する前に」blocを「初期化」するプロセスです。

BlocProvider(
  create: (context) => yourBlocClass(),
  child: HomePage(),
);

BlocBuilder：

これを利用すると、ウィジェットを現在の状態に基づいて再構築することができます。

BlocBuilder<CounterBloc, int>(
  builder: (context, state) {
    return Text(
      '$state',
      style: Theme.of(context).textTheme.headline4,
    );
  },
);

BlocConsumer：

このウィジェットは、ダイアログボックスを表示したり、移動する際や、ウィジェットの状態を制御してblocの状態に基づいてウィジェットを再構築する際にとても便利です。listenerとbuilderの機能を持っているので、他のウィジェットと組み合わせて使うこともできます。

BlocConsumer<BlocClass, BlocState>(
  listener: (context, state) {
    // ここでBlocの状態に基づいて何かをする
  },
  builder: (context, state) {
    // ここでBlocの状態に応じたウィジェットを返す
  },
);

BlocSelector：

開発者はこのウィジェットを使用して、その時のbloc状態に基づいて新しい値を選び出し更新をフィルタリングすることができます。

BlocSelector<CubicClass, int, bool>(
  selector: (state) => state.isEven ? true : false,
  builder: (context, booleanState) {
    return Center(
      child: booleanState
        ? Text('$booleanState')
        : Icon(Icons.integration_instructions),
    );
  },
);

Flutter Blocはどのように機能するのか？

Flutter blocを使用する場合、アプリとのユーザーインタラクションを開始するイベントを作成します。そして、その責任のあるblocは必要なデータと一緒に状態を発信します。

ユーザーがアプリケーションで何かを実行するとき。
ユーザーはこのリクエストをし、それに対してイベントがブロックに通知されます。
ブロックはこの情報を要求します。
ブロックがデータが成功かエラーかを判断した後、状態を発信します。
ビューはブロックが発信した全ての可能性のある状態を聞いています。例えば、ブロックが成功状態を発信した場合、ビューはゲームのリストで再構築されます。しかし、ブロックがエラー状態を発信した場合、ビューはエラーメッセージやあなたが表示したい他のもので再構築されます。

アプリケーションにBlocを使うには、以下のコマンドを使ってプロジェクトにBlocライブラリーを追加する必要があります。

flutter pub add flutter_bloc

Blocをアプリケーションに統合する：

簡単なアプリを構築して、カウンターを増やしたり減らしたりリセットする

// Blocを追加する
class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0) {
    on<Increment>((event, emit) => emit(state + 1));
    on<Decrement>((event, emit) => emit(state - 1));
    on<Reset>(((event, emit) => emit(0)));
  }
}

// BlocBuilderを作成する
BlocBuilder<CounterBloc, int>(
  builder: (context, state) {
    return Text(
      '$state',
      style: Theme.of(context).textTheme.headline4,
    );
  },
);

// BlocProviderを作成する
BlocProvider(
  create: (context) => CounterBloc(),
  child: MaterialApp(
    title: 'Flutter Demo',
    home: MyHomePage(),
  ),
);

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  
  @override
  Widget build(BuildContext context) {
    // ... BlocProviderをここに配置
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});
  
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // ...
}

// 別のファイル bloc.dart をlibフォルダに作成
import 'package:flutter_bloc/flutter_bloc.dart';

abstract class CounterEvent {}
class Increment extends CounterEvent {}
class Decrement extends CounterEvent {}
class Reset extends CounterEvent {}

// CounterBlocクラスもここに記述

結果：

結論：

適切な関心の分離は、良いBLoCアーキテクチャの結果です。BLoCパラダイムは、setStateよりも多くのコードが必要ですが、コードをより読みやすく、スケーラブルで、テスト可能にします。

私たちは、FlutterでのBLoCパターンの使用の基本をカバーしながら、setStateアプローチに対するBLoCを使う利点を示す実際のシナリオを通して説明しました。この記事を楽しんで理解することを願っています。

よくある質問（FAQ）：

1. BLoCはFlutter開発でどのように使われますか？

BLoCはビジネスロジックコンポーネントを意味し、その目的はアプリのビジネスロジックをユーザーインターフェースから分離し、アプリコードをより明確で、テスト可能で、スケーラブルにすることです。

2. BLoCアーキテクチャはFlutterフレームワークにありますか？

Flutter BLoCは、BLoCコンポーネントに依存するアーキテクチャルパターンです。これらのコンポーネントはビジネスロジックのみで構成されており、様々なDartアプリ間で簡単に共有することができます。

3. Flutterの技術でウィジェットとは何ですか？

ウィジェットはFlutterフレームワークの中心的なクラス階層です。ウィジェットはユーザーインターフェースの不変的な説明です。しかし、ウィジェットは要素に分けられ、それらは背後にあるレンダリングツリーを管理します。したがって、ウィジェット自体は変更可能な状態を持っていません。

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/kuldeeptarapara/what-is-flutter-bloc-a-complete-guide-to-use-it-556m