Ever noticed how messy and different the behavior of the #Android system back button or back navigation swipe gesture is on different applications that have a bottom navigation bar or a top tab view? You can do what you like in #Flutter and otherwise too. I found 5 patterns: 🧵👇
1. BACK always pops entire app, regardless of where you are on bottom destination, examples:
- Philips Hue app @philipshuedev
- Dropbox (persists last used)
- MS apps, like Word, Excel, PPT
For me this is the worst pattern, more on why later.
2. BACK if not on 1st destination, go to 1st, then next back pops app:
- Twitter
- WhatsApp, uses a top tab view, you can swipe between them, a back swipe is different and that takes you to main chats tab if you are not on it, and next after that pops the app.
I'm OK with this.
3. Keep unique visited destinations on a stack equal to nr of bottom destinations, pop back in last used unique order, when nothing left, if not on 1, then back to 1, then pop app.
- GMail
- YouTube
- IG
- Reddit
- Playstore
To mention a few. I like this one, but 2 is fine too.
4. Keep N unique destinations, then pop the app.
N is equal to nr of bottom destinations. Pop them until nothing remains, then pop app. App can be popped from other than 1st destination, depends on how you navigated.
- Netflix
I think this is just a weird botched version of 3.
5. Keep entire bottom nav history.
Just keep them all on a stack and pop back in order until nothing remains, then pop app. Since you started on 1, you eventually end up popping the app from 1.
- Spotify. Maybe it is not "infinite", but it is pretty deep.
Have you found any other patterns?
One might also ask:
"Why use back button/swipe on Android with bottom navbars?"
Some claim they never navigate with the back button/swipe on Android in apps with bottom navbars.
I do it all the time. Why? 👇
When I hold the phone with one hand in the lower right corner, I can't reach the 1st destination with my thumb without using uncomfortable and wobbly phone tilting action to reach it, so I swipe back with my thumb to get there. I expect to get to 1st destination at some point 👇
like in cases 2, 3 and 5.
If the app then does pattern 1 it is really the worst UX of them all. Case 4 is just weird, but you might not notice its weirdness unless you really look for it and create a back stack that shows it, but when it happens it is a bit of a WTF moment.
🙏😇
• • •
Missing some Tweet in this thread? You can try to
force a refresh
#FlutterDev connoisseur @biz84 showed us how to make a #Flutter web body like layout, that is centered and width constrained.
What happens if we use this with scrolling content?
What is your solution for it?
Do you have the perfect one? Let us know!
Meanwhile let us check out how this works with scrolling content. We keep Andrea's nice login card and add a bunch of other things to it and put it all in a scrolling view. Hmm scrollbars next to the body content, not so nice...
Can we fix this easily? Sure, let's disable the scrollbars for the child and put our own scrollbars outside of it all...