How can I resize the image widgets while maintaing the aspect ratio of all the widgets inside a row?

user_10951873 0
Viewed 1010

I wanted to design this UI using Row: enter image description here

I have a similar scenario where I don't know the size and orientation of the images. This is what I can think of: Put all the image widgets and wrap it within a row. But since I don't know the size as well as the orientation of the images, the widgets will not be properly placed as in the above image.

I've tried resizing the images by using scale factor. But since the size varies, the images are never uniformly scaled. Also whenever the orientation is different for a particular image, the UI ca not scale itself accordingly.

I would like to get an idea on how can this type of UI can be created in Flutter?

Note: I don't own the copyrights of the image. Using this screenshot for only educational purpose from here.

flutter-web flutter-layout dart flutter
2 Answers

You can use something like Expanded with flex:

    Row(
      children: <Widget>[
        Expanded(
          child: Container(child: Image("1")),
          flex: 2,
        ),
        Expanded(
          child: Container(child: Image("2"),
          flex: 2,
        ),
        Expanded(
          child: Container(child: Image("3"),
          flex: 1,
        ),
       ],
      ),

It is also worth looking into FractionallySizedBox .

user_29218310

Wrap widget is what you need with of course little customization as well.

What is it do does is basically wrap all the widgets in a single row with spaces that you want with width dynamically. Give it shot!

  • Here's the official doc.
  • Here's a medium article explaining it well.
user_122973820
Related