introduction slider

rahul chouhan buy-me-a-coffee paypal

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.

Sample screenshots are shown below

introduction slider introduction slider introduction slider

Getting Started

Below is an example of how to implement IntroductionSlider in a Flutter application.

IntroductionSlider(
  onDone: SecondPage(),
  items:[
    IntroductionSliderItem(
      image: FlutterLogo(),
      title: "Introduction Slider 1",
      description: "This is a description of introduction slider 1.",
    ),
    IntroductionSliderItem(
      image: FlutterLogo(),
      title: "Introduction Slider 2",
      description: "This is a description of introduction slider 2.",
    ),
    IntroductionSliderItem(
      image: FlutterLogo(),
      title: "Introduction Slider 3",
      description: "This is a description of introduction slider. 3",
    ),
  ],
);

To change the properties of button

This example demonstrates how to modify default button properties. The only thing need to write in onDone is the name of the page you want to redirect. Don't need to write complete navigator code.

IntroductionSlider(
  skip: Text("SKIP"),
  next: Text("NEXT"),
  done: Text("DONE"),
  onDone: SecondPage(),
  items:items,
);

To change the properties of dot indicator

IntroductionSlider(
  selectedDotColor: Colors.red,
  unselectedDotColor: Colors.blue,
  dotSize: 10.0,
  items:items,
);

How to control scrolling?

An example of how to control swipe gestures and change scroll direction. In isScrollable, it uses a boolean value to control changing pages with swipe. By default isScrollable is true. Scroll direction can be changed by using scrollDirection.

IntroductionSlider(
  isScrollable:false,
  scrollDirection:Axis.vertical,
  items:items,
);

Properties

  • IntroductionSlider Properties

    PropertyTypeDescription
    items:List<IntroductionSliderItem>Defines the appearance of the introduction slider items that are arrayed within the introduction slider.
    titleTextStyle:TextStyleTo format and paint title text.
    descriptionTextStyle:TextStyleTo format and paint description text.
    skip:WidgetSkip button widget. It is recommended to use a Text widget.
    showSkipButton:boolTo hide and show skip button.
    next:WidgetNext button widget. It is recommended to use a Text widget.
    done:WidgetDone button widget. It is recommended to use a Text widget.
    onDone:WidgetRedirect to another page, When done button is pressed.
    isScrollable:boolUse when enable or disable scroll.
    scrollDirection:AxisFor the scroll direction.
    backgroundImageFit:BoxFitApplies the sizing semantics of these values.
    backgroundImageOpacity:doubleTo set background image opacity.
    backgroundImageColorFilter:ColorFilterA color filter is a function that takes two colors, and outputs one color.
    selectedDotColor:ColorThe color of selected dot.
    unselectedDotColor:ColorThe color of unselected dot.
    dotSize:doubleThe dot size.
  • IntroductionSliderItem Properties

| Property         | Type   | Description                            |
| ---------------- | ------ | -------------------------------------- |
| image:           | Widget | To display the logo/image of the page. |
| title:           | String | To display the page title.             |
| description:     | String | To display the page description.       |
| backgroundColor: | Color  | To set background color of page.       |
| backgroundImage: | Image  | To set background image of page.       |

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.

Libraries

button
dot_indicator
introduction_slider
introduction_slider_item