Flutter - cubit - changing boolean value inside cubit

Question

I would like to change bool values from the cubit, but I can't figure out how to do it.

What I want to achieve is, for instance: if (boolean value stored in cubit is true) "show widget A" : "show widget B"

My code:

class ChangeBoolCubit extends Cubit<bool> {
  ChangeBoolCubit() : super(false);

  bool one = false;
  bool two = true;

  void changeValue(bool booleanToChange) {
    booleanToChange = !state;
    emit(booleanToChange);
  }
}

View:

class BoolView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Changing Bool')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Center(
            child: BlocBuilder<ChangeBoolCubit, bool>(
              builder: (context, state) {
                return (ChangeBoolCubit().one)
                    ? Text('TRUE: ${ChangeBoolCubit().one}')
                    : Text('FALSE: ${ChangeBoolCubit().one};');
              },
            ),
          ),
          Center(
            child: BlocBuilder<ChangeBoolCubit, bool>(
              builder: (context, state) {
                return (ChangeBoolCubit().two)
                    ? Text('TRUE: ${ChangeBoolCubit().two}')
                    : Text('FALSE: ${ChangeBoolCubit().two};');
              },
            ),
          ),
      ],),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            child: const Icon(Icons.add),
            onPressed: () => context.read<ChangeBoolCubit>().changeValue(ChangeBoolCubit().one),
          ),
          const SizedBox(height: 8),
          FloatingActionButton(
            child: const Icon(Icons.remove),
            onPressed: () => context.read<ChangeBoolCubit>().changeValue(ChangeBoolCubit().two),
          ),
        ],
      ),
    );
  }
}

I'm sorry for probably that trivial question, but I'm new to Cubit/Bloc.

Victor Kwok · Accepted Answer · 2021-12-03T11:09:26.757

You should use the state in the BlocBuilder.

For example:

BlocBuilder<ChangeBoolCubit, bool>(
          builder: (context, state) {
            return state
                ? Text('TRUE: ${ChangeBoolCubit().one}')
                : Text('FALSE: ${ChangeBoolCubit().one};');
          },
        )

However, I think this is what you want:

class ChangeBoolState {
    final bool one;
    final bool two;
    ChangeBoolState({this.one = false, this.two = true});
    ChangeBoolState copyWith({
        bool? one,
        bool? two,
    }){
        return RegisterState(
            one: one != null ? one : this.one,
            two: two != null ? two : this.two
        );
    }
}

class ChangeBoolCubit extends Cubit<ChangeBoolState> {
    void changeOne() {
        emit(state.copyWith(
            one: !state.one,
        ));
    }
}

then use it like this:

BlocBuilder<ChangeBoolCubit, bool>(
          builder: (context, state) {
            return state.one
                ? Text('TRUE: ${state.one}')
                : Text('FALSE: ${state.two};');
          },
        )

Flutter - cubit - changing boolean value inside cubit

1 Answers1