Flutter – Creating App Intro Screens

Flutter is known for its easiness to create cross-platform applications. Either it is creating introduction screens for the app or any screen. We got an easy way to create Intros for the app using the intro_slider library of Flutter. In this article, we are going to implement it in the sample app. 

In this sample app, we are creating three slides, that consist of text, background image, background color, skip and done buttons, etc.

Implementation:

Step 1: Install the package in the pubspec.yaml file.

Dart

intro_slider: ^2.2.9

Now, run pub get in the terminal of your IDE. Or we can add the dependency using the following command – 

Dart

flutter pub add intro_slider

This will add dependency in the pubspec.yaml file.

Step 2: Now, it’s time to import the library in the working file(main.dart).

Dart

import 'package:intro_slider/intro_slider.dart';

Step 3: Create an assets folder in the project to add images to the screen. Then run pub get to save the changes in the pubspec.yaml file.

Step 4: To create slides object, slides screen, and to give behavior to slides, we need to import multiple files as given below:

Dart

import 'package:intro_slider/intro_slider.dart';
import 'package:intro_slider/slide_object.dart';
import 'package:intro_slider/scrollbar_behavior_enum.dart';

Now, let us create a List of Slide objects.

Dart

List<Slide> slides = [];

  @override
  void initState() {
    super.initState();

    // initializing slides at the runtime of app
    slides.add(
      new Slide(
        title: "GeeksForGeeks ",
        maxLineTitle: 2,
        styleTitle: TextStyle(
          color: Colors.green,
          fontSize: 30.0,
          fontWeight: FontWeight.bold,
        ),
        description:
            "GeeksForGeeks present you the intro_slider
            tutorial making your learning phase Easier.",
        styleDescription: TextStyle(
          color: Colors.green,
          fontSize: 20.0,
        ),
        marginDescription:
            EdgeInsets.only(left: 20.0,
                            right: 20.0,
                            top: 20.0,
                            bottom: 70.0),
        backgroundColor: Colors.yellow,
        directionColorBegin: Alignment.topLeft,
        directionColorEnd: Alignment.bottomRight,
        onCenterItemPress: () {},
      ),
    );
    slides.add(
      new Slide(
        title: "Second Slide",
        styleTitle: TextStyle(
          color: Colors.white,
          fontSize: 30.0,
          fontWeight: FontWeight.bold,
        ),
        description: "Do video call anywhere anytime with this app.",
        styleDescription: TextStyle(
          color: Colors.white,
          fontSize: 20.0,
        ),
        backgroundImage: "assets/image1.png",
        directionColorBegin: Alignment.topRight,
        directionColorEnd: Alignment.bottomLeft,
      ),
    );
    slides.add(
      new Slide(
        title: "Third Slide",
        styleTitle: TextStyle(
          color: Colors.white,
          fontSize: 30.0,
          fontWeight: FontWeight.bold,
        ),
        description: "Now track the location with this app easily.",
        styleDescription: TextStyle(
          color: Colors.white,
          fontSize: 20.0,
        ),
        backgroundImage: "assets/image2.png",
        directionColorBegin: Alignment.topCenter,
        directionColorEnd: Alignment.bottomCenter,
        maxLineTextDescription: 3,
      ),
    );
  }

Step 5: Call IntroSlider() widget and assign values to its properties. It is easy to customize IntroSlider() widget and add as many slides as we want. We can define skip, done, and next buttons, customize tabs and dots. Below is a sample of a simple widget.

Dart

IntroSlider(
      slides: this.slides,
      renderSkipBtn: TextButton(
          onPressed: () {},
          child: Text(
            "Skip",
            style: TextStyle(fontSize: 20),
          )),
      renderNextBtn: Icon(
        Icons.navigate_next,
        color: Colors.green,
        size: 40.0,
      ),
      renderDoneBtn: TextButton(
          onPressed: () {},
          child: Text("Done", style: TextStyle(fontSize: 20))),
      colorDot: Colors.green,
      colorActiveDot: Colors.green,
      sizeDot: 13.0,
      hideStatusBar: true,
      backgroundColorAllSlides: Colors.black,
    );

Output:

Complete Source Code:

Dart

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: IntroScreen(),
    );
  }
}

class IntroScreen extends StatefulWidget {
  @override
  _IntroScreenState createState() => _IntroScreenState();
}

class _IntroScreenState extends State<IntroScreen> {

  // creating List of Slide objects
  // to store data of all intro slides
  List<Slide> slides = [];

  @override
  void initState() {
    super.initState();

    // initializing slides at
    // the runtime of app
    slides.add(
      new Slide(
        title: "GeeksForGeeks ",
        maxLineTitle: 2,
        styleTitle: TextStyle(
          color: Colors.green,
          fontSize: 30.0,
          fontWeight: FontWeight.bold,
        ),
        description:
            "GeeksForGeeks present you the intro_slider
            tutorial making your learning phase Easier.",
        styleDescription: TextStyle(
          color: Colors.green,
          fontSize: 20.0,
        ),
        marginDescription:
            EdgeInsets.only(left: 20.0,
                            right: 20.0,
                            top: 20.0,
                            bottom: 70.0),
        backgroundColor: Colors.yellow,
        directionColorBegin: Alignment.topLeft,
        directionColorEnd: Alignment.bottomRight,
        onCenterItemPress: () {},
      ),
    );
    slides.add(
      new Slide(
        title: "Second Slide",
        styleTitle: TextStyle(
          color: Colors.white,
          fontSize: 30.0,
          fontWeight: FontWeight.bold,
        ),
        description: "Do video call anywhere anytime with this app.",
        styleDescription: TextStyle(
          color: Colors.white,
          fontSize: 20.0,
        ),
        backgroundImage: "assets/image1.png",
        directionColorBegin: Alignment.topRight,
        directionColorEnd: Alignment.bottomLeft,
      ),
    );
    slides.add(
      new Slide(
        title: "Third Slide",
        styleTitle: TextStyle(
          color: Colors.white,
          fontSize: 30.0,
          fontWeight: FontWeight.bold,
        ),
        description: "Now track the location with this app easily.",
        styleDescription: TextStyle(
          color: Colors.white,
          fontSize: 20.0,
        ),
        backgroundImage: "assets/image2.png",
        directionColorBegin: Alignment.topCenter,
        directionColorEnd: Alignment.bottomCenter,
        maxLineTextDescription: 3,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return new IntroSlider(

      // List slides
      slides: this.slides,

      // Skip button
      renderSkipBtn: TextButton(
          onPressed: () {},
          child: Text(
            "Skip",
            style: TextStyle(fontSize: 20),
          )),

      // Next button
      renderNextBtn: Icon(
        Icons.navigate_next,
        color: Colors.green,
        size: 40.0,
      ),
      // Done button
      renderDoneBtn: TextButton(
          onPressed: () {},
          child: Text("Done",
                      style: TextStyle(fontSize: 20))),

      // Dot indicator
      colorDot: Colors.green,
      colorActiveDot: Colors.green,
      sizeDot: 13.0,

      // Show or hide status bar
      hideStatusBar: true,
      backgroundColorAllSlides: Colors.black,

      // Scrollbar
      verticalScrollbarBehavior: scrollbarBehavior.SHOW_ALWAYS,
    );
  }
}

Output:

Now we can create beautiful intro screens for our applications easily.