Exploring Intro Slider In Flutter
Onboarding Screen is one o the most well-known that you can see in many applications subsequent to stacking Splash Screen. Onboarding Screen gives a short outline of an application. For the most part, Onboarding Screen comprises three to four designs that slide as we click on Next.
Notwithstanding the way that a user got to the application, the onboarding system should give sufficient data to an educational but interesting cycle while holding the new user.
This article will be Exploring Intro Slider In Flutter. We will see how to implement a demo program. Learn how to create a customizable and beautiful onboarding screen with the help of using the intro_slider package in your flutter applications.
intro_slider | Flutter Package
Flutter Intro Slider is a flutter plugin that helps you make a cool intro for your app. Create intro has never been…pub.dev
Table Of Contents::
Introduction:
Onboarding must likewise take special care of a huge area of users, going from users got from a showcasing effort, verbal, or seeing an application in the application store. Flutter Intro Slider assists you with making a cool introduction for your application. Making an introduction has never been simpler and quicker
Demo Module :
The above demo video shows how to create a beautiful onboarding screen in a flutter. It shows how onboarding will work using the intro_slider package in your flutter applications. It shows beautiful three designs that slide as we click on Next. It will be shown on your device.
IntroSlider Properties:
There are some properties of IntroSlider are:
- > slides — This property is used to make a list of slides you want to add as the intro to your app.
- > onSkipPress — This property is used to define a set of code that you can perform when the Skip Button is pressed.
- > onNextPress — This property is used to define a set of code that you can perform when the Next Button is pressed.
- > onDonePress — This property is used to define a set of code that you can perform when the Done Button is pressed.
- > rendrSkipBtn — This property is utilized to take a custom widget that we need to show instead of the Skip Button.
- > renderNextBtn — This property is utilized to take a custom widget that we want to display in place of the Next Button.
- > colorDot — This property is utilized to color for dots when passive.
Slide Widget Properties:
There are some properties of Slide are:
- > title — This property is utilized to take the top title for each Slide.
- > pathImage — This property is utilized to provide the image path for the Slide.
- > background color — This property is utilized to specify the background color for the Slide.
- > widgetTitle — This property is utilized to on-null, used instead of [title] and its relevant properties.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
flutter:
sdk: flutter
intro_slider:
Step 2: Add the assets
Add assets to pubspec — yaml file.
assets:
- assets/
Step 3: Import
import 'package:intro_slider/intro_slider.dart';
Step 4: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
In the main .dart file. We will create a list of <Slide> slides equal to the array bracket.
List<Slide> slides = [];
In the build method, we will return an IntroSlider method. In this method, we will create slides equal to the slides variable and also add colorActiveDot was white.
@override
Widget build(BuildContext context) {
return IntroSlider(
slides: slides,
colorActiveDot: Colors.white,
);
}
We will also create an initState() method. We will add three slides with title, description, pathImage, widthImage, and backgroundColor in our initState.
@override
void initState() {
super.initState();
slides.add(
Slide(
title: "Management",
description:
'Management is the administration of an organization, whether it is a business,'
' a non-profit organization, or a government body. ',
pathImage: "assets/onboarding0.png",
pathImage: 370,
widthImage: 400,
backgroundColor: const Color(0xff4266AC),
),
);
slides.add(
Slide(
title: "Chat",
description:
"Chat refers to the process of communicating, interacting and/or exchanging messages over the Internet. "
"It involves two or more individuals that communicate through a chat-enabled service or software. ",
pathImage: "assets/onboarding1.png",
heightImage: 370,
widthImage: 400,
backgroundColor: const Color(0xff3852B2),
),
);
slides.add(
Slide(
title: "Leadership",
description:
"Leadership is the ability of an individual or a group of individuals to influence and guide followers or other members of an organization. ",
pathImage: "assets/onboarding2.png",
heightImage: 370,
widthImage: 400,
backgroundColor: const Color(0xff2A78E6),
),
);
}
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_intro_slider_demo/splash_screen.dart';
import 'package:intro_slider/intro_slider.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Splash(),
);
}
}
class IntroSliderDemo extends StatefulWidget {
const IntroSliderDemo({Key? key}) : super(key: key);
@override
_IntroSliderDemoState createState() => _IntroSliderDemoState();
}
class _IntroSliderDemoState extends State<IntroSliderDemo> {
List<Slide> slides = [];
@override
Widget build(BuildContext context) {
return IntroSlider(
slides: slides,
colorActiveDot: Colors.white,
);
}
@override
void initState() {
super.initState();
slides.add(
Slide(
title: "Management",
description:
'Management is the administration of an organization, whether it is a business,'
' a non-profit organization, or a government body. ',
pathImage: "assets/onboarding0.png",
heightImage: 370,
widthImage: 400,
backgroundColor: const Color(0xff4266AC),
),
);
slides.add(
Slide(
title: "Chat",
description:
"Chat refers to the process of communicating, interacting and/or exchanging messages over the Internet. "
"It involves two or more individuals that communicate through a chat-enabled service or software. ",
pathImage: "assets/onboarding1.png",
heightImage: 370,
widthImage: 400,
backgroundColor: const Color(0xff3852B2),
),
);
slides.add(
Slide(
title: "Leadership",
description:
"Leadership is the ability of an individual or a group of individuals to influence and guide followers or other members of an organization. ",
pathImage: "assets/onboarding2.png",
heightImage: 370,
widthImage: 400,
backgroundColor: const Color(0xff2A78E6),
),
);
}
}
Conclusion:
In the article, I have explained the Intro Slider basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Intro Slider On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying the Intro Slider in your flutter projects. We will show you what is Introduction?. Make a demo program for creating a beautiful onboarding using the intro_slider in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
