Implementing Android 12's Overscroll Indicator Effect in Flutter

UPDATE: This method has been deprecated in Flutter 3. Please read my new article to learn the updated approach to implementing this feature.

As you may or may not know, Android 12 changed the overscroll indicator from a glow effect to a stretch effect. The difference can be seen below.

Remember, when using Flutter, the framework handles all of our UI appearance & behavior. This means that we do not enjoy the benefit of automatic behavior updates between Android versions (or iOS, or Windows, etc.). Therefore, we must update our app to behave appropriately when the default appearance or behaviors change between OS versions. Fortunately, Flutter has a solution.

We can now define the Android overscroll behavior in our Theme.

ThemeData(
  androidOverscrollIndicator: AndroidOverscrollIndicator.stretch,
)

If you provide light and dark themes, make sure to define the overscroll indicator for both.

Now, as easy as that was to implement, there is a slight problem… This will apply the stretch behavior on all versions of Android, not just on Android 12+. To make our app feel at home on each Android version, we need to first determine the version, then define the overscroll indicator based on this information. We will use the device_info_plus package to find the Android version, so add the following to pubspec.yaml and run pub get.

device_info_plus: any

Then, add the following code to the main method. We need to make main async and detect the Android version here because the method to do so is asynchronous.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final androidInfo = await DeviceInfoPlugin().androidInfo;
  final sdkVersion = androidInfo.version.sdkInt ?? 0;
  final androidOverscrollIndicator = sdkVersion > 30
      ? AndroidOverscrollIndicator.stretch
      : AndroidOverscrollIndicator.glow;
  runApp(MyApp(
    androidOverscrollIndicator:androidOverscrollIndicator,
  ));
}
class MyApp extends StatelessWidget {
  const MyApp({
    Key? key,
    this.androidOverscrollIndicator =
            AndroidOverscrollIndicator.glow,
  }) : super(key: key);
final AndroidOverscrollIndicator androidOverscrollIndicator;
...
  theme: ThemeData(
    androidOverscrollIndicator:androidOverscrollIndicator,
  ),
...

Things to note:

• WidgetsFlutterBinding needs to be initialized before using DeviceInfoPlugin.
• androidInfo.version.sdkInt can return null if the app is running on something other than Android (i.e. iOS). We set the value to 0 if so.
• Android 12’s SDK version is 31, therefore we use stretch for anything above 30.
• Here, we are passing the indicator as an argument to our root widget MyApp via the constructor. You may use any approach you prefer for passing data between widgets. (Check out my article on simple state management, or the related repo for one possible solution.)

That’s all there is to it! Now scrolling on your app will feel right at home on all versions of Android.

Thank you for reading! If you enjoyed this article, please clap and follow.