Search code examples
flutterdartcontainersalignmentrow

Aligning children inside a row to the top doesn't work


How does one align the text ('Text Sample') to the top of the Row.

Based on the image below, it shows it is sitting in the center.

I have used crossAxisAlignment: CrossAxisAlignment.start but it doesn't seem to do anything.

enter image description here

child: Container(
            padding: EdgeInsets.only(top: 0, left: 30, right: 30, bottom: 0),
            child: Column(
              children: [
                Row(children: [
                  Expanded(
                    flex: 5,
                    child: (Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                            height: 20, width: 20, child: Image.network(image)),
                        SizedBox(width: 5),
                        Text(name),
                      ],
                    )),
                  ),
                  SizedBox(width: 1),
                  Expanded(
                    flex: 3,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Text(numberA!.toStringAsFixed(0)),
                        Text(numberB!.toStringAsFixed(0)),
                      ],
                    ),
                  ),

Solution

  • Try this:

    Container(
                padding: EdgeInsets.only(top: 0, left: 30, right: 30, bottom: 0),
                child: Column(children: [
                  Row(crossAxisAlignment: CrossAxisAlignment.start, //<-- add this children: [
                    Expanded(
                      flex: 5,
                      child: (Row(
                        children: [
                          Container(
                            height: 20, width: 20, child: Image.network(image)),
                          SizedBox(width: 5),
                          Text('name'),
                        ],
                      )),
                    ),
                    SizedBox(width: 1),
                    Expanded(
                      flex: 3,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: [
                          Text('numberA!.toStringAsFixed(0)'),
                          Text('numberB!.toStringAsFixed(0)'),
                        ],
                      ),
                    ),
                  ]),
                ]),
              ),
    

    enter image description here