Flutter Design Patterns [Bloc] With Network Layer

Why we need Design Patterns

First we check why we need design patterns in mobile development. Now a days mobile development frameworks support different kind of Design patterns. These are the most common used design patterns in mobile frameworks.

• MVC - (Model View Controller)

• MVVM (Model View - View Model)

How MVVM pattern Works

Design patterns make UI designs flexible. And it will give support to enhance the features without worrying about breaking existing product.

Why need Design Patterns in Flutter ?

Unlike we do the changes in native android or IOS development flutter have UI & code-base in single class file. Sometimes It is really hard to understand the code. Due to this reason Flutter developers need to follow best practices when doing the development. And other thing is application needs to follow one of the design patterns to make more readable & flexible.

Bloc Design Pattern

Business logic components (BLoC) is simply State Management Design pattern. Bloc support to separate the business logic with UI. In Bloc Pattern It consumes stream of Events & do the logic & gives the stream of states. It is really easy with separate logic & UI components

How bloc pattern works

Movie List Application

We are going to write simple application which shows the list of movies from Movie Database API & show As List in Application.

Dependency Required for Application

dependency for project

This is the API We are going to retrieve movie list information.

Url : https://movie-booking-api.herokuapp.com/movies/all

We have to write domain object class, api provider class & repository class.

Step 1. Create MovieItem class

Step 2. Create API Provider class

Step 3. Create repository class

And then we have to identify the state changes in Application when user requesting to load movie list.

Step 4. As for above flow diagram we have to create status.

As a Next Step We have to identify the user Events which required for this states.

Step 5. Create abstract class for fetch movies Event.

Step 6. Create Bloc Class

Step 6. Finally Integrate to flutter UI

And create widget.

And create movie state page class.

main dart

Then finally It will show the list of movies available in API.

This Project will be available in here. Feel free to share & put your comments here.