In this tutorial i will show you to create you simple slider in flutter. Flutter has many inbuilt widgets to create beautiful UI and manage them with state and stateless widgets. There is many packages to create the sliders in flutter application but today here i am going to share siple logic to create slider using PageView in flutter
We will use PageView to create the Slider and Timer to automatically change the page. PageView accepts multiple parameter to change te direction or initial page etc. You can also read our last article for vertical scroll in flutter.
So in this article i will cover PageView to create create slider in flutter by step by step
Step 1 : Create flutter project
Very first step is to create the fluter application using command line tool or in Android studio.
flutter create example_appThis will create a new project with name my_app then go in to the folder.
Step 2 : Create a widgets for slider
Now, Create a widget to slide the content.
File : lib/SliderWidget.dart
import 'package:flutter/material.dart';
class SliderWidget extends StatelessWidget {
final List<String> list = <String>['1', '2', '3', '4', '5'];
final PageController pageController = PageController(initialPage: 0);
SliderWidget({Key? key}) : super(key: key) {
Timer.periodic(const Duration(seconds: 2), (timer) {
int page = pageController.page!.ceil();
if (list.length - 1 > page) {
pageController.animateToPage(page + 1,
duration: const Duration(seconds: 1), curve: Curves.ease);
} else {
pageController.animateToPage(0,
duration: const Duration(seconds: 1), curve: Curves.ease);
}
});
}
List<Widget> buildContainers() {
return list
.map((e) => Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: NetworkImage("https://picsum.photos/200/200"),
fit: BoxFit.fill),
),
child: Container(
alignment: Alignment.bottomLeft,
margin: const EdgeInsets.only(bottom: 40, left: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(" Name of user " + e,
style: const TextStyle(
color: Colors.white, fontWeight: FontWeight.bold)),
Text(" subtitle " + e,
style:const TextStyle(color: Colors.white))
],
))))
.toList();
}
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(title: const Text("Readerstack")),
body: Container(
height: 200,
child:
PageView(controller: pageController, children: buildContainers()),
),
),
);
}
}
Here as you can see we have used PageView to build the slider view and also created a PageController to set initial page and TImer to slide it automatically.
Step 3 : Add Page to main file
Add you new pages to main.dart and start navigating.
import 'package:flutter/material.dart';
import 'package:example_app/SliderWidget.dart';
void main() => runApp(SliderWidget());Step 4: Run the project
Simply run the project using command line or in android studio to check the implementation.
flutter run lib/main.dartLive Preview:
How to change page in pageview in flutter ?
As you can see we have used Timer.periodic to run a timee and jumpToPage to animate the page with ease. jumpTOPage method change the current index of PageView as below
Timer.periodic(const Duration(seconds: 2), (timer) {
int page = pageController.page!.ceil();
if (list.length - 1 > page) {
pageController.animateToPage(page + 1,
duration: const Duration(seconds: 1), curve: Curves.ease);
} else {
pageController.animateToPage(0,
duration: const Duration(seconds: 1), curve: Curves.ease);
}
});