🚀

【Flutter】最初のカウンターAppをBLoCパターンで書いてみた

2024/10/10に公開

event,BLoc,Screenの3つの構成で実装している。

それぞれの役割について簡単に説明する。

event

BLoC(Business)

Screen(View)

実際のコード

counter_event.dart

event記載する。
今回はIncrementとDecrementのみ記載している。

abstract class CounterEvent {}

class IncrementCounter extends CounterEvent {}

class DecrementCounter extends CounterEvent {}

counter_bloc.dart

class CounterBloc extends Bloc<CounterEvent, int> {
  ///superには初期値を追加する。
  CounterBloc() : super(0) {
    on<IncrementCounter>(
      (event, emit) {
        emit(state + 1);
      },
    );

    on<DecrementCounter>(
      (event, emit) {
        emit(state - 1);
      },
    );
  }
}

第一引数にCounterEventクラス(event)、第二引数にstateを定義する。
superにはstateの初期値を入れる。
on句を用いて型にeventで定義したIncrementCounterを入れる。

counter_page.dart

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

  @override
  Widget build(BuildContext context) {
    final counterBloc = context.read<CounterBloc>();
    return Scaffold(
      appBar: AppBar(
        title: const Text("カウンターApp"),
      ),
      body: Column(
        children: [
          Center(
            child: BlocBuilder<CounterBloc, int>(
              builder: (context, state) {
                return Text(
                  '$state',
                  style: Theme.of(context).textTheme.headlineMedium,
                );
              },
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FloatingActionButton(
                onPressed: () {
                  counterBloc.add(DecrementCounter());
                },
                tooltip: 'Increment',
                child: const Icon(Icons.remove),
              ),
              const SizedBox(
                width: 10,
              ),
              FloatingActionButton(
                onPressed: () {
                  counterBloc.add(IncrementCounter());
                },
                tooltip: 'Increment',
                child: const Icon(Icons.add),
              ),
            ],
          )
        ],
      ),
    );
  }
}

Discussion