Question

I have a Stack widget with some children. One of those children is an Align which has a Container child which has a Column child. This Column has some children. Now, in my Stack, the Column is way bigger than it should be (it fills the complete screen) although a third of that space would be enough. I'd like to know how I can use something like Flexible so I can use the fit property to tighten up the space. Is this possible?
Here is a representation of my code:

new Stack(
  children: <Widget>[
    new Container(...),
    new Align( // This takes up way more space than needed!
      alignment: new Alignment(1.0, 1.0) // This widget should be displayed at the bottom
      child: new Container(
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget> [
            new Container(child: new Center(child: new Text("text"))),
            new Row(children: [...]),
            new Row(children: [...]),
            new Row(children: [...]),
            new Row(children: [...]),
          ]
        )
      )
    )
  ]
)

I tried playing around with the fit property but without any luck.

Answer 1

By default, Column has mainAxisSize defaulting to MainAxisSize.max. Which means that Column will take all the available height.

In your case, you don't want that. So you can set that value to MainAxisSize.min, which will do the opposite : fit it's children.

The end result is :

    child: new Stack(
      children: <Widget>[
        new Container(...),
        new Align(
          alignment: Alignment.bottomCenter,
          child: new Container(
            color: Colors.purple,
            child: new Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[new Text("foo"), new Text("hello world")],
            ),
          ),
        )
      ],
    ),

Fit of individual children in Stack

1 个答案: