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/

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:

  1. Pending task
  2. Upcoming task

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.

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?

Laptop/Tablet View

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:

https://github.com/apgapg/flutter_responsive_tabs/blob/master/lib/home_page.dart

CONCLUSION

A simple change in design changes the UX 10x.

Check it LIVE: https://apgapg.github.io/flutter_responsive_tabs/

Whola! Congrats Clap! Clap! Clap!

Flutter | Vue | IIT Roorkee | Physics Educator at Unacademy | Artist | Flute Player | Love for machinary, bikes, tools | DIY person

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