How to position a widget left-most of a column in flutter?

박배추 0
Viewed 29

I'm new to flutter. I have a alignment-centered column with dynamically sized children widgets. I want to add a title Text widget on the top left most of that column based on its width. I want all the other child widgets to be centered. How can I achieve this?

Problem Visualized

Column(
  mainAxisSize: MainAxisSize.min,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Text(
      "Title",
      style: themeData.textTheme.titleMedium!.copyWith(
        fontWeight: FontWeight.bold,
        fontSize: 20
      )
    ),
    ColoredBox(color: Colors.red, child: SizedBox.fromSize(size:const Size(100, 30))),
    ColoredBox(color: Colors.blue, child: SizedBox.fromSize(size:const Size(200, 60))),
    ColoredBox(color: Colors.green, child: SizedBox.fromSize(size:const Size(170, 40))),
  ]
)
alignment widget dart flutter
2 Answers

Try below code and set CrossAxisAlignment.start refer layout

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisSize: MainAxisSize.min,
  children: [
    Text('Title'),
    ColoredBox(
      color: Colors.red,
      child: SizedBox.fromSize(size: Size(100, 30)),
    ),
    ColoredBox(
      color: Colors.blue,
      child: SizedBox.fromSize(size: Size(200, 60)),
    ),
    ColoredBox(
      color: Colors.green,
      child: SizedBox.fromSize(size: Size(170, 40)),
    ),
  ],
),

Result-> image

Ravindra S. Patil0

Just wrap your Text widget with Align widget

Column(
  mainAxisSize: MainAxisSize.min,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    const Align(
      alignment: Alignment.centerLeft,
      child: 
     Text( 
      "Title",
      )),
    ColoredBox(color: Colors.red, child: SizedBox.fromSize(size:const Size(100, 30))),
    ColoredBox(color: Colors.blue, child: SizedBox.fromSize(size:const Size(200, 60))),
    ColoredBox(color: Colors.green, child: SizedBox.fromSize(size:const Size(170, 40))),
  ]
);
Tomislav Juroš0
Related