How would you make this simple flutter layout responsive?

Question

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:

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?

Solution

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