Develop faster with BLoC and Flutter hooks

Flutter package that simplifies injection and usage of Bloc/Cubit. The library is based on the concept of hooks originally introduced in React Native and adapted to Flutter. Flutter hooks allow you to extract view’s logic into common use cases and reuse them, which makes writing widgets faster and easier.

Motivation

When you want to use Bloc/Cubit in your application you have to provide an instance of the object down the widgets tree for state receivers. This is mostly achieved by BlocBuilder along with BlocProvider and enlarges complexity of the given widget.

Each time you have to use BlocBuilder, BlocListener or BlocSelector. What if we could use the power of Flutter hooks?

So, instead of this:

We can have this:

This code is functionally equivalent to the previous example. It still rebuilds the widget in the proper way and the right time. Whole logic of finding adequate Cubit/Bloc and providing current state is hidden in useBloc and useBlocBuilder hooks.

Full example can be found in here

Setup

Install package

Run command:

Or manually add the dependency in the pubspec.yaml

After that you can (it’s optional) initialize the HookedBloc:

Then you can simply start writing your widget with hooks:

Basics

Existing hooks

Hooked Bloc already comes with a few reusable hooks:

NameDescriptionuseBlocReturns required Cubit/BlocuseBlocFactoryReturns desired Cubit/Bloc by creating it with provided factoryuseBlocBuilderReturns current Cubit/Bloc state – similar to BlocBuilderuseBlocListenerInvokes callback – similar to BlocListeneruseActionListenerInvokes callback, but independent of Bloc/Cubit state

useBloc

useBloc hook tries to find Cubit using the cubit provider, or – if not specified – looks into the widget tree.

useBlocFactory

useBlocFactory hook tries to find factory using provided injection method and then returns cubit created by it

useBlocBuilder

useBlocBuilder hook rebuilds the widget when new state appears

useBlocListener

useBlocListener hook allows to observe cubit’s states that represent action (e.g. show Snackbar)

useActionListener

useActionListener hook is similar to the useBlocListener but listens to the stream different than state’s stream and can be used for actions that require a different flow of notifying.

Because of that your bloc/cubit must use BlocActionMixin

Then, consume results as you would do with useBlocListener

Contribution

We accept any contribution to the project!

Suggestions of a new feature or fix should be created via pull-request or issue.

feature request:

  • Check if feature is already addressed or declined
  • Describe why this is needed
  • Just create an issue with label enhancement and descriptive title. Then, provide a description and/or example code. This will help the community to understand the need for it.
  • Write tests for your hook
  • The test is the best way to explain how the proposed hook should work. We demand a complete test before any code is merged in order to ensure cohesion with existing codebase.
  • Add it to the README and write documentation for it
  • Add a new hook to the existing hooks table and append sample code with usage.

Fix

  • Check if bug was already found
  • Describe what is broken
  • The minimum requirement to report a bug fix is a reproduction path. Write steps that should be followed to find a problem in code. Perfect situation is when you give full description why some code doesn’t work and a solution code.
  • Write tests for your hook
  • The test should show that your fix corrects the problem. You can start with straightforward test and then think about potential edge cases or other places that can be broken.
  • Add it to the README and write documentation for it
  • If your fix changed behavior of the library or requires any other extra steps from user, this should be fully described in README.

--

--

--

iteo is an international technology consultancy & software engineering company, founded in Poland. Visit us on www.iteo.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Blue Whale Docker on AWS and How Enterprises Can Use it!

Comparing Crystal’s concurrency with that of Go (Part II)

Java Coding Standard

Releasing value in software development

Concord — A Digital Concordance

Three Major Improvements in HTTP/3 Compared to HTTP/2

Building and Testing a Game in Unity

Continuous Laravel Blueprint flow

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
iteo

iteo

iteo is an international technology consultancy & software engineering company, founded in Poland. Visit us on www.iteo.com

More from Medium

How to measure your Experience Levels for Flutter App Developer and how to improve?

Can Flutter be trusted for enterprise app development? Let’s know!

Hive database in Flutter - An overview

Flutter Bloc Architecture