CODEWITHSUNDEEP
flutterlayoutresponsive-design
Notbad
Notbad

Reputation: 6296

How would you make this simple flutter layout responsive?

A year has passed since last time I had to use flutter to build a little app for my firm. At that time MediaQuery was the trending way to create layouts ready for every screen size.

Today I am trying to build a simple layout like this one:

enter image description here

The part I am concerned about is the 3 circles in the middle. They have an icon and text inside and must be positioned at the positions seen in screen.

So, I have been investigating a bit how to create that part of the layout in a responsive way. I mean, that the circles are positioned at the correct position and size relative to the screen size and that the icon and text inside the circle are positioned and resized correctly too ,to avoid overflowing the circles.

Is the MediaQuery class still the only tool that can be used to build this kind of responsive layouts? Would you tackle this layout using a different method?

Upvotes: 1

Views: 135

Answers (1)

Jackson Lee
Jackson Lee

Reputation: 1248

Yes MediaQuery is still heavily used, but Flutter has introduced some good widgets based on Orientation and Responsive Layouts:

OrientationBuilder - Builds different widget trees based on Orientation - For Example if the device is horizontal, you might see a Square instead of a Circle.

CustomMultiChildLayout - It can automatically decide how to size and position each child, as well as size the parent. Single widgets can be used CustomSingleChildLayout

Also when resizing text automatically I found Auto Size Text to be amazing

Upvotes: 1

Related Questions