Setting Intro Slider in Flutter Applications

May 13, 2020November 9, 2020 Dhrumil Shah 1 Comment Dart, Flutter, Slider

Introduction Screens play important role in mobile app because they give brief introduction of application on first time launch. Flutter provides intro slider widget to integrate introduction screens.

Users can swipe different screens through intro slider widget. You can also check out sample at HERE.

Introduction Screens help users to understand how the application works. These screens display various features of application. They expand user’s knowledge of your application. They are also referred as onboarding screens to introduce and application to users.

These screens set expectations of users about application because these are the first set of screen with which users can interact. These screens try to explain different functionalities of application in a short way. When we first introduce our product to users they want to know short introduction of product.

Add below line under dependencies section in pubspec file

intro_slider: ^2.2.9

Integrate Intro Slider Widget

Intro slider widget provides two parameters: slides and onDonePress. In slides parameter, we have to provide list of slide widgets. OnDonePress parameter provides callback to click on done button which is present at bottom in slider screens. Intro slider widget gives two default buttons Skip and Done in screens.

There are different parameters in slide widget. title param display title in introductions screens. Using description param you can give short description of particular screen about their usage. Slide widget also provides pathImage param to display image regarding particular section screen. You can also change background color of whole screen according to your requirement using backgroundColor parameter.

import 'package:flutter/material.dart';
import 'package:intro_slider/intro_slider.dart';
import 'package:intro_slider/slide_object.dart';

class Intro extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return IntroState();
  }
}

class IntroState extends State<Intro> {
  List<Slide> listSlides = [];

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return IntroSlider(
      slides: listSlides,
      onDonePress: onPressedDone,
    );
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    listSlides.add(Slide(
      title: "Premier League",
      description: "English Premier League or EPL",
      pathImage: "images/premier_league.jpg",
      backgroundColor: Colors.pinkAccent,
    ));
    listSlides.add(Slide(
      title: "La Liga",
      description: "The Campeonato Nacional de Liga de Primera División",
      pathImage: "images/laliga.png",
      backgroundColor: Colors.deepOrangeAccent,
    ));
    listSlides.add(Slide(
      title: "Bundesliga",
      description: "Federal League",
      pathImage: "images/bundesliga.jpg",
      backgroundColor: Colors.redAccent,
    ));
    listSlides.add(Slide(
      title: "Serie A",
      description: "Lega Nazionale Professionisti Serie A",
      pathImage: "images/serie_a.jpg",
      backgroundColor: Colors.blueAccent,
    ));
    listSlides.add(Slide(
      title: "Ligue 1",
      description: "Ligue 1 Conforama",
      pathImage: "images/ligue_one.png",
      backgroundColor: Colors.amberAccent,
    ));
  }

  onPressedDone() {

  }

}

Integrate in main.dart file

MaterialApp widget provides debugshowcheckedModeBanner and home parameters. debugshowcheckedModeBanner parameter is used to display debug label in top right of the device screen or not. We can set first widget which is displayed on the launch of application using home parameter in main.dart file.

import 'package:flutter/material.dart';
import 'package:flutterintroslidersample/intro.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Intro(),
    );
  }
}