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
Add to pubspec.yaml file
dependencies:
intro_slider: ^4.2.1
Import
import 'package:intro_slider/intro_slider.dart';
Name | Type | Default | Description |
---|---|---|---|
Tab | |||
key | Key? |
Assign key to IntroSlider widget | |
listContentConfig | List<ContentConfig>? |
View details | An array of ContentConfig, require if listCustomTabs not defined |
listCustomTabs | List<Widget>? |
Require if listContentConfig not defined | Render your own widget list tabs (meaning you can put your custom widget into the prebuilt frame) |
refFuncGoToTab | void Function(Function function)? |
Do nothing | Send the reference of change tab's function, then we can move to any tab index programmatically |
onTabChangeCompleted | void Function(int index)? |
Do nothing | Callback when tab change comleted, return the current tab's index |
backgroundColorAllTabs | Color? |
Transparent | Background color for all tabs (if backgroundColor not set in each tab) |
Skip Button | |||
renderSkipBtn | Widget? |
Text("SKIP") | Render your own widget SKIP button |
skipButtonStyle | ButtonStyle? |
ButtonStyle() | Style for SKIP button |
onSkipPress | void Function()? |
Go to last page + call your function if define | Fire when press SKIP button |
isShowSkipBtn | bool? |
true | Show or hide SKIP button |
skipButtonKey | Key? |
Assign key to SKIP button | |
Previous Button | |||
renderPrevBtn | Widget? |
Text("PREV") | Render your own PREV button |
prevButtonStyle | ButtonStyle? |
ButtonStyle() | Style for PREV button |
isShowPrevBtn | bool? |
false | Show or hide PREV, have to set isShowSkipBtn to false at first if you want to show this button |
prevButtonKey | Key? |
Assign key to PREV button | |
Done Button | |||
renderDoneBtn | Widget? |
Text("DONE") | Render your own DONE button |
doneButtonStyle | ButtonStyle? |
ButtonStyle() | Style for DONE button |
onDonePress | void Function()? |
Do nothing | Fire when press DONE button |
isShowDoneBtn | bool? |
true | Show or hide DONE button |
doneButtonKey | Key? |
Assign key to NEXT button | |
Next Button | |||
renderNextBtn | Widget? |
Text("NEXT") | Render your own NEXT button |
nextButtonStyle | ButtonStyle? |
ButtonStyle() | Style for NEXT button |
onNextPress | void Function()? |
Go to next page + call your function if define | Fire when press NEXT button |
isShowNextBtn | bool? |
true | Show or hide NEXT button |
nextButtonKey | Key? |
Assign key to NEXT button | |
Indicator | |||
indicatorConfig | IndicatorConfig? |
View details | Custom indicator |
Navigation bar | |||
navigationBarConfig | NavigationBarConfig? |
View details | Custom position navigation bar |
Scroll behavior | |||
isScrollable | bool? |
true | Whether or not the slider is scrollable (or controlled only by buttons) |
curveScroll | Curve? |
Curves.ease | Set transition animation curves (also effect to indicator when it's sliding) |
scrollPhysics | ScrollPhysics? |
ScrollPhysics() | Determines the physics horizontal scroll for the slides |
isAutoScroll | bool? |
false | Enable auto scroll slides |
isLoopAutoScroll | bool? |
false | Loop transition by go to first slide when reach the end |
isPauseAutoPlayOnTouch | bool? |
true | Auto scroll will be paused if user touch to slide |
autoScrollInterval | Duration? |
Duration(seconds: 4) | Sets duration to determine the frequency of slides |
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 |
textAlignTitle | TextAlign? |
TextAlign.center | TextAlign for text title |
textOverFlowTitle | TextOverflow? |
TextOverflow.ellipsis | TextOverflow 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 description if define both) |
maxLineTextDescription | int? |
100 | Maximum line of text description |
styleDescription | TextStyle? |
White and font size is 18.0 | Style for text description |
textAlignDescription | TextAlign? |
TextAlign.center | TextAlign for text description |
textOverFlowDescription | TextOverflow? |
TextOverflow.ellipsis | TextOverflow 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 (if set, will ignore gradient properties below) |
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 | Set image for background (if set, will ignore all parameter at Background Color above) |
backgroundNetworkImage | String? |
null | Set image (from network) for background |
backgroundImageFit | BoxFit? |
BoxFit.cover | Background image fit |
backgroundFilterColor | Color? |
Colors.black | A color filter to apply to the image background before painting it |
backgroundFilterOpacity | double? |
0.5 | Opacity for backgroundFilterColor |
backgroundBlendMode | BlendMode? |
BlendMode.darken | Background blend mode |
Others | |||
verticalScrollbarBehavior | enum ScrollbarBehavior? |
ScrollbarBehavior.HIDE | Allow to specify how the vertical scrollbar should behave (scroll enable when content length is greater than screen length) |
Name | Type | Default | Description |
---|---|---|---|
isShowIndicator | bool? |
true | Show or hide indicator |
colorIndicator | Color? |
Colors.black54 | Color indicator when passive, note: ignore if using custom indicator |
colorActiveIndicator | Color? |
value of colorIndicator | Color indicator when active (focusing), note: ignore if using custom indicator |
sizeIndicator | double? |
8.0 | Size of each indicator |
spaceBetweenIndicator | double? |
The same value of sizeIndicator | Space between every indicator |
typeIndicatorAnimation | enum TypeIndicatorAnimation? |
TypeIndicatorAnimation.sliding | Type indicator animation |
indicatorWidget | Widget? |
Default dot | Your custom indicator widget |
activeIndicatorWidget | Widget? |
Default dot | Your custom active (focusing) indicator widget, note: ignore if using TypeIndicatorAnimation.sizeTransition |
Name | Type | Default | Description |
---|---|---|---|
padding | EdgeInsets |
EdgeInsets.symmetric(vertical: 10) | Padding |
navPosition | NavPosition |
NavPosition.bottom | Move navigation bar to top or bottom page |
backgroundColor | Color |
Colors.transparent | Background color |