[flutter]Why my column alignment is always center? - flutter

Question

I declared two columns in a row to layout the text and the icon.
The column for the icon is always center even if I set the mainAxisAlignment with MainAxisAlignment.start.
Here is the code for the card:
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:life_logger/models.dart';
import 'package:life_logger/screens/entry_editor_screen.dart';
import 'package:life_logger/widgets/dot.dart';
Wrap buildActivities(Entry entry) {
var children = <Widget>[];
var idx = 0;
entry.activities.forEach((activity) {
var element = Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
Icon(
activity.iconData,
color: entry.mood.color,
),
SizedBox(
width: 3,
),
Text(
'${activity.description}',
style: TextStyle(color: Colors.grey),
),
]);
children.add(element);
if (idx < entry.activities.length - 1) {
children.add(Dot());
}
idx++;
});
return Wrap(
children: children,
spacing: 5,
crossAxisAlignment: WrapCrossAlignment.center,
);
}
Widget buildEntryRow(Entry entry, BuildContext context) {
var entryRow = GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => EntryEditorScreen(entry)),
);
},
child: Row(
children: <Widget>[
// the column for the icon
Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 8.0, right: 8.0),
child: Icon(
entry.mood.iconData,
color: entry.mood.color,
size: 48,
),
),
],
),
Expanded(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Baseline(
baseline: 30.0,
baselineType: TextBaseline.alphabetic,
child: Text(
entry.mood.description,
style: TextStyle(
color: entry.mood.color,
fontSize: 24,
),
),
),
Baseline(
baseline: 30.0,
baselineType: TextBaseline.alphabetic,
child: Text(
DateFormat.Hm().format(entry.createdAt),
style: TextStyle(
color: Colors.grey,
fontSize: 16,
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(child: buildActivities(entry)),
],
),
Row(
children: <Widget>[
Text(
entry.note,
style: TextStyle(
color: Colors.grey,
fontSize: 16,
),
),
],
),
],
),
),
],
));
return entryRow;
}
class EntryCard extends StatefulWidget {
final List<Entry> entries;
EntryCard(this.entries);
#override
_EntryCardState createState() => _EntryCardState();
}
class _EntryCardState extends State<EntryCard> {
#override
Widget build(BuildContext context) {
var dateRow = Container(
height: 30,
decoration: BoxDecoration(
color: widget.entries[0].mood.color.withOpacity(0.5),
borderRadius: BorderRadius.all(Radius.circular(4.0)),
),
child: Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 24.5, right: 24.5),
child: Ring(
size: 5.0,
color: widget.entries[0].mood.color,
),
),
Text(
DateFormat('EEEEE, M月d日').format(widget.entries[0].createdAt),
style: TextStyle(
color: widget.entries[0].mood.color,
fontSize: 14,
),
)
],
));
return Card(
child: Column(
children: <Widget>[dateRow] +
widget.entries.map((entry) => buildEntryRow(entry, context)).toList(),
));
}
}
The actual layout as follow:

Answer 1

Use crossAxisAlignment: CrossAxisAlignment.start
And for future, I would suggest you to add code that is independent of other code so that others can run it and see.

Answer 2

like that for one widget
Container(
child: Align(
alignment: Alignment.centerRight,
child: Text(S.current.forgetPassword),
),
),
or for all
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,

Answer 3

If you want you can adjust column according to you .
Here is code of how to call widgets of columns at start.
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,

Answer 4

Use it :
Column(
children: const <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text('Text 1')
),
Align(
alignment: Alignment.centerLeft,
child: Text('Text 2')
),
],
)

Answer 5

Setting the height of the Container worked for me:
height: double.infinity,