flutter_stories

example

Widget that brings stories mechanism to your apps

Advantages:

  • Simple to use and intuitive API
  • Lightweight (~200 lines of code)
  • Feels familiar if you've used Instagram or Snapchat stories before
  • Can be used with Cupertino and Material pacakges independently

Usage

Add flutter_stories to your pubspec.yaml

Example

Full version can be found in example dir

showcase

Supported gestures

  • Tap the right portion of the screen to switch to the next moment. You can specify onFlashForward callback to control app behavior in this case or when story finishes
  • Tap the left portion of the screen to switch to the previous moment. Similar to right tap, but uses onFlashBack
  • Long press (hold) the screen to hide the progress segments and pause story, release to show controls and unpause

API

propertytyperequireddescription
momentCountinttruesets the number of moments in story
momentDurationGetter(int index) => Durationtruefunction that must return Duration for each moment
momentBuilder(BuildContext context, int index) => Widgettruebuilder that gets executed executed for each moment
onFlashForward() => voidtruegets executed when user taps the right portion of the screen on the last moment in story or when story finishes playing
onFlashBack() => voidtruegets executed when user taps the left portion of the screen on the first moment in story
startAtintfalsesets the index of the first moment that will be displayed. defaults to 0
momentSwitcherFractiondoublefalsedefaults to 0.33. sets the ratio of left and right tappable portions of the screen: left for switching back, right for switching forward
progressSegmentBuilder(BuildContext context, double progress, double gap) => Widgetfalsedefaults to Story.instagramProgressSegmentBuilder. builder for each progress segment. defaults to Instagram-like minimalistic segment builder
progressSegmentGapdoublefalsedefaults to 2.0. sets the gap between each progress segment
progressOpacityDurationDurationfalsedefaults to Duration(milliseconds: 300). sets the duration for the progress bar show/hide animation

Libraries

flutter_stories