{"id":7388,"date":"2021-08-13T11:34:33","date_gmt":"2021-08-13T11:34:33","guid":{"rendered":"https:\/\/www.getwidget.dev\/blogs\/flutter-shimmer\/"},"modified":"2024-11-21T11:50:12","modified_gmt":"2024-11-21T11:50:12","slug":"flutter-shimmer","status":"publish","type":"post","link":"https:\/\/www.getwidget.dev\/blog\/flutter-shimmer\/","title":{"rendered":"How to Create Custom Flutter Shimmer Animation"},"content":{"rendered":"

Flutter Shimmer<\/strong><\/a> is basically used to add effective flutter animations<\/a> while the content is loading. This enhances the look of the UI and makes it more responsive. We can use the shimmer animation effect by using the Flutter Shimmer package available for flutter applications.<\/p>\n

So, are you ready to make use of this widget package in the Flutter application? It adds styling to your component. This Flutter widget enhances the look of the widgets. If so, then let’s quickly jump into the usage and the ways a Shimmer can be modified and used to make user-friendly apps. Here I am going to use an open-source UI Library known as GetWidget to build this Shimmer widget in Flutter<\/a>. Inside scaffold, this can be designed, so before creating this we need to create a page with the scaffold.<\/p>\n

Design Custom Flutter Shimmer with GFwidget<\/h3>\n

GFShimmer<\/strong><\/a> is a Flutter Shimmer <\/strong>that adds beautiful animations while the content is loading from the servers. It enhances the look and feels of the content or we can say the widget. We can also use shimmer by giving Linear Gradient for a more visual shimmer effect or just by adding Main Colour and Secondary Color for the basic shimmer effect. It has customization options which is an easy way to handle it as per the application and its requirements.<\/p>\n

How to Get Started with Flutter Shimmer<\/h3>\n

Now here is the guide about how we should start developing the GFShimmer <\/strong>Widget with the use of the GetWidget<\/strong> UI Library.<\/p>\n

First, Let go with Getting started<\/strong><\/a><\/strong>, It will guide you on how to start building a beautiful flutter application<\/a> UI with the GetWidget<\/strong> UI library. Now, we have to install the GetWidget<\/strong> package from the pub.dev<\/strong> and use our 1000+ inbuilt Widget. To import the package in your Flutter project follow the below guide.<\/p>\n

Install Package from pub.dev :<\/em><\/p><\/blockquote>\n

https:\/\/pub.dev\/packages\/getwidget<\/strong><\/a> – Check the details about GetWidget Package.<\/strong><\/p>\n

Import full package:<\/h3>\n

import ‘package:getwidget\/getwidget.dart’;<\/p>\n

Note: dependencies: getwidget: ^ 4.0.0<\/strong><\/p>\n

Keep playing with the pre-built UI components.<\/em><\/p><\/blockquote>\n

Basic Flutter Shimmer in GFWidget<\/h3>\n

GFShimmer <\/strong>looks like the reflection of a wave or it can also be visualized as a distorted image. The basic GFShimmer<\/strong> code is given below:<\/p>\n

\"\"