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

IntroductionSlider Properties

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
)

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

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

IntroductionSliderItem Properties

Properties of BackgroundImageDecoration

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

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

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

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

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

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!