vessel_bloc

Description:

vessel bloc

vessel_flutter wrapper for bloc package
Setup #
Add BlocProviderAdapter to ProviderContainer.adapters:
void main() {
final container = ProviderContainer(
adapters: [BlocProviderAdapter()],
);
// ...
}
copied to clipboard
Usage #
Lets take a look at how to use BlocProvider to provide a CounterCubit to a CounterPage and react to state changes with BlocBuilder.
counter_cubit.dart #
final counterCubitProvider = BlocProvider<CounterCubit, int>((_) => CounterCubit());

class CounterCubit extends Cubit<int> {
CounterCubit() : super(0);
void increment() => emit(state + 1);
void decrement() => emit(state - 1);
}
copied to clipboard
main.dart #
void main() => runApp(
// For widgets to be able to read providers, we need to wrap the entire
// application in a "ProviderScope.root" widget.
ProviderScope(
child: CounterApp(),
),
);
class CounterApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: CounterPage(),
);
}
}
copied to clipboard
counter_page.dart #
class CounterPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Counter')),
body: counterCubitProvider.builder(
builder: (context, count) => Center(child: Text('$count')),
),
floatingActionButton: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () => counterCubitProvider.of(context).increment(),
),
const SizedBox(height: 4),
FloatingActionButton(
child: const Icon(Icons.remove),
onPressed: () => counterCubitProvider.of(context).decrement(),
),
],
),
);
}
}
copied to clipboard
Listen for changes #
final counterCubitProvider = BlocProvider<CounterCubit, int>(
(_) => CounterCubit(),
);

...

Widget build(BuildContext context) {
return counterCubitProvider.listener(
listener: (context, state) {
print("Counter: $state")
},
child: Text(...),
);
}
copied to clipboard
Several listeners: #
Widget build(BuildContext context) {
return MultiBlocListener(
listeners: [
counterCubitProvider.listener(
listener: (context, state) {
print("Counter: $state");
},
),
themeCubitProvider.listener(
listener: (context, state) {
print("Theme: $state");
},
),
],
child: Text(...),
);
}
copied to clipboard
Filter states #
If we want to trigger listener only when counter's state is even:
counterCubitProvider.listener(
listenWhen: (previousState, currentState) => currentState % 2 == 0,
listener: (context, state) {
print("Counter: $state");
},
),
copied to clipboard
Consumer - combine builder and listener into single widget #
counterCubitProvider.consumer(
listenWhen: (previousState, currentState) => currentState % 2 == 0,
listener: (context, state) {
print("Counter: $state")
},
buildWhen: (_, currentState) => currentState % 2 != 0,
builder: (context, state) => Text("Only odd count: $state"),
);
copied to clipboard
Selector #
selector is analogous to builder but allows developers to filter updates by selecting a new value based on the current bloc state. Unnecessary builds are prevented if the selected value does not change. The selected value must be immutable in order for selector to accurately determine whether builder should be called again.
counterCubitProvider.selector<bool>(
selector: (context, state) => state % 2 == 0,
builder: (context, state) => Text("isEven: $state"),
);
copied to clipboard
Widgets #
Every provider's method has it's Widget counterpart:

.builder -> BlocBuilder<Bloc, State>
.listener -> BlocListener<Bloc, State>
.consumer -> BlocConsumer<Bloc, State>
.selector<SelectedState> -> BlocSelector<Bloc, State, SelectedState>

which are more suitable, if you want to define your bloc outside of vessel
Example
class _MyAppState extends State<MyApp> {
final bloc = MyBloc();

void dispose() {
bloc.close();
super.dispose();
}

Widget build(BuildContext context) => BlocBuilder<MyBloc, MyState>(
bloc: bloc,
builder: (context, state) => ... // build widget tree based on state
);
}
copied to clipboard
How to define Repositories? #
You could use vessel's Provider for that:
final userRepositoryProvider = Provider((_) => UserRepository());

final userProfileCubitProvider = BlocProvider.factory<UserProfileCubit, User, int>(
(read, int userId) => UserProfileCubit(
userId: userId,
repository: read(userRepositoryProvider),
),
);

// ...

Widget builder(BuildContext context) {
return userProfileCubitProvider(1).builder(
builder: (context, state) => Text("username: ${state.name}"),
);
}
copied to clipboard
How to scope, dispose and override cubits? #
Check out vessel_flutter documentation
Credits #
Credits to Felix Angelov for creating such an amazing package.
Also, I've taken several documentation pieces from flutter_bloc