In this blog we learn about how to create animated loader
Introduction
The loader is use when the application is loading while data in coming from API or DataBase,
Loader is useful to show loading when the app is in loading state.
You may also check our Flutter app development services.
Implementation
First of all we have need to create a new flutter project and Add the following dependency in pubspec.yaml file.
|
1 |
loading_animation_widget: ^1.2.0+4 |
loading_animation_widget:-> Inside this dependency we have multiple static method for each animation inside LoadingAnimationWidget of class and which return Object of animation.
We need to create a StatefulWidget (AnimatedLoaderPage) main.dart and after that import this package
|
1 |
import 'package:loading_animation_widget/loading_animation_widget.dart'; |
After Importing dependency and package, we need to add following code inside AnimatedLoaderPage class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
class _AnimatedLoaderPageState extends State<AnimatedLoaderPage> { 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( appBar: (AppBar( title: Text("Animated Loader"), )), body: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ SizedBox(height: MediaQuery.of(context).size.width/6,), Text("Page : ${_pageNo}",style: 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(), ); } |
After writing that code we need to add the method which is helpful to going to next page.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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; }); } } |
and after that we need to add an another method which is helpful to take the previous page
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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--; }); } } } |
Above both method is call form AnimatedLoaderPage class.
after that we need to create a another class AppBody and add the following code
|
1 2 3 4 5 6 7 8 |
class AppBody { final String title; final Widget widget; AppBody( this.title, this.widget, ); } |
After implement above code we need to create a List whose type name will be same as above class name
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
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: _kSize, ), ), AppBody( 'twistingDotsLoader', LoadingAnimationWidget.twistingDots( leftDotColor: const Color(0xFF1A1A3F), rightDotColor: const Color(0xFFEA3799), size: _kSize, ), ), AppBody( 'threeRotatingDotsLoader', LoadingAnimationWidget.threeRotatingDots( color: Colors.white, size: _kSize, ), ), AppBody( 'staggeredDotsWaveLoader', LoadingAnimationWidget.staggeredDotsWave( color: Colors.white, size: _kSize, ), ), AppBody( 'fourRotatingDotsLoader', LoadingAnimationWidget.fourRotatingDots( color: Colors.white, size: _kSize, ), ), ]; |
After Implementing above all code our Animated loader in created.
OutPut
Conclusion
In this blog we have discussed about Animated Loader In Flutter
I hope this blog is helpful to to understand this topic.
for more flutter development visit on Mobikul Blog.
Thanks for Reading this article.
References:–> Animated Loader In Flutter