Flutter align widgets in an expanded container, to the top left and bottom right?

Question

I have a layout in my application which comprises of some text and a timestamp. I'm looking to have the timestamp (clock icon in the picture) be at the bottom left corner of the expanded widget, while the text ("what" string in the picture) should start from the top right.

Representation:

|text|              |
|    -----------    |
|    empty space    |
|    -----------    |
|              |time|

Currently, what I managed below have them aligned to the extreme left and right, but they seem to be constrained by the Column widget and as such, are aligned to the centre of the widget. And I cannot seem to get expanded to work within another Expanded.

Widget code:

return new Container(
      child: new Row(
        children: <Widget>[
          new Column(
            children: <Widget>[
              new MaterialButton(
                minWidth: 60.0,
                child: new Icon(Icons.keyboard_arrow_up),
                onPressed: () => null,
              ),
              new Container(
                padding: new EdgeInsets.all(5.0),
                child: new Text("1231"),
              ),
              new MaterialButton(
                minWidth: 60.0,
                child: new Icon(Icons.keyboard_arrow_down),
                onPressed: () => null,
              ),
            ],
          ),
          new Expanded(
            // child: new Container(
            // padding: EdgeInsets.all(10.0),
            child: new Column(
              // mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                new Align(
                  alignment: Alignment.topLeft,
                  child: new Text("what"),
                ),

                // "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."),
                new Align(
                  // padding: new EdgeInsets.all(10.0),
                  alignment: Alignment.bottomRight,
                  child: new Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      new Container(
                        padding: new EdgeInsets.all(2.0),
                        child: new Icon(
                          Icons.access_time,
                          size: 12.0,
                        ),
                      ),
                      new Container(
                        padding: new EdgeInsets.all(2.0),
                        child: new Text("1 hr"),
                      ),
                    ],
                  ),
                ),
              ],
            ),
            // ),
          ),
          new Column(
            children: <Widget>[
              new MaterialButton(
                minWidth: 60.0,
                child: new Icon(Icons.save, size: 20.0),
                onPressed: () => null,
              ),
              new Container(
                padding: new EdgeInsets.all(5.0),
                child: new Text("8"),
              ),
              new MaterialButton(
                minWidth: 60.0,
                child: new Icon(Icons.comment, size: 20.0),
                onPressed: () => null,
              ),
            ],
          ),
        ],
      ),
    );
  }

Answer 1

尝试使用alignment: Alignment.bottomRight作为Container类的命名参数

Answer 2

Ok, so I modified your Widget and I added some Colors to the container to track the changes very easy:

        double maxHeight = 130.0;

    Widget _buildLeft() {
      return Container(
        height: maxHeight,
        color: Colors.red,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            new MaterialButton(
              minWidth: 60.0,
              child: new Icon(Icons.keyboard_arrow_up),
              onPressed: () => null,
            ),
            new Container(
              padding: new EdgeInsets.all(5.0),
              child: new Text("1231"),
            ),
            new MaterialButton(
              minWidth: 60.0,
              child: new Icon(Icons.keyboard_arrow_down),
              onPressed: () => null,
            ),
          ],
        ),
      );
    }

    Widget _buildCenter() {
      return Expanded(
        child: Container(
          height: maxHeight,
          color: Colors.blue,
          child: Stack(
            children: <Widget>[
              Positioned(
                child: new Text("what"),
                top: 0.0,
                left: 0.0,
              ),
              // "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."),
              Positioned(
                bottom: 0.0,
                right: 0.0,
                child: new Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    new Container(
                      padding: new EdgeInsets.all(2.0),
                      child: new Icon(
                        Icons.access_time,
                        size: 12.0,
                      ),
                    ),
                    new Container(
                      padding: new EdgeInsets.all(2.0),
                      child: new Text("1 hr"),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      );
    }

    Widget _buildRight() {
      return Container(
        height: maxHeight,
        color: Colors.green,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            new MaterialButton(
              minWidth: 60.0,
              child: new Icon(Icons.save, size: 20.0),
              onPressed: () => null,
            ),
            new Container(
              padding: new EdgeInsets.all(5.0),
              child: new Text("8"),
            ),
            new MaterialButton(
              minWidth: 60.0,
              child: new Icon(Icons.comment, size: 20.0),
              onPressed: () => null,
            ),
          ],
        ),
      );
    }

    @override
    Widget build(BuildContext context) {
      return new Container(
        child: new Row(
          children: <Widget>[
            _buildLeft(),
            _buildCenter(),
            _buildRight(),
          ],
        ),
      );
    }

Answer 3

You can use a Container wrap the Align, This can stop Align from expanding itself

Container(
  color: darkBlue,
  child: Align(
    alignment: Alignment.center,
    heightFactor: value,
    child: Container(
    // alignment: Alignment.center, //<--must not uncomment this
      padding: const EdgeInsets.all(16),
      color: Colors.red,
      child: child,
    ),
  ),
)