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