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

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.

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)),
                      ],
                    ),
                  ),

CodePudding user response：

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)'),
                    ],
                  ),
                ),
              ]),
            ]),
          ),

CodePudding user response：

You were using crossAxisAlignment on wrong Row widget.
Try This and Upvote this answer if it helps :)

Container(
            padding: EdgeInsets.only(top: 0, left: 30, right: 30, bottom: 0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
              
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                Expanded(
                  flex: 5,
                  child:
                  Row(
                    children: [
                    Container(
                        height: 20, width: 20, child: Icon(Icons.verified_user)),
                    SizedBox(width: 5),
                    Text("Text Sample"),
                  ]),
                ),
                SizedBox(width: 1),
                Expanded(
                  flex: 3,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Text("2500",style: TextStyle(fontSize: 50),),
                      Text("2500",style: TextStyle(fontSize: 50),),
                    ],
                  ),
                )
              ])
            ])),