How provide justify of items by the left (or right) edge in the Column/Row container? - flutter

Question

Below is the source code of the function, which allows show the menu by clicking on the canvas. In this case, the menu is the modeless window.
void _showModeless(BuildContext context) {
_modeless = new OverlayEntry(
opaque: false,
builder: (context) {
return new Positioned(
top: 100.0,
left: 100.0,
child: new Column(
children: [
selectItem("properties"),
selectItem("delete"),
selectItem("zoom"),
]
),
);
});
Overlay.of(context).insert(_modeless);
_startWaiting();
}
GestureDetector selectItem(String text) {
return new GestureDetector(
onTap: () {
setState(() {
//_lights = true;
_closeModelessWindow();
print('=== tap ===');
});
},
child: new Container(
child: item(text),
decoration: new BoxDecoration (
color: Colors.blue, borderRadius: new BorderRadius.only(
topLeft: Radius.circular(16.0),
bottomRight: Radius.circular(16.0),
),
),
padding: const EdgeInsets.only(top: 8.0, bottom: 8.0, left: 8.0, right: 8.0)
),
);
}
Row item(String text)
{
return new Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Icon(Icons.content_paste, color: Colors.white),
new Padding(
padding: const EdgeInsets.only(left: 16.0, right: 24.0, ),
child: new Text(text, overflow: TextOverflow.ellipsis,
style: new TextStyle(fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.white,
decoration: TextDecoration.none
),
),
),
],
);
}
I do not like that the items are located in the center of this window. How to move them to the left up to some vertical reference line?

Answer 1

You can left-align the children of the Column using crossAxisAlignment: CrossAxisAlignment.start, in the Column constructor.

Answer 2

Please see below approach to align left/right in column/row.
Column
// for Left align
new Container(
width: double.infinity,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text('Building Name'),
new Text(propertyModel.title),
],
),
);
// for Right align
just change CrossAxisAlignment.start to CrossAxisAlignment.end in above code
Row
// for Left align
new Container(
width: double.infinity,
child: new Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Text('Building Name'),
],
),
);
// for Right align
just change MainAxisAlignment.start to MainAxisAlignment.end in above code
For more reference Please refer Column and Row

Answer 3

Add the crossAxisAlignment property to your Column
crossAxisAlignment: CrossAxisAlignment.start