Properly Implementing Android 12's Overscroll Indicator in Flutter

Updated for Flutter 3+

Not long ago, I posted an article explaining how to implement Android overscroll in Flutter so that Android 12’s stretch effect is used if running on Android 12, and the traditional glow effect is used if running on previous versions of Android. Here is the intro from that article, explaining why we must implement the effect.

As you may or may not know, Android 12 changed the overscroll indicator from a glow effect to a stretch effect. 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.

A couple of weeks later, at Google I/O, Flutter 3.0 was released, and the method I provided was deprecated. While it will still work for the time being, I wanted to quickly provide the future-proofed approach to implementing this behavior. In fact, we will be a little ahead of the Flutter team in properly implementing this behavior when we are done! 😃 So let’s get started.