scrollytell 1.0.0 scrollytell: ^1.0.0 copied to clipboard
Cross-platform ScrollyTell built using flutter
✨ Scrollytell Flutter #
A flutter library for ScrollyTelling in your flutter app.
🎖 Installing #
dependencies:
⚡️ Import #
import 'package:scrollytell/scrollytell.dart';
Props #
props | type | default value | Description |
---|---|---|---|
panels (required) | List Widget | A list of panel widgets | |
panelStartCallback (required) | Function(num, Function) | Called on start of new panel | |
panelEndCallback (required) | Function(num, Function) | Called on end of existing panel | |
panelProgressCallback (required) | Function(num, double, Function) | Called every frame | |
opacity | double | 1 | Set opacity of overlayWidget |
lastPanelForceComplete | bool | false | Set true if the last panel hits bottom of the screen and can't be scrolled through |
initialOverlayWidget | Widget | none | Overlay widget before start of scrolling |
guidelinePosition | GuidelinePosition | GuidelinePosition.top | Set position of guideline |
stickyChartIndex | int | null | The panel of corresponding index will dock at center when scrolled past the center |
showDebugConsole | bool | false | show debug console and debug line |
🎮 How To Use #
Declare a List of Widgets
List<Widget> panelList = [Text('Hello Scrollytell'), Text('Hello Flutter')];
Declare an Overlay Widget
Widget overlayWidget;
Declare a ScrollyWidget
Widget _scrollyWidget = ScrollyWidget(
showDebugConsole: true,
guidelinePosition: GuidelinePosition.center,
panels: panelList,
panelStartCallback: (activePanelNumber, func){},
panelEndCallback: (endingPanelNumber, func){},
panelProgressCallback: (activePanelNumber, progress, func){
// set properties of overlay widget using activePanelNumber and progress
double rad = (progress <= 0.5) ? progress * 200 : 200 - progress * 200;
overlayWidget = Center(
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(rad),
),
color: Colors.red,
),
),
);
// then pass it into the function
func(overlayWidget)
},
)
Now Wrap it in either Expanded, Flexible or Container
Option 1 : Wrap in Expanded for covering the remaining screen.
Expanded(child: _scrollyWidget)
Option 2 : Wrap in Flexible
Flexible(child: _scrollyWidget)
Option 3 : Wrap in container to give it desired size.
Container(height: 500, width: 300, child: _scrollyWidget)
OR Use it directly as body of Scaffold.
Scaffold(body: _scrollyWidget)
For more info, refer to the basic_usage
app in the example.
🚀 Showcase #
🐛 Bugs/Requests #
If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a issue(label:enhancement) on Github and we will look into it. Pull requests are most welcome.
⭐️ License #
MIT License
This project draws inspiration from @google's Scrollytell.