今天要來介紹flutter_bloc，當程式碼越寫越多的時候，很常發生介面與邏輯全部都混在一起，且邏輯可能會有很多if else層層堆疊的狀況，這不僅讓程式碼越來越難維護，也會容易改A壞B的狀況。

今天要介紹的Bloc最核心的重點就是UI行為和商業邏輯分開，今天會先介紹Cubit，他適合簡易狀態的時候使用，也比較好入門

建立counter_cubit.dart
初始值設定方法
1.預設帶入0：CounterCubit() : super(0);
2.在使用CounterCubit時傳入：CounterCubit({required int count}): super(count);
在CounterCubit內建立兩個事件increment、decrement及reset
emit是觸發方法來更新狀態
state是拿到當前的狀態

import 'package:flutter_bloc/flutter_bloc.dart';

class CounterCubit extends Cubit<int> {
  CounterCubit({required int count}) : super(count);

  void increment() => emit(state + 1);
  void decrement() => emit(state - 1);
  void reset() => emit(0);
}

建立cubit_screen.dart
BlocProvider是提供底下的child Widgets有Cubit使用的環境
BlocBuilder當狀態改變時，Builder內的return Widget都會改變

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

import 'counter_cubit.dart';

class CubitScreen extends StatelessWidget {
  const CubitScreen({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Counter')),
        body: BlocProvider(
          create: (_) => CounterCubit(),
          child: BlocBuilder<CounterCubit, int>(builder: (context, count) {
            return Center(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  ElevatedButton(
                    onPressed: () {
                      context.read<CounterCubit>().decrement();
                    },
                    child: Icon(Icons.remove),
                  ),
                  Text(count.toString()),
                  ElevatedButton(
                    onPressed: () {
                      context.read<CounterCubit>().increment();
                    },
                    child: Icon(Icons.add),
                  ),
                ],
              ),
            );
          }),
        ));
  }
}