Flutter - cubit - changing boolean value inside cubit

302

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};');
          },
        )
Share:
302
mmcib
Author by

mmcib

Updated on November 28, 2022

Comments

  • mmcib
    mmcib over 1 year

    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.