What is the use of BlocSelector in flutter_bloc

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

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

Answer 3

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),
          );
   }