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
At @visible_health we also have this little tooltip when dragging across the bars in the plot which has very light haptic feedback on each entry, feels kinda nice pic.twitter.com/SbzH1FlaGt
— Dominik Roszkowski (@OrestesGaolin) March 6, 2023
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.
| before | after |
|---|---|
 |  |
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!