ScrollyTell Flutter

This blog introduces you to ScrollyTell, A Flutter package for Android and iOS. It makes it relatively easier to control the background(Overlay widget) of your story using the ScrollyWidget.

It gives you the index of the panel that is currently active(decided by a guideline positioned at the top, bottom or center of the screen) and scroll progress(indicated by a number between 0 and 1). It is implemented using CustomScrollView and SliverWidgets.

Setup

To use ScrollyTell, add the following dependencies in your pubspec.yamlfile and then click on Get Dependenciesif you are using Android Studio.

scrollytell: ^1.0.4

Also, import the following package in your lib/main.dart.

import 'package:scrollytell/scrollytell.dart';

Using ScrollyTell

There are three callbacks that need to be implemented.

1. panelStartCallback : It is called when a new panel starts.
2. panelEndCallback : It is called when a panel is near to its end value while scrolling down.
3. panelProgressCallback : It is called at each frame of scrolling.

Today’s Example

In this blog, we are going to implement the below app using the ScrollyTell library.

example.gif

We are changing the color of the overlay widget (background) using the active panel index and the size of the ring using the progress value.

The middle line on-screen is known as Guideline the panel which overlaps with this line is the active panel. This line can be adjusted either at the top, center, or bottom.

The debug console (at top-left on screen) shows activepanel and progress which you can use for debugging.

Let’s get started 🚖

Initial Setup

The first step is creating a new Flutter project.

Then add the latest dependency in pubspec.yaml.

And remove all the code from the lib/main.dart file.

Importing required Package

Import the ScrollyTell package and material package, which is needed for this example.

Defining Starting point using the main method

Defining Text Strings that we will use in Text Widgets in main.dart.

Define Material Widget MyApp and use it in main method (starting point of app).

Create a StatefulWidgetMyHomePage and define a list of widget i.e panelList here.

Now all the code below is to be added to _MyHomePageState. This class defines the State of our widget.

Add panel(Widget) in panelList in initState method of the widget.

We are using SizedBox for giving empty spaces. And these are included in the panel.

We are giving opacity to Container color which includes Text as it’s child ,i.e., Colors.grey.withOpacity(0.5) .

Where can we use ScrollyWidget?

We can wrap ScrollyWidget either in Expanded, Flexible , or Container.

• Expanded(child: ScrollyWidget(…..))
• Flexible(child: ScrollyWidget(…..))
• Container(height: 500, width: 300, child: ScrollyWidget(…..)) to give the desired size.

Or use it directly as body of Scaffold

Widget’s Build Method

Here, we will define an overlay widget and return the Scaffold whose body is ScrollyWidget .

Here, we will use panelProgressCallback which provides us with the value of activePanelNumber and progress of active panel.

For viewing the debug console (at top-left of the screen) we have set showDebugConsole: true, remember to set it to false before release."

Replace panelProgressCallback by:

In the code above, we define color according to activePanelNumber and _size of the circle using the progress value. Then we pass this overlayWidget into func().

And voila! Our app is ready!

Sources and More Guides

You can find more information about ScrollyTell here.

You can get a complete code here.