ADAPTING APP ON DIFFERENT SCREEN SIZE
Flutter Responsive Design
A responsive tabs demo at two different screen size namely tablet and phone.
https://apgapg.github.io/flutter_responsive_tabs/
UX is one of the most important aspect which every UI developer cares about. Having multiple devices with different screen size, it becomes difficult to manage different elements and their correct position on the screen.
You cannot simply show what is optimised for app on a laptop or tablet. Hence managing UX becomes sometimes critical with complex codebase.
But big thanks to Flutter for caring about this problem. With Flutter its super easy to build responsive widgets at-least in mobile segments (bootstrap cuts the ice very well in websites).
PROBLEM STATEMENT
While working on my Workozy app, i needed to build task page for our task management feature. There are three sections in this:
- Today’s task
- Pending task
- Upcoming task
Now the challenge is to how them with best possible UX for the end users so that he would be able to see the gist in one go.
IDEA
Now the thing is to display all these three sections. Either we can have all of them in one single list with descending date wise sort. But that will not be good as the user need to see today’s task.
Giving filter will not be good as the it increases number of taps.
Hence what i thought was to create three tabs namely TODAY, PENDING, UPCOMING
With the counter on each tab the user can get the gist of different tasks and their count respectively. This conveys the gist on one go.
MOBILE vs TABLET
The above view look fine for mobile but then what about tablet or laptop? Can we do something to make it more better on laptop?
On laptop i decided to remove swipe-able tabs and instead add all 3 tabs at once looking it like a Kanban Board.
This looks extremely cool in design for tablets.
The animated version looks more contextual to this:
FLUTTER MADE THIS EASY
In Flutter you have two ways to achieve this responsive designs- either you can use Layout Builder Widget which will provide you screen constraints in real time or you can simple use Media Query like this:
A basic approach that i took can be seen below. Looks EASY? It is so.
CONCLUSION
A simple change in design changes the UX 10x.
If you are a beginner, remember this is time taking process. Its not a spell which will bound you at once, keep practicing and observer popular websites designs.
I tried to replicate the above design in a git repo:
(Do show love by hitting 🌟)
Check it LIVE: https://apgapg.github.io/flutter_responsive_tabs/
Whola! Congrats Clap! Clap! Clap!
Connect with me:
LinkedIn: https://www.linkedin.com/in/ayushpgupta/
Github: https://github.com/apgapg
