🚀
【Flutter】最初のカウンターAppをBLoCパターンで書いてみた
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