Twitter Follow GitHub followers

Improving the little things

In this blog post you’ll learn which small changes you can do for your app, in order to create a better experience for your users. We’re focussing on Flutter apps for Android and iOS.

Acoustic and haptic feedback for a better UX

Flutter has various APIs to enrich the UX with haptic or audio feedback.

The first API is HapticFeedback. It vibrates the device according to the method names.

See for example this tweet as an example

Then there’s the SystemSound API. It adds acoustic feedback. Please be aware that it’s just partly supported depending on the platform.

The Feedback API is for adding feedback which is also usable for accessibility concerns.

Edge to edge mode (Android)

The first tip is to enable the so-called edge to edge mode for Android.

beforeafter

As you can see in the before screenshot, the app has an iOS-like swipe indicator on a black bar. By enabling the edge to edge mode, we also show content behind this indicator. In order to do this you just change your code to the following

This should be a painless migration, because your code should already be properly adapted to this, since it’s the default behavior on newer iOS devices.

Please be aware though, that this might cause issues on older Android versions. There’s also a Flutter issue to make this the default behavior for newly generated Flutter versions.

High refresh rate (Android)

Flutter apps are making use of high refresh rates by default on iOS. On Android, however, it isn’t that easy. Different manufactures mess with the system and can disable the automatic enabling of high refresh rate. One Plus, Oppo and Nothing for example do this. Xiaomi doesn’t. You can force a high refresh rates to a certain degree by using display_mode.

Add the package as a dependency and change your code to the following:

Congratulations, your app runs now at a high refresh rate in most cases.

I hope this was insightful for you!

You can follow me on Twitter and GitHub.