In this blog, we’ll explore how to create a smooth and animated page indicator in Flutter, utilizing the smooth_page_indicator package.
Introduction:-
A smooth page indicator is a visual component that shows users which page they’re currently on in a paginated view, often accompanied by animations that transition smoothly when the page changes.
These indicators can significantly improve the UX of your Flutter apps, providing users with a more polished and professional interface.
A smooth transition between pages keeps users engaged and helps them track their position within a series of pages.
By adding animations, page indicators can become not only functional but also aesthetically pleasing.
Implementation:-
First, we need to create a new flutter project and add the following dependencies in the pubspec.yaml file.
|
1 2 3 4 |
dependencies: flutter: sdk: flutter smooth_page_indicator: ^1.2.0+3 |
Now, run the command “flutter pub get” to add the dependencies.
Add the following package to your class.
|
1 |
import 'package:smooth_page_indicator/smooth_page_indicator.dart'; |
Setting Up the PageView:-
|
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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
import 'package:flutter/material.dart'; import 'package:smooth_page_indicator/smooth_page_indicator.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: OnboardingScreen(), ); } } class OnboardingScreen extends StatefulWidget { @override _OnboardingScreenState createState() => _OnboardingScreenState(); } class _OnboardingScreenState extends State<OnboardingScreen> { // PageController to manage the PageView final PageController _controller = PageController(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("Smooth Page Indicator Example")), body: Column( children: [ // PageView widget displaying content Expanded( child: PageView( controller: _controller, children: [ OnboardingPage(title: "Welcome to the App!", color: Colors.blue), OnboardingPage(title: "Learn Flutter Easily", color: Colors.green), OnboardingPage(title: "Start Your Journey", color: Colors.orange), ], ), ), // SmoothPageIndicator for page navigation Padding( padding: const EdgeInsets.only(bottom: 16.0), child: SmoothPageIndicator( controller: _controller, count: 3, effect: WormEffect( dotHeight: 12, dotWidth: 12, spacing: 8, dotColor: Colors.grey, activeDotColor: Colors.blue, ), ), ), ], ), ); } } // Simple page widget to display different onboarding screens class OnboardingPage extends StatelessWidget { final String title; final Color color; OnboardingPage({required this.title, required this.color}); @override Widget build(BuildContext context) { return Container( color: color, child: Center( child: Text( title, style: TextStyle(fontSize: 24, color: Colors.white), ), ), ); } } |
The SmoothPageIndicator widget offers several animation effects that can be used to customize the indicator.
By default, the indicator dots are simple, but we can apply various effects for a more visually appealing experience.
In the example above, we used the WormEffect, which gives a smooth, flowing animation as the user swipes through the pages. But there are a few other effects you can use:
DotEffect: Simple circular dots that animate.
JumpingDotEffect: Dots “jump” as the page changes.
SlidingEffect: Dots slide horizontally.
CustomizableEffect: Custom page indicator with scaling, rotation, and colour changes as the user navigates between pages.
Output:-
Smooth and animated page indicator in flutter
These indicators can significantly improve the UX of your Flutter apps, providing users with a more polished and professional interface.
Conclusion:-
That’s it! You’ve successfully implemented smooth and animated Page Indicator in Flutter.
You can also check other blogs from here.
Hope this blog helped you to better understand the how to create smooth and animated Page Indicator in Flutter.
Thanks for reading this blog ❤️