BLOC basic Add Sub 큐빗과 함께

 

 

BLOC 도 add sub 를 만들어봅니다.

Cubit 과 함께 비교되게 한페이지에 같이 작성이 됩니다.

 

counter_bloc.dart

import 'package:bloc/bloc.dart';
import 'package:meta/meta.dart';
part 'counter_event.dart';

class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0) {
    on<CounterIncrement>((event, emit) {
      emit(state + 1);
    });
    on<CounterDecrement>((event, emit) {
      emit(state - 1);
    });
  }
}

 

BLOC는 cubit 과달리 event 처리를 해야한다.

 

counter_state.dart

part of 'counter_bloc.dart';

@immutable
abstract class CounterEvent {}

final class CounterIncrement extends CounterEvent {}

final class CounterDecrement extends CounterEvent {}

 

Home 화면으로 Cubit과 함께 BLOC를 같이 쓸 수 있습니다.

비교도 할겸 같이 만들어 보았습니다.

 

 

import 'package:flutter_bloc/flutter_bloc.dart';
import 'bloc/counter_bloc.dart';

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

  @override
  Widget build(BuildContext context) {
//큐빗
    final counterCubit = BlocProvider.of<CounterCubit>(context);
//블락
    final counterBloc = BlocProvider.of<CounterBloc>(context);
    return Scaffold(
      appBar: AppBar(title: Text('counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
//큐빗
            BlocBuilder<CounterCubit, int>(
              bloc: counterCubit,
              builder: (context, cubitstate) {
                return  Text('Cubit ${cubitstate}');
              },
            ),
//블락
            BlocBuilder<CounterBloc, int>(
              builder: (context, blocstate) {
                return  Text('BLOC ${blocstate}');
              },
            ),
            //  Text('${context.read<CounterCubit>().state}'),
         //   Text('Bloc ${state}'),
            // Text('${counterCubit.count}'),

//coubit
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                FloatingActionButton(
                  onPressed: () => counterCubit.increase(),
                  child: const Icon(Icons.add),
                ),
                Text('  Cubit  '),
                FloatingActionButton(
                  onPressed: () => context.read<CounterCubit>().decrease(),
                  child: const Icon(Icons.minimize),
                ),
              ],
            ),
 //Bloc
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                FloatingActionButton(
                  onPressed: () => counterBloc.add(CounterIncrement()),
                  child: const Icon(Icons.add),
                ),
                Text('  BLOC  '),
                FloatingActionButton(
                  onPressed: () =>  counterBloc.add(CounterDecrement()),
                  child: const Icon(Icons.minimize),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}