CODEWITHSUNDEEP
flutterformattingexpanded
Paul Charlton
Paul Charlton

Reputation: 531

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

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

page card title and underline

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,
              // ),
            ),
          ],
        ),
      ],
    );
  }

Upvotes: 1

Views: 1634

Answers (4)

dev_otaku
dev_otaku

Reputation: 11

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

Upvotes: 0

Jaecheol Park
Jaecheol Park

Reputation: 702

Wrap your column with IntrinsicWidth.

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

Upvotes: 2

Arifur Rashid
Arifur Rashid

Reputation: 25

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.

Upvotes: 0

Nams
Nams

Reputation: 302

Add width of your container

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

Upvotes: 0

Related Questions