Flutter - Container in row/column to fill space but not expand further

Question

I'm trying to use a Conatiner to create a underline type effect as shown here:

However, the Container I'm using isn't visible.

I've tried wrapping wrapping the column in an Exapnded but this then fills all of the horizontal space.

The only thing i've found that works (which is a bit of a dirty hack) is to add a text widget as a child of the container with the same text as the title and this makes it the correct width. I'm sure there's something obvious but it's totally escaped me.

Thanks in advance.

    return Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Column(
          children: [
            // title
            Text(
              title,
              style: baseStyle,
            ),

            // underline
            Container(
              height: 4,
              decoration: BoxDecoration(
                color: Colors.yellow,
                borderRadius: BorderRadius.circular(2),
              ),
              // hacky
              // child: Text(
              //   title,
              //   style: baseStyle,
              // ),
            ),
          ],
        ),
      ],
    );
  }

mainAxisSize: MainAxisSize.max, try make this min. not max – Arbiter Chil Mar 13 '23 at 10:50 — Arbiter Chil, Mar 13 '23 at 10:50

score 1 · Accepted Answer · answered Mar 13 '23 at 11:37

1

Wrap your column with IntrinsicWidth.

Row(
  ...,
  children: [
    IntrinsicWidth(
      child: Column(
        children: [...],
      ),
    ),
  ],
);

answered Mar 13 '23 at 11:37

debug_ing

476
3
13

score 0 · Answer 2 · answered Mar 13 '23 at 10:49

0

Add width of your container

Container(
          height: 4,
          width: 80,   // <---------------------add here
          decoration: BoxDecoration(
            color: Colors.yellow,
            borderRadius: BorderRadius.circular(2),
          ),
        ),

answered Mar 13 '23 at 10:49

Nams

282
9

Unfourtunately I won't know what the width will be - it needs to match the length of the title – Paul Charlton Mar 13 '23 at 12:31

score 0 · Answer 3 · answered Mar 13 '23 at 11:02

You can use Flexible Widget to achieve That.

return Row(
  mainAxisSize: MainAxisSize.max,
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Column(
      children: [
        // title
        Flexible(
        flex:1,fit: FlexFit.loose,
        child: Text(
          title,
          style: baseStyle,
        ),

        // underline

        Flexible(
        flex:1,fit: FlexFit.loose,
        child: Container(
          height: 4,
          decoration: BoxDecoration(
            color: Colors.yellow,
            borderRadius: BorderRadius.circular(2),
          ),
          // hacky
          // child: Text(
          //   title,
          //   style: baseStyle,
          // ),
        
        ),
      ],
    ),
  ],
);}

Here the flex property is used to specify the relative proportions of each child widget. And the FlexFit enum is used to determine how a Flexible widget should fit into the available space in its parent Row or Column widget.

The FlexFit enum has two possible values:

FlexFit.tight: This value instructs the Flexible widget to fill all the available space in its parent widget. If there is not enough space available, the Flexible widget will overflow its parent widget.

FlexFit.loose: This value instructs the Flexible widget to take up only the minimum space required to accommodate its child widget. If there is extra space available, the Flexible widget will leave it empty.

N:B Now play with the Flexible widget to get the perfect output.

I couldn't get this to work - the example above ran into the same problems i had (not visible) and if the flexible was moved around the column then it filled the full width again — Paul Charlton, Mar 13 '23 at 12:31

score 0 · Answer 4 · answered Mar 13 '23 at 11:44

0

just add some width for your Container and you can use Divider widget

answered Mar 13 '23 at 11:44

dev_otaku

11
1

Unfourtunately I won't know what the width will be - it needs to match the length of the title – Paul Charlton Mar 13 '23 at 12:30
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 19 '23 at 16:11

Flutter - Container in row/column to fill space but not expand further

4 Answers4