Explore Animated Loader In Flutter
The loader is utilized when the application is loading while information is coming from the Application programming interface or DataBase. The loader helps show loading when the application is in a loading state.
This article will Explore an Animated Loader In Flutter. We will perceive how to execute a demo program and we are going to learn about how we can create an animated loader using the loading_animation_widget package in your Flutter applications.
For Loading Animation:
loading_animation_widget | Flutter Package
Installation Add loading_animation_widget: to your pubspec.yaml dependencies then run flutter pub get dependencies…pub.dev
If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.
Table Of Contents::
Introduction:
This demo video shows how to create an animated loader in Flutter and how an animated loader will work using the loading_animation_widget package in your Flutter applications. We will show users different types of loaders. Users can choose one of the loaders for our projects. It will be shown on your device.
Demo Module::
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
flutter:
sdk: flutter
loading_animation_widget: ^latest version
Step 2: Import
import 'package:loading_animation_widget/loading_animation_widget.dart';
Step 3: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
We should adjust our main. dart file. We want to new class AnimatedLoaderDemo(). In this class first, we will add a variable _pageController.
late PageController _pageController;
We will create an integer variable _pageNo is equal to zero.
int _pageNo = 0;
Now, we will add the initState() method. In this method, we will add a _pageController equal to the PageController(initialPage: _pageNo).
@override
void initState() {
super.initState();
_pageController = PageController(initialPage: _pageNo);
}
We will add the code to the build method. Below we will define _forPreviousPage, _forNextPage, and animationList with the code.
@override
Widget build(BuildContext context) {
return PageView(
physics: const NeverScrollableScrollPhysics(),
controller: _pageController,
children: animationList
.map(
(appBody) => Scaffold(
backgroundColor: Colors.cyan.shade200,
appBar: (AppBar(
automaticallyImplyLeading: false,
title: const Text("Flutter Animated Loader Demo"),
centerTitle: true,
backgroundColor: Colors.cyan,
)),
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: MediaQuery.of(context).size.width / 6,
),
Text(
"Page : $_pageNo",
style: const TextStyle(fontSize: 20),
),
Expanded(
child: Center(
child: appBody.widget,
),
),
],
),
bottomNavigationBar: SafeArea(
top: false,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: const Icon(
Icons.chevron_left_rounded,
),
onPressed: _forPreviousPage,
),
IconButton(
icon: const Icon(
Icons.chevron_right_rounded,
),
onPressed: _forNextPage,
),
],
),
),
),
),
)
.toList(),
);
}
Now we will add the _forNextPage() method. In this method, which is helpful to go to the next page.
void _forNextPage() {
if (_pageNo + 1 < animationList.length) {
_pageController.jumpToPage(_pageNo + 1);
setState(() {
_pageNo++;
});
} else {
_pageController.animateToPage(
0,
duration: const Duration(milliseconds: 800),
curve: Curves.ease,
);
setState(() {
_pageNo = 0;
});
}
}
Now we will add the _forPreviousPage() method. In this method, which is helpful to go to the previous page.
void _forPreviousPage() {
if (_pageNo == 0) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text(
'Not any Page form Previous',
),
),
);
} else {
_pageController.jumpToPage(_pageNo - 1);
setState(() {
_pageNo--;
});
}
}
Now, we will create a new class that was AppBody and the code is below.
class AppBody {
final String title;
final Widget widget;
AppBody(
this.title,
this.widget,
);
}
Now we will add the animationList. We need to create a List whose type name will be same as above class name.
final animationList = <AppBody>[
AppBody(
'Loader',
const Text(
'Total animations: 5',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
),
),
),
AppBody(
'inkDropLoader',
LoadingAnimationWidget.waveDots(
color: Colors.redAccent,
size: 70,
),
),
AppBody(
'twistingDotsLoader',
LoadingAnimationWidget.twistingDots(
leftDotColor: const Color(0xFF1A1A3F),
rightDotColor: const Color(0xFFEA3799),
size: 70,
),
),
AppBody(
'threeRotatingDotsLoader',
LoadingAnimationWidget.threeRotatingDots(
color: Colors.white,
size: 70,
),
),
AppBody(
'staggeredDotsWaveLoader',
LoadingAnimationWidget.staggeredDotsWave(
color: Colors.white,
size: 70,
),
),
AppBody(
'fourRotatingDotsLoader',
LoadingAnimationWidget.fourRotatingDots(
color: Colors.white,
size: 70,
),
),
];
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:loading_animation_widget/loading_animation_widget.dart';
class AnimatedLoaderDemo extends StatefulWidget {
const AnimatedLoaderDemo({Key? key}) : super(key: key);
@override
State<AnimatedLoaderDemo> createState() => _AnimatedLoaderDemoState();
}
class _AnimatedLoaderDemoState extends State<AnimatedLoaderDemo> {
late PageController _pageController;
int _pageNo = 0;
@override
void initState() {
super.initState();
_pageController = PageController(initialPage: _pageNo);
}
@override
Widget build(BuildContext context) {
return PageView(
physics: const NeverScrollableScrollPhysics(),
controller: _pageController,
children: animationList
.map(
(appBody) => Scaffold(
backgroundColor: Colors.cyan.shade200,
appBar: (AppBar(
automaticallyImplyLeading: false,
title: const Text("Flutter Animated Loader Demo"),
centerTitle: true,
backgroundColor: Colors.cyan,
)),
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: MediaQuery.of(context).size.width / 6,
),
Text(
"Page : $_pageNo",
style: const TextStyle(fontSize: 20),
),
Expanded(
child: Center(
child: appBody.widget,
),
),
],
),
bottomNavigationBar: SafeArea(
top: false,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: const Icon(
Icons.chevron_left_rounded,
),
onPressed: _forPreviousPage,
),
IconButton(
icon: const Icon(
Icons.chevron_right_rounded,
),
onPressed: _forNextPage,
),
],
),
),
),
),
)
.toList(),
);
}
void _forNextPage() {
if (_pageNo + 1 < animationList.length) {
_pageController.jumpToPage(_pageNo + 1);
setState(() {
_pageNo++;
});
} else {
_pageController.animateToPage(
0,
duration: const Duration(milliseconds: 800),
curve: Curves.ease,
);
setState(() {
_pageNo = 0;
});
}
}
void _forPreviousPage() {
if (_pageNo == 0) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text(
'Not any Page form Previous',
),
),
);
} else {
_pageController.jumpToPage(_pageNo - 1);
setState(() {
_pageNo--;
});
}
}
}
class AppBody {
final String title;
final Widget widget;
AppBody(
this.title,
this.widget,
);
}
final animationList = <AppBody>[
AppBody(
'Loader',
const Text(
'Total animations: 5',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
),
),
),
AppBody(
'inkDropLoader',
LoadingAnimationWidget.waveDots(
color: Colors.redAccent,
size: 70,
),
),
AppBody(
'twistingDotsLoader',
LoadingAnimationWidget.twistingDots(
leftDotColor: const Color(0xFF1A1A3F),
rightDotColor: const Color(0xFFEA3799),
size: 70,
),
),
AppBody(
'threeRotatingDotsLoader',
LoadingAnimationWidget.threeRotatingDots(
color: Colors.white,
size: 70,
),
),
AppBody(
'staggeredDotsWaveLoader',
LoadingAnimationWidget.staggeredDotsWave(
color: Colors.white,
size: 70,
),
),
AppBody(
'fourRotatingDotsLoader',
LoadingAnimationWidget.fourRotatingDots(
color: Colors.white,
size: 70,
),
),
];
Conclusion:
In the article, I have explained the Animated Loader in a flutter; you can modify this code according to your choice. This was a small introduction to Animated Loader On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying the Animated Loader in your Flutter projects. We will show you what the Introduction is. Make a demo program for working on Animated Loader Using the loading_animation_widget package in your Flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a Flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
