Fix minimum width to a Widget which needs to expand in Flutter

Question

I need to fix a minimum width to my Column Widgets. Inside each of them, I have Text Widgets which can be very short or very long. I need to fix a minimum width to them in order to have an acceptable size of Column even if the text is short. The other Column need obviously to adapt himself.

Row(children: [
  Column(
    children: [
      Container(
        constraints: BoxConstraints(minWidth: 80), // do not work
        child: Text("short text"),
      ),
    ],
  ),
  Column(
    children: [
      Container(
        constraints: BoxConstraints(minWidth: 110), // do not work
        child: RichText(
          text: TextSpan(
            text:"very very longggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg text")),
        ),
      ],
    ),
  ],
)

Solution

There's probably a dozen ways to do what you want. And likely none of them straightforward or easy to understand. (The subject of constraints & sizes is quite complicated. See this constraints page for more examples & explanations.)

Here's one potential solution.

This will set a minimum width for the blue column (based on stepWidth), but will expand/grow if the text (child) inside wants to.

The yellow column will resize to accommodate the blue column.

class ExpandedRowPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Expanded Row Page'),
      ),
      body: SafeArea(
        child: Center(
            child: Row(
              children: [
                IntrinsicWidth(
                  stepWidth: 100,
// BLUE Column
                  child: Container(
                    color: Colors.lightBlueAccent,
                      child: Column(
                        children: [
                          //Text('Short'),
                          Text('shrt')
                        ],
                      )
                  ),
                ),
// YELLOW Column
                Flexible(
                  child: Container(
                    alignment: Alignment.center,
                    color: Colors.yellow,
                      child: Column(
                        children: [
                          Text('Very lonnnnnnnnnnnnnnnnnnnnnnnnnnnng texttttttttttttt'),
                        ],
                      )
                  ),
                )
              ],
            )
        ),
      ),
    );
  }
}

You could do the above without a Flexible yellow column, but a very long text child would cause an Overflow warning without a Flexible or Expanded wrapping widget.

A Row widget by itself has an infinite width constraint. So if a child wants to be bigger than screen width, it can, and will cause an overflow. (Try removing Flexible above and rebuild to see.)

Flexible and Expanded, used only inside Row & Column (or Flex, their superclass), checks screen width and other widgets inside a Row, and provides its children with a defined constraint size instead of infinite. Children (inside Flexible/Expanded) can now look up to parent for a constraint and size themselves accordingly.

A Text widget for example, will wrap its text when it's too wide for constraints given by Flexible/Expanded.

Comments

[Ela]

How should I use it? I've tried wrapping my Text and RichText with FittedBox but doesn't seems to work, can you give me a more detailed example?

[Tasnuva Tavasum oshin]

check i have edited it with your code , and see FittedBox Works

[Ela]

Thank you ! But I don't want my text to be resized, is there an other way?

[Tasnuva Tavasum oshin]

Transform.scale( scale: width <= 420 ? 0.5 : 0.8, child: Align( child: Container( alignment: Alignment.center, width: 420, height: 420, color: Colors.red, child: Text('Example', style: TextStyle(fontSize: 50),), ), ),

[Tasnuva Tavasum oshin]

you can use Transform scale if you dont want text to be resized