How to add slider in flutter

You can add slider in flutter with the help of “intro_slider” plugin. To integrate this please follow below steps -

Add below line in your pubspace.yam file -

dependencies:

  intro_slider: ^2.2.0

Now click on “Package get” option from top section to get this package in your app.

Now, Import below package in your file -

import 'package:intro_slider/intro_slider.dart';

Note - Make sure to add your images in pubspace.yaml file like this -

assets:

  - assets/images/photo_eraser.png

  - assets/images/photo_pencil.png

  - assets/images/photo_ruler.png

Slider images for Android and iOS

Create a new class as below -

import 'package:flutter/material.dart';

import 'package:intro_slider/dot_animation_enum.dart';

import 'package:intro_slider/intro_slider.dart';

import 'package:intro_slider/slide_object.dart';

class TutorialScreen extends StatefulWidget{

  TutorialScreen({Key key}) : super(key: key);

  @override

  TutorialScreenState createState() => new TutorialScreenState();

}

class TutorialScreenState extends State<TutorialScreen>{

  List<Slide> slides = new List();

  @override

  void initState() {

    super.initState();

    slides.add(

      new Slide(

        title: "ERASER",

        description: "Allow miles wound place the leave had. To sitting subject no improve studied limited",

        pathImage: "assets/images/photo_eraser.png",

        backgroundColor: Color(0xfff5a623),

      ),

    );

    slides.add(

      new Slide(

        title: "PENCIL",

        description: "Ye indulgence unreserved connection alteration appearance",

        pathImage: "assets/images/photo_pencil.png",

        backgroundColor: Color(0xff203152),

      ),

    );

    slides.add(

      new Slide(

        title: "RULER",

        description:

        "Much evil soon high in hope do view. Out may few northward believing attempted. Yet timed being songs marry one defer men our. Although finished blessing do of",

        pathImage: "assets/images/photo_ruler.png",

        backgroundColor: Color(0xff9932CC),

      ),

    );

  }

  void onDonePress() {

    // Do what you want

  }

  @override

  Widget build(BuildContext context) {

    return new IntroSlider(

      slides: this.slides,

      onDonePress: this.onDonePress,

    );

  }

}

Now call this from your main.dart file by using below code -

class MyApp extends StatelessWidget {

  // This widget is the root of your application.

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Demo',

      theme: ThemeData(

        primarySwatch: Colors.blue,

      ),

      home: TutorialScreen(),

      debugShowCheckedModeBanner: false

    );

  }

}

This plugin have many options you can check all available options on below urls -

https://pub.dev/packages/intro_slider#-readme-tab-

Github url - https://github.com/duytq94/flutter-intro-slider