vijaycreations
Published in

vijaycreations

Flutter Bloc — Bloc Pattern | HTTP POST request | JSON

In this article we will discuss about how to make http post request with the help of Bloc pattern.

📺 Video Tutorial

🛠️ Dependencies

🔭 Implementation

Sample Screens

  1. Creating states.

We totally have 4 states in this app (Initial, Loading, Loaded and Error states).

2. Creating Events

We totally 1 event in this app (SendData()) which is used for making a post request.

3. Mapping events to states

As soon as the ‘SendData’ event is triggered from pressing the search button in UI, We emit ‘Homepageloading’ state which will lasts for 3 seconds and then we will make a call to a method (fetchDetails()) that is written down separately inside the repository folder.

The API call (fetchDetails()) written in repository folder is as follows.,

The dart model class created for this app is shown below.,👇

4. Building up UI.

Well that’s it. 🥳🎉

This is how we can make use of bloc architecture to make HTTP request in flutter.

Get the complete source code here 👉: https://github.com/vijayinyoutube/post_api_bloc_app

Check out all my Flutter related blogs here.,👇

--

--

--

A list of Flutter Tutorials and app templates

Recommended from Medium

Async/await for wxPython

Tips and Tricks for Becoming a Great Release Manager

New Lambda Tunnel Binary For Better UI, Enhanced Security, Performance & More!

Galaxy Shooter 2D - Beginning #1

FEC Solo Week D1

Python Selenium all mouse actions using ActionChains

Python Selenium all mouse actions using ActionChains

In-depth guide on SLIs, SLOs and Error Budgets

Sitecore Go-live planning and checklist

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
Vijay R

Vijay R

Flutter Developer

More from Medium

Flutter Bloc — Bloc Pattern | HTTP request | decoding JSON bundle.

Flutter Hive(NoSQL) DataBase with CRUD operations (part 1/30)

Flutter Secured shared preferences

Edit / Modify flutter existing packages