FLUTTER INTRO SLIDER
Flutter Intro Slider is a flutter plugin that helps you make a cool intro for your app. Create intro has never been easier and faster
Table of Contents
- Installing – How to install
- Demo – How this plugin works
- Code example – How to use
- Slide object properties – Modifying your tabs
- IntroSlider widget properties – Modifying entire slider
Installing
Add to pubspec.yaml file
dependencies: intro_slider: ^2.3.1
Import
import 'package:intro_slider/intro_slider.dart';
Demo
Code example
Default config
Code example (click to expand)
Custom config
Code example (click to expand)
Custom your own tabs
Code example (click to expand)
Slide object properties
| Name | Type | Default | Description |
|---|---|---|---|
| Title | |||
| title | String | “” | Change text title at top |
| widgetTitle | Widget | null | Set a custom widget as the title (ignore title if define both) |
| maxLineTitle | int | 1 | Change max number of lines title at top |
| styleTitle | TextStyle | White color, bold and font size is 30.0 | Style for text title |
| marginTitle | EdgeInsets | top: 70.0, bottom: 50.0 | Margin for text title |
| Image | |||
| pathImage | String | “” | Path to your local image |
| widthImage | double | 250.0 | Width of image |
| heightImage | double | 250.0 | Height of image |
| foregroundImageFit | BoxFit | BoxFit.contain | Foreground image fit |
| Center widget | |||
| centerWidget | Widget | null | Your custom’s widget |
| onCenterItemPress | Function | Do nothing | Fire when press center image/widget |
| Description | |||
| description | String | “” | Change text description at bottom |
| widgetDescription | Widget | null | Set a custom widget as the description (ignore descriptionif define both) |
| maxLineTextDescription | String | 100 | Maximum line of text description |
| styleDescription | TextStyle | White and font size is 18.0 | Style for text description |
| marginDescription | EdgeInsets | left, right = 20.0, top, bottom = 50.0 | Margin for text description |
| Background Color | |||
| backgroundColor | Color | Colors.amberAccent | Background tab color |
| colorBegin | Color | Colors.amberAccent | Gradient tab color begin |
| colorEnd | Color | Colors.amberAccent | Gradient tab color end |
| directionColorBegin | AlignmentGeometry | Alignment.topLeft | Direction color begin |
| directionColorEnd | AlignmentGeometry | Alignment.bottomRight | Direction color end |
| Background Image | |||
| backgroundImage | String | null | Background tab image |
| backgroundImageFit | BoxFit | BoxFit.cover | Background tab image fit |
| backgroundOpacity | double | 0.5 | Background tab image filter opacity |
| backgroundOpacityColor | Color | Colors.black | Background tab image filter color |
| backgroundBlendMode | BlendMode | BlendMode.darken | Background tab image filter blend mode |
IntroSlider widget properties
| Name | Type | Default | Description |
|---|---|---|---|
| Slide | |||
| slides | Slide | No default, required | An array of Slide object |
| Skip Button | |||
| renderSkipBtn | Widget | Button with text SKIP | Render your own SKIP button |
| widthSkipBtn | double | 1/4 screen width | Width of view wrapper SKIP button |
| onSkipPress | Function | Go to last page | Fire when press SKIP button |
| nameSkipBtn | String | “SKIP” | Change SKIP to any text you want |
| styleNameSkipBtn | TextStyle | White color | Style for text at SKIP button |
| colorSkipBtn | Color | transparent | Color for SKIP button |
| highlightColorSkipBtn | Color | Color(0x4dffffff) | Color for SKIP button when press |
| isShowSkipBtn | bool | true | Show or hide SKIP button |
| borderRadiusSkipBtn | double | 30.0 | Rounded SKIP button |
| Prev Button | |||
| renderPrevBtn | Widget | Button with text PREV | Render your own PREV button |
| widthPrevBtn | double | 1/4 screen width | Width of view wrapper PREV button |
| namePrevBtn | String | “PREV” | Change PREV to any text you want |
| styleNamePrevBtn | TextStyle | White color | Style for text at PREV button |
| colorPrevBtn | Color | transparent | Color for PREV button |
| highlightColorPrevBtn | Color | Color(0x4dffffff) | Color for PREV button when press |
| isShowPrevBtn | bool | false | Show or hide PREV button |
| borderRadiusPrevBtn | double | 30.0 | Rounded PREV button |
| Done Button | |||
| renderDoneBtn | Widget | Button with text DONE | Render your own DONE button |
| widthDoneBtn | double | 1/4 screen width | Width of view wrapper DONE button |
| onDonePress | Function | Do nothing | Fire when press DONE button |
| nameDoneBtn | String | “DONE” | Change DONE to any text you want |
| styleNameDoneBtn | TextStyle | White color | Style for text at DONE button |
| colorDoneBtn | Color | transparent | Color for DONE button |
| highlightColorDoneBtn | Color | Color(0x4dffffff) | Color for DONE button when press |
| borderRadiusDoneBtn | double | 30.0 | Rounded DONE button |
| isShowDoneBtn | bool | true | Show or hide DONE button |
| Next Button (other attributes will have the same Done button since they are one) | |||
| renderNextBtn | Widget | Button with text NEXT | Render your own NEXT button |
| nameNextBtn | String | “NEXT” | Change NEXT to any text you want |
| isShowNextBtn | bool | true | Show or hide NEXT button |
| Dot Indicator | |||
| isShowDotIndicator | bool | true | Show or hide dot indicator |
| colorDot | Color | Color(0x80000000) | Color for dot when passive |
| colorActiveDot | Color | Color(0xffffffff) | Color for dot when active |
| sizeDot | double | 8.0 | Size of each dot |
| typeDotAnimation (inactive dots auto have opacity 50%, dot active has size bigger than 1.5 times ) | enum dotSliderAnimation | DOT_MOVEMENT | Type dots animation |
| Tabs | |||
| listCustomTabs | List<Widget> | null | Render your own list tabs (use default tab UI if not defined) |
| refFuncGoToTab | Function | Do nothing | Send the reference of change tab’s function, then we can move to any tab index programmatically |
| onTabChangeCompleted | Function | Do nothing | Callback when tab change comleted, return the current tab’s index |
| backgroundColorAllSlides | Color | Transparent | Background color for all slides |
| Behavior | |||
| isScrollable | bool | true | Force button-only scrolling |
| shouldHideStatusBar | bool | false | Show or hide the status bar |
Pull request and feedback are always appreciated
Download Flutter Slider widget source code on GitHub
Provides the list of the opensource Flutter apps collection with GitHub repository.
