This article will help you to get started with shimmer effect when loading with state management using provider. The final app looks as follows:
Provider
Provider is built by the community for the effective state management. Although it is not developed by google, it encourages to use it. It is easier to use and manage which is basically a wrapper around the Inherited Widgets.
Shimmer
Shimmer is loading effect that is used to add beautiful animation when the data is loading from server. In simple words, it is the loader like Circular Progress Indicator available in the Flutter framework.
Let’s Dig In
First of all, put all these dependencies in your pubsec.yaml
shimmer: ^2.0.0
provider: ^6.0.3
http: ^0.13.4
First create a New Flutter Project and run your example app. Then create a new folder named response inside the lib folder . Inside the response folder create the new dart file named response_data.dart. Here we will create the model for our api. We are getting test api from this link.
response_data.dart
Then we will create a provider class where we fetch the api.
getdata_provider.dart
Then, we create the widget that includes how our shimmer layout gonna be.
shimmer_layout.dart
Finally we will create the Homepage.
homepage.dart
At last our main.dart file.
main.dart
Lets get connected
We can friends. Find in Facebook, Linkedin, Github, Instagram, Medium.
Conclusion
I hope this article is helpful to you and you learned new things. I have used various things in this article that might be new for some of you.
If you learned something new or want to suggest something then please let me know in the comment.
If you loved the article click on 
icon which provides motivation on delivering you all with the new things.
Also follow to get updated on exciting articles and projects.
Learning by sharing gives great impact in learning process and making the community bigger and bigger.
Sharing is a magnet that attracts other enthusiast towards you.
Hence, lets take a small step on making our learning community bigger.
Share this article with your friends or tweet about this article if you loved it.
Get Full code at
shimmer_example
A new Flutter project.
Getting Started
This project is a starting point for a Flutter application.
A few resources to get you started if this is your first Flutter project:
For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.
Top comments (0)