GitLocker: The Coding Marketplace

Description:

introduction slider

Become a sponsor #

Introduction Slider #
An introduction slider has some screens that can use to describe your application. You can describe your application's title, description, logo, etc. It comes with several features.
Here is an example of how to implement IntroductionSlider in a Flutter application.
IntroductionSlider(
items: [
IntroductionSliderItem(
logo: FlutterLogo(),
title: Text("Title 1"),
backgroundColor: Colors.red,
),
IntroductionSliderItem(
logo: FlutterLogo(),
title: Text("Title 2"),
backgroundColor: Colors.green,
),
IntroductionSliderItem(
logo: FlutterLogo(),
title: Text("Title 3"),
backgroundColor: Colors.blue,
),
],
done: Done(
child: Icon(Icons.done),
home: HomePage(),
),
next: Next(child: Icon(Icons.arrow_forward)),
back: Back(child: Icon(Icons.arrow_back)),
dotIndicator: DotIndicator(),
)
copied to clipboard
IntroductionSlider Properties #

Property
Type
Description

items:
List<IntroductionSliderItem>
Defines the appearance of the introduction slider items that are arrayed within the introduction slider.

done:
Done
The Done that is used to navigate to the target page.

back:
Back
The Back that is used to navigate to the previous page.

next:
Next
The Next that is used to navigate to the next page.

initialPage:
int
The initial page index of the introduction slider.

doIndicator:
DotIndicator
The DotIndicator that is used to indicate dots.

physics:
ScrollPhysics
Determines the physics of a [Scrollable] widget.

scrollDirection:
Axis
The two cardinal directions in two dimensions.

showStatusBar:
bool
Show and hide app status/navigation bar on the introduction slider.

IntroductionSliderItem #
It is used to describe the title, subtitle, logo, etc. of the introduction slider.
Here is an example of how to implement IntroductionSliderItem with background color.

IntroductionSliderItem(
logo: FlutterLogo(),
title: Text("Introduction Slider Title"),
subtitle: Text("Introduction Slider Subtitle"),
backgroundColor: Colors.red
)
copied to clipboard
Here is an example of how to implement IntroductionSliderItem with gradient background.

IntroductionSliderItem(
logo: FlutterLogo(),
title: Text("Introduction Slider Title"),
subtitle: Text("Introduction Slider Subtitle"),
gradient: LinearGradient(
colors: [
Colors.cyan,
Colors.indigo,
],
),
)
copied to clipboard
Here is an example of how to implement IntroductionSliderItem with background image.

IntroductionSliderItem(
logo: FlutterLogo(),
title: Text("Introduction Slider Title"),
subtitle: Text("Introduction Slider Subtitle"),
backgroundImageDecoration: BackgroundImageDecoration(
image: AssetImage("assets/images/larry_page.jpg"),
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.6),
BlendMode.darken,
),
fit: BoxFit.cover,
opacity: 1.0,
),
)
copied to clipboard
IntroductionSliderItem Properties #

Property
Type
Description

logo:
Widget
Logo of the introduction slider.

title:
Widget
Title of the introduction slider.

subtitle:
Widget
Subtitle of the introduction slider.

backgroundColor:
Color
Background color of the introduction slider.

backgroundImageDecoration:
BackgroundImageDecoration
Background image of the introduction slider.

gradient:
Gradient
Gradient background of the introduction slider.

Properties of BackgroundImageDecoration #

Property
Type
Description

image:
ImageProvider
Typically this will be an AssetImage or a NetworkImage

fit:
BoxFit
Fill the target box by distorting the source's aspect ratio.

colorFilter:
ColorFilter
A color filter is a function that takes two colors, and outputs one color.

opacity:
double
Used to set the filterQuality of the image.

Scroll / Gesture control #
A page can be scrolled horizontally or vertically. The default scroll direction is horizontal. You can change the scroll direction by setting the scrollDirection property.

IntroductionSlider(
scrollDirection: Axis.vertical,
)
copied to clipboard
You can also control the introduction slider by gestures. You can set the physics property to NeverScrollableScrollPhysics() to disable the gesture slide.
IntroductionSlider(
physics: NeverScrollableScrollPhysics(),
)
copied to clipboard
DotIndicator #
The dot indicator is used to indicate the current page. You can change the color of the dot indicator and the size of the dot indicator.
DotIndicator(
selectedColor: Colors.blue,
unselectedColor: Colors.blue.withOpacity(0.5),
size: 8.0
)
copied to clipboard
DotIndicator Properties #

Property
Type
Description

selectedColor:
Color
The selected color of the dot.

unselectedColor:
Color
The unselected color of the dot.

size:
double
The size of the dot.

Done #
Done has some more properties which are used to redirect to the target page with an animation effect. animationDuration is used to set the duration of the animation and curve is used to set the animation curve.
Done(
child: Icon(Icons.done),
curve: Curves.easeInOut,
animationDuration: Duration(milliseconds: 350),
home: HomePage(),
)
copied to clipboard
Done Properties #

Property
Type
Description

child:
Widget
Done button's child widget.

home:
Widget
Redirects to the target page.

style:
ButtonStyle
Many of the ButtonStyle properties are [MaterialStateProperty] objects which resolve to different values depending on the button's state.

curve:
Curve
A collection of common animation easing curves.

animationDuration:
Duration
The animation lasts for the given duration and follows the given curve. The returned [Future] resolves when the animation completes.

Next #
Next has some more properties which are used to redirect to the next slide page with an animation effect. animationDuration is used to set the duration of the animation and curve is used to set the animation curve.
Next(
child: Icon(Icons.done),
curve: Curves.easeInOut,
animationDuration: Duration(milliseconds: 350),
)
copied to clipboard
Next Properties #

Property
Type
Description

child:
Widget
Next button's child widget.

style:
ButtonStyle
Many of the ButtonStyle properties are [MaterialStateProperty] objects which resolve to different values depending on the button's state.

curve:
Curve
A collection of common animation easing curves.

animationDuration:
Duration
The animation lasts for the given duration and follows the given curve. The returned [Future] resolves when the animation completes.

Back #
Back has some more properties which are used to redirect to the previous slide page with an animation effect. animationDuration is used to set the duration of the animation and curve is used to set the animation curve.
Back(
child: Icon(Icons.done),
curve: Curves.easeInOut,
animationDuration: Duration(milliseconds: 350),
)
copied to clipboard
Back Properties #

Property
Type
Description

child:
Widget
Next button's child widget.

style:
ButtonStyle
Many of the ButtonStyle properties are [MaterialStateProperty] objects which resolve to different values depending on the button's state.

curve:
Curve
A collection of common animation easing curves.

animationDuration:
Duration
The animation lasts for the given duration and follows the given curve. The returned [Future] resolves when the animation completes.

Hide/Show status bar and navigation bar #
By default showStatusBar is false. You can show status bar and navigation bar by setting showStatusBar to true.
IntroductionSlider(
showStatusBar: true,
)
copied to clipboard
Report bugs or issues #
You are welcome to open a ticket on github if any problems arise. New ideas are always welcome.
Copyright and License #

Copyright © 2022 Rahul Chouhan. Licensed under the MIT LICENSE.

3d Illustration by Icons 8 from Ouch!