CODEWITHSUNDEEP
flutterdartresponsive-designflutter-layoutresponsive
Frozen Forest
Frozen Forest

Reputation: 72

Flutter responsive design approach

I'm new to flutter and i have no prior experience in app development. as far as i know there are two methods for responsive design.

  1. designing relative to screen size.
  2. design separate layouts for different screen size or break point!

which one is better? are there any pros and cons that can help to choose between of these designing methods? simplicity or maintenance are not my concerns, the overall app performance is important to me.

small device large device

Upvotes: 0

Views: 581

Answers (3)

Shashiben
Shashiben

Reputation: 230

Instead of writing Ui for multiple screen sizes you can write Ui only once with the help of this package flutter_next And it has some cool extension for rapid UI Developement and the documentation is also good.

They even have an example which is made with this package Demo

Upvotes: 0

Felipe Sales
Felipe Sales

Reputation: 1139

The best thing is that you use relative measures, and widgets like Expanded, Flexible, MediaQuery, FittedBox... among others more advanced, like studying about Constraints in Flutter

Upvotes: 0

Rafal
Rafal

Reputation: 105

It's the best to use similar sizes on different screens. Flutter uses logical pixels which are independent on resolution and screen ratio of the device. So Container with 100 width and 100 height takes the same physical space on 4 inch screen and 7 inch screen. In vertical orientation it's common to set widgets to use whole width but only some pixels in height and put this widget in ListView. This way on bigger screens you can fit more widgets, but on all of them widgets should take similar space.
Also, sometimes developers support horizontal orientation with different arrangement of widgets.

Upvotes: 1

Related Questions