10

How do I keep a RaisedButton from expanding to fill an Expanded that contains it? I want to create three columns of widths proportional to the space available, but I want the child in each column to be its natural size, without consuming the entire width of its parent Expanded.

  Widget _controls(BuildContext cx) {
    return Row(
      children: [
        Expanded(
          flex: 1,
          child: player.isOnFirstItem
              ? Container()
              : IconButton(
                  icon: Icon(Icons.arrow_back),
                  onPressed: () => control.gotoPreviousItem(),
                ),
        ),
        Expanded(
          flex: 4,
          child: player.isComplete()
              ? Text(player.currentItem.status) // I'll be adding more here
              : RaisedButton(
                  child: Text(player.currentItem.actionText),
                  onPressed: () => player.currentItem.action(),
                ),
        ),
        Expanded(
          flex: 1,
          child: player.isOnLastItem
              ? Container()
              : IconButton(
                  icon: Icon(Icons.arrow_forward),
                  onPressed: () => player.gotoNextItem(),
                ),
        ),
      ],
    );

The RaisedButton also fills the flex space when I further nest it within a Container. I can't figure out which properties might prevent this.

Searching around for answers, it seems that everyone is trying to accomplish just the opposite.

Pablo Barrera
  • 10,387
  • 3
  • 28
  • 49
Joe Lapp
  • 2,435
  • 3
  • 30
  • 42
  • I noticed that the post was edited to express class names as code. It seems to be a convention in GitHub issues and Medium articles **not to** display class names as code. I wrote several articles for Medium first expressing class names as code but found it hard to read. After examining many other articles for conventions, discovered that very few do this and so removed the code formatting. Boy did everything get cleaner. – Joe Lapp Oct 26 '19 at 14:33
  • I'm not sure what is the official convention in StackOverflow for classes, I saw people formatting them as code and I started doing the same for anything related to code, like when mentioning methods too. But feel free to edit your post if you think is better the other way. – Pablo Barrera Oct 26 '19 at 15:03

1 Answers1

11

Look what the documentation of Expanded says:

A widget that expands a child of a Row, Column, or Flex so that the child fills the available space.

So, the RaisedButton will fill the available space.

You tried to wrap the button with Container, but look what the documentation of Container says in case it has a child:

(in that case) the widget has a child but no height, no width, no constraints, and no alignment, and the Container passes the constraints from the parent to the child and sizes itself to match the child.

So, the RaisedButton will take the constraints from the parent of the Container, which is to fill the available space.

What you need is to wrap the RaisedButton with a widget that doesn't size itself to match the child's size (because it won't expand) and doesn't alter the size of the child (because the child could expand).

So, some widgets to wrap the RaisedButton that meets these conditions could be:

  • Row
  • Wrap
  • UnconstrainedBox
  • Column with mainAxisSize: MainAxisSize.min
  • Center with heightFactor: 1.0.
  • Align with heightFactor: 1.0.
Pablo Barrera
  • 10,387
  • 3
  • 28
  • 49