Flutter Provider along with Http request

YouTube and Medium are flooded with tutorials for Provider package and Http APIs package but there are not many for using provider along with http.

No problem, let me help you with this…..

Provider : https://pub.dev/packages/provider

Http: https://pub.dev/packages/http

Gain knowledge about Provider and Http with pub extremely helpful documentation for better understanding about how these packages work.

SO LET’S BEGIN

Create a new Flutter project and name it anything you like
and go to pubspec.yaml, add packages provider and http

provider: ^4.3.2+3
http: ^0.12.2

Lets have a look on the main.dart file

Here only ChangeNotifierProvider initialised for its availability through entire application.

For this project I have used JsonPlaceholder API : https://jsonplaceholder.typicode.com/photos

For using Provider or http, flutter need model to be created for a particular API data,

If you are thinking it will take lots of time for creating a model for every API you use, than https://app.quicktype.io/ will help you to convert JSON format to dart.

Now let’s create Provider class:

Now homeScreen.dart, where we will represent API call data in a list view using Consumer and Provider.of<ProviderClass>(context, listen: false) for API calls.

Consumer Class : https://pub.dev/documentation/provider/latest/provider/Consumer-class.html

Now if you remember we have created a dummy variable to check if provider class is working perfectly or not, there is a navigation button with redirects to another page where the count can be increased using onPressed : Provider.of<ProviderClass>(context, listen: false).count += 1;

I hope this Helped you……
Github Repository : https://github.com/ArpitSharma2800/Flutter-Provider-With-http-package

--

--

--

Software Engineer (SIH2020 winner | React developer | Flask web framework | Redux | Flutter | Mongodb | REST APIs | ) | Ex Bajaj Finserv health intern

Recommended from Medium

Best Practices for Custom Layouts in Push Notifications

Effective migration to Kotlin on Android

Exploring Android P: Enhanced Notifications

Secure Data in Android Room DataBase

Bloody (Android) Handlers

Jetpack’s Navigation Component (Complete Guide for Beginners)

Build your own Android AR Core app with ConfigWise SDK

Building a Design System implementation using Jetpack Compose — Part2

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
Arpit Sharma

Arpit Sharma

Software Engineer (SIH2020 winner | React developer | Flask web framework | Redux | Flutter | Mongodb | REST APIs | ) | Ex Bajaj Finserv health intern

More from Medium

Integrating Fidel API with Flutter

Custom Option Selection Widget — Flutter.

Definitive Guide to Unit, Widget and Integration Testing Flutter Apps!

Missing Console Output in IntelliJ Plugin of Flutter?