Search code examples
flutterdartwidgetalignment

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


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

Solution

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