对齐小部件内部，在颤动行中展开

Question

I'm trying to align widget inside the row but the widget automatically aligns to the center. I want to align both the widget to the top of the row.

 Widget PlayerConnectWidget(double width,double height){
      return SingleChildScrollView(
          child: Container(

            margin: EdgeInsets.only(left: width*0.03,right: width*0.03,top: width*0.05),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[

                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    Flexible(flex:1,fit:FlexFit.loose,child:MyFeedTile(),),
                    Flexible(flex:1,fit:FlexFit.loose,child:_logoContainer(width),),

                ],),
                SizedBox(height: width*0.02),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                   Expanded(flex: 7,child: Container(
                     margin: EdgeInsets.only(right: width*0.03),
                     padding: EdgeInsets.all(width*0.03),
                     decoration: BoxDecoration(color: Colors.white70,borderRadius: new BorderRadius.circular(12.0),),
                     child: Column(
                       crossAxisAlignment: CrossAxisAlignment.stretch,
                       children: <Widget>[
                       Text('Venue'),
                         new Divider(
                           color: Colors.black87,
                         ),
                       Text('Location'),
                         new Divider(
                           color: Colors.black87,
                         ),
                       Text('Sports'),
                         new Divider(
                           color: Colors.black87,
                         ),
                       Text('Opening Times'),
                         new Divider(
                           color: Colors.black87,
                         ),
                       Text('Notes'),
                         new Divider(
                           color: Colors.black87,
                         ),
                     ],),

                   ),),
                    Expanded(flex: 3, child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                    //  mainAxisAlignment: MainAxisAlignment.start,
                      mainAxisSize: MainAxisSize.max,
                      children: <Widget>[

                      //  SizedBox(height: width*0.02),
                        Container(
                          decoration: BoxDecoration(
                            color: MyColors.yellowBg,
                            borderRadius: new BorderRadius.circular(8.0),
                          ),
                          child:  FlatButton(
                              onPressed: (){
                              },
                              child: Text(
                                  'Message',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 16.0,

                                  )
                              )
                          ),),
                        SizedBox(height: width*0.02),
                        Container(
                          decoration: BoxDecoration(
                            color: MyColors.yellowBg,
                            borderRadius: new BorderRadius.circular(8.0),
                          ),
                          child:  FlatButton(
                              onPressed: (){
                              },
                              child: Text(
                                  'Continue',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 16.0,

                                  )
                              )
                          ),)
                      ],),)
                  ],)
              ],
            ),
          )
      );
    }


Widget _logoContainer(double width){
  return Container(
    margin: EdgeInsets.only(left:width*0.05),
    height: 110.0,
    width: 120.0,
    decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage("assets/images/cmp_click.png"),
          fit: BoxFit.fill,
        )
    ),
  );
}
Widget MyFeedTile(){
  return GestureDetector(
    onTap: (){
      Navigator.push(context, MaterialPageRoute(builder: (context) => FeedView()),);
    },
    child: Container(
      padding: EdgeInsets.only(top:width*0.02,bottom: width*0.02),
      decoration: BoxDecoration(
        color: MyColors.colorPrimaryDark,
        borderRadius: new BorderRadius.circular(12.0),

      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Expanded(flex: 3,
            child: Container(
              //decoration: BoxDecoration(color: Colors.green[100]),
              height: 50,
              width: 50,
              margin: EdgeInsets.all(width*0.01),
              child: CircleAvatar(
                radius: 50.0,
                backgroundImage:
                NetworkImage('https://via.placeholder.com/150'),
                backgroundColor: Colors.transparent,),),

          ),
          Expanded(flex: 7,child: Container(
            //decoration: BoxDecoration(color: Colors.green[100]),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Text('User name',style: TextStyle(color: Colors.white,fontFamily: 'bold'),),
                SizedBox(height: width*0.01),
                Text('Time',style: TextStyle(color: Colors.white,fontFamily: 'light'),),
                SizedBox(height: width*0.01),
                Text('Location',style: TextStyle(color: Colors.white,fontFamily: 'light'),),
                SizedBox(height: width*0.01),
                Text('Date',style: TextStyle(color: Colors.white,fontFamily: 'light'),),
              ],),),)
        ],),

    ),);
}

I'm getting this

and I'm trying to achieve this

and this

Answer 1

You just need to add the following line in your code :

crossAxisAlignment: CrossAxisAlignment.start

  Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.start,

Answer 2

There is a property name cross-axis alignment for both Row and Column As I see you have used main axis alignment.

Main Axis for Column is to align children Vertically.

Main Axis for Row is to align children Horizontally.

Cross Axis for Column is to align children Horizontally.

Cross Axis for Row is to align children Vertically.

So you can try with this for your row

crossAxisAlignment: CrossAxisAlignment.start,