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.
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 –
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).
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:
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.
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.
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:
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.