[flutter]Why my column alignment is always center?

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:

Atli

By Default - crossAxisAlignment = CrossAxisAlignment.center, for Column class. – Tarshatarshish

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.

Amary

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,

Kobold

Thanks man, this is what i wanted – Thierry

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,
                    

Paschal

Answer 4

Use it :

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

Circinus

Answer 5

Setting the height of the Container worked for me:

height: double.infinity,

Olodort

Answer 6

You can wrap the Column with Align

 return Align(
        alignment: Alignment.centerRight,
        child: Column(...)

Horselaugh