Place an Auto-sized widgets based on the parent widget's Width and height

user_7567572 0
Viewed 400

Goal: Achieving Auto-size widgets based on the parent widget's constraints

Use Case: Placing two buttons on the same Row but being adaptive to multiple screen sizes (Responsive)

Problem: I have two buttons (each of them wrapped inside a column widget) that is wrapped inside a Row widget.

To sum: (Parent->child): Row > [Column - Column]

As shown in the screenshot below.

Screenshot showing the problem that i'm facing[1]

Tried-solutions: I tried placing the widgets inside of an Expanded widget, that is placed inside of a Flex Widget

Padding > Flex > Expanded > Row > [Widgets]

The code is as follows:

Padding( //Main Padding
            padding: EdgeInsets.only(top: 14, bottom: 14),
            child: Flex(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              mainAxisSize: MainAxisSize.max,
              direction: Axis.horizontal,
              children: <Widget>[
                Expanded(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    mainAxisSize: MainAxisSize.max,
                    children: <Widget>[
                      ChipButton(text: 'Main Size', withIcon: false),
                      ChipButton(text: 'Others', withIcon: false),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.only(top: 14, bottom: 14),
            child: Expanded(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  ChipButton(text: 'trademark', withIcon: false),
                ],
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(top: 14, bottom: 14),
            child: Expanded(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  ChipButton(text: 'Price', withIcon: false),
                  ChipButton(text: 'Color', withIcon: false),
                ],
              ),
            ),
          ),
flutter
1 Answers

Try modifying the code below to your app:

Padding(
        padding: EdgeInsets.only(top: 14, bottom: 14),
        child: Column(children: <Widget>[
          Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Expanded(
                    child:
                        Container(color: Colors.amberAccent, child: Text("A"))),
                Expanded(
                    child:
                        Container(color: Colors.blueAccent, child: Text("B"))),
              ]),
          Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Expanded(
                  child: Container(color: Colors.grey, child: Text("C")),
                ),
              ]),
          Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Expanded(
                    child:
                        Container(color: Colors.redAccent, child: Text("D"))),
                Expanded(
                    child: Container(
                        color: Colors.orangeAccent, child: Text("E"))),
              ]),
        ]),
      ),

It produces something like this:

Screenshot

You can also view the DartPad code I worked on here, in case you want to check if it works on different widths :D

P.S. I really like the way you've asked your question.

user_132388990
Related