Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

flutter

dart

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.

enter image description here

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,
              ),
            ],
          ),
        ],
      ),
    );
  }
like image 905
Carrein Avatar asked Aug 08 '18 18:08

Carrein


People also ask

How do you align widgets on right side Flutter?

Wrap the widget you wish to align with the Align widget and set its alignment property. For example, this would align a text widget to the middle right of the parent. Notice in the image that the alignment (x,y) doesn't need to be within the range [-1, +1] .


1 Answers

try using alignment: Alignment.bottomRight as a named parameter of Container class

like image 193
Sameer Mungole Avatar answered Sep 19 '22 14:09

Sameer Mungole