introduction-slider

chouhan-rahul buymeacoffee ko-fi paypal

Become a sponsor

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(),
)

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.

introduction_slider

IntroductionSliderItem(
  logo: FlutterLogo(),
  title: Text("Introduction Slider Title"),
  subtitle: Text("Introduction Slider Subtitle"),
  backgroundColor: Colors.red
)

Here is an example of how to implement IntroductionSliderItem with gradient background.

introduction_slider

IntroductionSliderItem(
  logo: FlutterLogo(),
  title: Text("Introduction Slider Title"),
  subtitle: Text("Introduction Slider Subtitle"),
  gradient: LinearGradient(
    colors: [
      Colors.cyan,
      Colors.indigo,
    ],
  ),
)

Here is an example of how to implement IntroductionSliderItem with background image.

introduction_slider

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,
  ),
)

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.

introdution slider

IntroductionSlider(
  scrollDirection: Axis.vertical,
)

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(),
)

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
)

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(),
)

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),
)

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),
)

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,
)

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!