Specific min and max size for expanded widgets in Column

In short: there is no simple answer without calulating the size.

First you need to know: Widget with Size dominate the avialable size in Row/Column, then Flexiable/Expanded share the remaining space.

Column(
  children:[
    Flexiable(...
    Expanded(...
    SizedBox(...  // <- dominate the avialable size first
  ]
)

And the parent widget dominate the size of the child widget:

Column(
  children:[
    Flexiable(flex: 1),
    Flexiable(
      flex: 1,
      child: SizedBox(...  // size can't be larger than 1/2
  ]
)

It is the choise problem if the size exceed or insufficient. I can show some simple examples below:

(BTW: I replace ConstraintedBox with SizedBox because we only use maxWidth/maxHeight. check Understanding constraints)

Flex with max size

In this case is simple and can use only Flexible + SizedBox

Row(
  children: [
  Flexible(flex: 1, child: _textWidget('Flex:1')),
  Flexible(
    flex: 1,
    child: SizedBox(
      width: 300,
      child: _textWidget('Flex: 1, max: 300'),
      ),
    ),
  ],
),

Flex with min/max size

For the case need the total size(from LayoutBuilder) and the percentage of the widget size.

LayoutBuilder(
  builder: (context, constraint) {
    final maxWidth = constraint.maxWidth;
    
    return Row(
      children: [
        Flexible(flex: 1, child: _textWidget('Flex:1')),
        SizedBox(
          width: (maxWidth / 3).clamp(200, 300),
          child: _textWidget('Flex:1, min: 200, max: 300'),
        ),
        SizedBox(
          width: (maxWidth / 3).clamp(200, 300),
          child: _textWidget('Flex:1, min: 200, max: 300'),
        ),
      ],
    );
  }
)

Code Example

https://dartpad.dev/?id=f098f9764acda1bcc58017aa0bc0ec09

enter image description here

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)