What is the use of BlocSelector in flutter_bloc - flutter

Question

There is no example found for the usage of BlocSelector. Anyone knows the real usage of it?

Answer 1

Using this widget, developers can filter updates based on the current state of the bloc.
I have one solution of number counter-example, maybe its helpful for us
it's my main.dart file
import 'package:flutter/material.dart';
import 'package:untitled/counter_cubit.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
void main() => runApp(const App());
class App extends StatelessWidget {
const App({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MultiBlocProvider(
providers: [
BlocProvider<CounterCubit>(
create: (BuildContext context) => CounterCubit(),
),
],
child: const BlocListenerCounterPage(),
),
);
}
}
class BlocListenerCounterPage extends StatelessWidget {
const BlocListenerCounterPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Counter')),
body: BlocSelector<CounterCubit, int, bool>(
selector: (state) => state.isEven ? true : false,
builder: (context, booleanState) {
return Center(
child: booleanState
? Text('$booleanState')
: Icon(Icons.integration_instructions));
},
),
floatingActionButton: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () => context.read<CounterCubit>().increment(),
),
const SizedBox(height: 4),
FloatingActionButton(
child: const Icon(Icons.remove),
onPressed: () => context.read<CounterCubit>().decrement(),
),
],
),
);
}
}
and its my counter_cubit.dart (viewModel) class
import 'package:flutter_bloc/flutter_bloc.dart';
class CounterCubit extends Cubit<int> {
CounterCubit() : super(0);
void increment() => emit(state + 1);
void decrement() => emit(state - 1);
}
Basically this example,
I am showing the Text widget when the number is even and when it's not even I am showing the Icon widget.

Answer 2

BlocSelector<AuthViewModel, BaseEntityState, bool>(
selector: (state) => state.user.isAuthenticated,
builder: ((context, isAuthenticated) {
return FloatingActionButton(
onPressed: doSomething,
child: isAuthenticated
? Icon(Icons.logout_outlined)
: Icon(Icons.login_outlined),
);
}

Answer 3

Imagine a bool variable which changes the value onPressed of a widget and rebuilds the specific widget according to the value.
class Sample extends StatefulWidget {
const Sample({Key? key}) : super(key: key);
#override
State<Sample> createState() => _SampleState();
}
class _SampleState extends State<Sample> {
bool foo = false;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: ElevatedButton(
onPressed: (foo) ? null : () {},
child: (foo) ? const Text('Disabled') : const Text('Enabled'),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
foo = !foo;
});
},
child: Icon(
(foo) ? Icons.flash_off : Icons.flash_auto,
color: Colors.white,
)),
);
}
}
Here, onPressed of FloatingActionButton the ElevatedButton is disabled and enabled. The same can be achieved with BlocSelector.
class Sample extends StatelessWidget {
const Sample({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return BlocSelector<SubjectBloc, SubjectState, bool>(
selector: (foo) {
//Here you change the value according to the states and return it
},
builder: (context, foo) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: ElevatedButton(
onPressed: (foo) ? null : () {},
child: (foo) ? const Text('Disabled') : const Text('Enabled'),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
foo = !foo;
});
},
child: Icon(
(foo) ? Icons.flash_off : Icons.flash_auto,
color: Colors.white,
)),
);
},
);
}
}
The best part is you can change the widget to Stateless
You can find in detail about BlocSelector class here