본문 바로가기

Flutter

Cubit basic add sub 프로바이더인가

 

프로바이더 처럼 시작해보는 cubit 상태관리

counter_cubit.dart

 

class CounterCubit extends Cubit<int> {    // 입력값은 int
  CounterCubit() : super(0);    // 초기 값은 0 initial 설정가능
  void increase() {
    emit(state + 1);
  }
  void decrease() {
    emit(state - 1);
  }
}
 

counter_home.dart

를 프로바이더 처럼 꾸미면 아래 코드와 같다.

 

+ 주의점 : 좀더 좋은 코드는 사용되는 text 부분에서만 bloc를 사용 하는 것이

많은 화면을 갱신 하지 않고 부분만 갱신하기에 좋다.

class CountScreen extends StatelessWidget {
  CountScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final counterCubit = BlocProvider.of<CounterCubit>(context);

    return Scaffold(
      appBar: AppBar(title: Text('counter')),
      body: BlocBuilder<CounterCubit, int>(
        builder: (context, counter) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text(
                  'You have pushed the button this many times:',
                ),

                Text('${counter}'),

                FloatingActionButton(
                  onPressed: () => counterCubit.increase(),
                  child: const Icon(Icons.add),
                ),
                FloatingActionButton(
                  onPressed: () => context.read<CounterCubit>().decrease(),
                  child: const Icon(Icons.minimize),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}
 

비슷합니다. 특히 riverpod