Geek Culture
Published in

Geek Culture

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.

--

--

--

A new tech publication by Start it up (https://medium.com/swlh).

Recommended from Medium

Android docker gradle-6.x build container

Huawei mobile service

Mastering Android App Widgets

Monitoring app termination on Android 11

ViewPager2 with TabLayout Android

Flutter: Custom tab indicator for TabBar

MVI - a Reactive Architecture Pattern

Building a Design System implementation using Jetpack Compose — Part2

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Lee Phillips

Lee Phillips

Software developer. Flutter fanatic. Other interests include photography, sports, coffee, and food.

More from Medium

Integrating Flutter Module in existing Android App

Timer Precision in Flutter

Explores the text input implementation from the security leakage of TextField with Flutter

Build BMI Calculator App in Flutter using Dart in Android Studio🚀