Flutter is a popular open-source framework for building cross-platform mobile applications. It provides a rich set of widgets and tools that make it easy to create beautiful and performant user interfaces. One of the common UI elements in mobile apps is a page indicator, which helps the user keep track of their position in a scrollable list or a series of pages. In this article, we will explore how to create an animated page indicator in Flutter.
To get started, make sure you have Flutter installed on your machine and a basic understanding of how to create a Flutter project. If you haven't installed Flutter yet, you can follow the official documentation to get started.
First, let's create a new Flutter project:
flutter create animated_page_indicator
cd animated_page_indicator
Next, open the project in your favorite code editor and navigate to the lib directory. Open the main.dart file and replace its contents with the following code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final PageController _controller = PageController();
final int _numPages = 3;
final List _pageColors = [
Colors.red,
Colors.green,
Colors.blue,
];
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
children: [
Expanded(
child: PageView.builder(
controller: _controller,
itemCount: _numPages,
itemBuilder: (BuildContext context, int index) {
return Container(
color: _pageColors[index],
);
},
),
),
AnimatedPageIndicator(
controller: _controller,
numPages: _numPages,
),
],
),
),
);
}
}
class AnimatedPageIndicator extends AnimatedWidget {
final PageController controller;
final int numPages;
AnimatedPageIndicator({
required this.controller,
required this.numPages,
}) : super(listenable: controller);
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(numPages, (int index) {
double opacity = (controller.page == index) ? 1.0 : 0.5;
return Opacity(
opacity: opacity,
child: Container(
margin: EdgeInsets.all(8.0),
width: 10.0,
height: 10.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
),
);
}),
);
}
}
In the code above, we define a new Flutter widget called AnimatedPageIndicator. This widget takes a PageController and the number of pages as parameters. It extends the AnimatedWidget class, which allows us to animate the page indicator based on the current page of the PageController.
Inside the build method of the AnimatedPageIndicator widget, we create a Row widget that contains a list of Container widgets. Each container represents a page indicator dot. We use the controller.page property to determine the opacity of each dot. If the current page matches the index of the dot, we set its opacity to 1.0, otherwise, we set it to 0.5.
Now, if you run the app using the flutter run command, you should see a scrollable list of colored pages with a page indicator at the bottom. As you scroll through the pages, the indicator dots should animate accordingly.
Feel free to customize the appearance of the page indicator by modifying the Container widget inside the AnimatedPageIndicator widget. You can change the size, color, and shape of the dots to match the design of your app.
That's it! You have successfully created an animated page indicator in Flutter. This can be a useful UI element in various scenarios, such as onboarding screens, image galleries, or any other situation where you need to indicate the user's position in a series of pages.
In this article, we explored how to create an animated page indicator in Flutter. We learned how to use the PageController and AnimatedWidget classes to animate the page indicator based on the current page. We also saw how to customize the appearance of the page indicator to match the design of our app.
Flutter provides a rich set of tools and widgets that make it easy to create beautiful and interactive user interfaces. The animated page indicator is just one example of the many UI elements you can create with Flutter. I hope this article has been helpful in expanding your knowledge of Flutter and its capabilities.
References
| Source | Link |
|---|---|
| Flutter Documentation | https://flutter.dev/docs |