How to create custom slider in flutter ?

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_app

This 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.dart

Live 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);
      }
    });

How to change page in pageview in flutter ?

Related Posts