align single item left in column when column crossAxisAlignment is center-CodePudding

Most contents in my column is centre so i preferred to choose crossAxisAlignment: CrossAxisAlignment.center but one top most content i want to be left aligned. How can i achieve this?

return Scaffold(
  body: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Text('Left'), // It must be left aligned
      Text('Center'),
      Text('Center'),
      Text('Center'),
      Text('Center'),
      Text('Center'),
      Text('Center'),
      Text('Center'),
      Text('Center'),
      Text('Center'),
      Text('Center'),
      Text('Center'),
      
    ],
  ),
);

CodePudding user response：

Wrap the widget you want with Align widget and set it to be left aligned.

Align(
  alignment: Alignment.centerLeft,
  child: Text('Left'),
),

CodePudding user response：

   return Scaffold(
  body: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Align(
         alignment: Alignment.topLeft,
         child :Text('Left')
      ), // It must be left aligned
      Text('Center'),
      Text('Center'),
      Text('Center'),
      Text('Center'),
      Text('Center'),
      Text('Center'),
      Text('Center'),
      Text('Center'),
      Text('Center'),
      Text('Center'),
      Text('Center'),
      
    ],
  ),
);

CodePudding user response：

simple wrap the left item with a row and in the row add a expanded sized box like this:

Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Row(
        children: [
          Text('Left'),
          // this is the same thing like a expanded widget with an sized box 
          // in it but the expanded widget 
          // makes problems on a real device
          Flexible(
            child: SizedBox(
              width: MediaQuery.of(context).size.width,
            ),
          ),
        ],
      ),
      Text('Center'),
      Text('Center'),
      Text('Center'),
      Text('Center'),
      Text('Center'),
      Text('Center'),
      Text('Center'),
      Text('Center'),
      Text('Center'),
      Text('Center'),
      Text('Center'),
      
    ],
  ),

CodePudding user response：

try this way

Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Text('Left'),
        Align(alignment: Alignment.center, child: Text('Center')),
        Align(alignment: Alignment.center, child: Text('Center')),
        Align(alignment: Alignment.center, child: Text('Center')),
        Align(alignment: Alignment.center, child: Text('Center')),
        Align(alignment: Alignment.center, child: Text('Center')),
        Align(alignment: Alignment.center, child: Text('Center')),
        Align(alignment: Alignment.center, child: Text('Center')),
        Align(alignment: Alignment.center, child: Text('Center')),
        Align(alignment: Alignment.center, child: Text('Center')),
        Align(alignment: Alignment.center, child: Text('Center')),
        Align(alignment: Alignment.center, child: Text('Center')),
      ],
    )