Nerd For Tech
Published in

Nerd For Tech

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 :

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.




NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit

Recommended from Medium

wrap_word: A Simple Ruby Method for Formatting CLI Output in Terminal

OpenCV Face-Detection Explained With Project

Numeral Systems Part 10

How industries are solving challenges using Ansible.

International Bridge Card Game Free Download For Android

How to Health Check Change

Lady diagnosing cancer

PHP — P41: Arrow Functions

PHP Arrow Functions

ElasticSearch Nested Field Type: The importance of defining the mapping of the index

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
Sajith vijesekara

Sajith vijesekara

Technical Lead. Passionate about cloud computing & web security | Freelance Mobile Developer | AWS Community Builder

More from Medium

Flutter Vs Kotlin: Best Framework for Cross-Platform App Development

Flutter Pinned View on Item List as Navigation Bar

Flutter Pagination With Caching data (SQLite database) — Part 2

Flutter Bottom Sheet — Everything you need to know