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};');
},
)
Author by
mmcib
Updated on November 28, 2022Comments
-
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.