Skip to content
Related Articles

Related Articles

Flutter – Creating App Intro Screens

Improve Article
Save Article
  • Last Updated : 29 Aug, 2022
Improve Article
Save Article

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.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!