Allow Expanded Widget to take more space if needed

Question

I want the Expanded widget to have a minimum width (specified in flex) but it shall also increase its width if the child needs it. However, it only interprets flex as some kind of fixed width.

You can see it in the following screenshot.

Example Code:


Row(
  children: [
    Expanded(
      flex: 117,
      child: Widget(),
    ),
    Expanded(
      flex: 400,
      child: Widget(),
    ),
    Expanded(
      flex: 13,
      child: Widget(),
    ),
    Expanded(
      flex: 470,
      child: Widget(),
    ),
  ],
);

Screenshot:

Hazar Belge · Answer 1 · 2021-08-29T23:21:12.863

You can use constraint property of Container Widget. -I think-

You can try this:

Row(
  children: [
    Expanded(
      flex: 117,
      child: Container(
         constraints: BoxConstraints(minWidth: 40),
         child: Widget(),
      ),
    ),
    Expanded(
      flex: 400,
      child: Container(
         constraints: BoxConstraints(minWidth: 40),
         child: Widget(),
      ),
    ),
    Expanded(
      flex: 13,
      child: Container(
         constraints: BoxConstraints(minWidth: 40),
         child: Widget(),
      ),
    ),
    Expanded(
      flex: 470,
      child: Container(
         constraints: BoxConstraints(minWidth: 40),
         child: Widget(),
      ),
    ),
  ],
);

Edit 1: I created custom widget called MinHeightExpanded.

MinHeightExpanded Widget:

class MinHeightExpanded extends StatefulWidget {
  const MinHeightExpanded({
    Key? key,
    required this.minHeight,
    required this.flex,
    required this.color,
  }) : super(key: key);

  final double minHeight;
  final int flex;
  final Color color;

  @override
  _MinHeightExpandedState createState() => _MinHeightExpandedState();
}

class _MinHeightExpandedState extends State<MinHeightExpanded> {
  bool setToMin = false;

  @override
  Widget build(BuildContext context) {
    WidgetsBinding.instance!.addPostFrameCallback((timeStamp) => setState(() {}));
    return !setToMin
        ? Expanded(
            flex: widget.flex,
            child: LayoutBuilder(
              builder: (BuildContext context, BoxConstraints boxConstraints) {
                print("${widget.color}: ${boxConstraints.maxHeight}");
                if (boxConstraints.maxHeight < widget.minHeight) {
                  setToMin = true;
                }
                return Container(
                  color: widget.color,
                );
              },
            ),
          )
        : Container(
            color: widget.color,
            height: widget.minHeight,
          );
  }
}

Use it like that:

     SizedBox(
        height: size.height,
        width: double.infinity,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          children: [
            MinHeightExpanded(
              flex: 117,
              color: Colors.red,
              minHeight: 40,
            ),
            MinHeightExpanded(
              flex: 400,
              color: Colors.yellow,
              minHeight: 40,
            ),
            MinHeightExpanded(
              flex: 13,
              color: Colors.blue,
              minHeight: 400,
            ),
            MinHeightExpanded(
              flex: 470,
              color: Colors.green,
              minHeight: 40,
            ),
          ],
        ),
      ),

Unfortunately, it doesn't work. The `Expanded` widget seems to have higher priority. — Tien Do Nam, Aug 29 '21 at 22:50
This [link](https://stackoverflow.com/questions/56417186/specific-min-and-max-size-for-expanded-widgets-in-column) can give you a hint. I didn't find a way for now, too. — Hazar Belge, Aug 29 '21 at 22:58
I edited my answer. You may want to check out. It works so well. — Hazar Belge, Aug 29 '21 at 23:21
I edited it to minWidth on my side. Thanks, it is working flawlessly. — Tien Do Nam, Aug 30 '21 at 19:26

score 1 · Answer 2 · answered Aug 30 '21 at 08:56

1

If I underestand correctly, here is the answer to your question.

Use the Flexible widget instead of the Expanded. Flutter: Expanded vs Flexible

answered Aug 30 '21 at 08:56

xbalaj

977
1
8
14

Sam Chan · Answer 3 · 2021-08-30T08:46:46.110

0

Why not just remove the Expanded for the child you want increase the width. Like

Row(
  children: [
    Expanded(
      flex: 117,
      child: Widget(),
    ),
    Expanded(
      flex: 400,
      child: Widget(),
    ),
    Widget(),
    Expanded(
      flex: 470,
      child: Widget(),
    ),
  ],
);

if you do not want to set the percentage, you can use IntrinsicWidth, like

    IntrinsicWidth(
        child: Row(children: [
      Widget(),
      Widget(),
      Widget(),
      Widget(),
    ]));

BUT, it is expensive

edited Aug 30 '21 at 08:46

answered Aug 30 '21 at 02:00

Sam Chan

1,665
4
14

Well, I don't know the percentages beforehand. It could also be the first item. – Tien Do Nam Aug 30 '21 at 08:34
@TienDoNam I try another suggestion – Sam Chan Aug 30 '21 at 08:47

score 0 · Accepted Answer · answered Sep 07 '21 at 10:24

The answer by @HazarBelge does work, however I found a more elegant solution:

Component:

class PercentageRow extends StatelessWidget {

  final List<double> percentages;
  final List<Widget> children;

  const PercentageRow({required this.percentages, required this.children});

  @override
  Widget build(BuildContext context) {
    return Table(
      columnWidths: percentages.map((p) => IntrinsicColumnWidth(flex: p)).toList().asMap(),
      children: [TableRow(children: children)],
    );
  }
}

Usage:

PercentageRow(
    percentages: [0.3, 0.7],
    children: [
      Container(color: Colors.red, child: Text('A LOOOOOONG TEXT')),
      Container(color: Colors.green),
    ],
);

Allow Expanded Widget to take more space if needed

4 Answers4