flutterflutter-layoutflutter-widgetflutter-column

What does CrossAxisAlignment.baseline, in Column


I have a question, I want to know what is the functionality of CrossAxisAlignment.baseline when we use Column in Flutter , nothing happen when I used this attribute can any one help me to figure out what is job. And I have to use textBaseline: TextBaseline attribute to use CrossAxisAlignment.baseline

Here is a Sample code I used

 return Container(
  width: 200,
  color: Colors.pink[200],
  child: Column(
    textBaseline: TextBaseline.alphabetic,
    crossAxisAlignment: CrossAxisAlignment.baseline,
   // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      Text('text'),
      Text('text2'),
      Container(
        color: Colors.yellow,
        width: 70,
        height: 70,
      ),
      Container(
        color: Colors.pink,
        width: 70,
        height: 70,
      ),
      Container(
        color: Colors.indigo,
        width: 70,
        height: 70,
      )
    ],
  ),
);

Solution

  • Actually using baseline in Column is of no use but while using it in a Row. Note: If you use crossAxisAlignment.baseline without defining textBaseLine the app will encounter an error Check Image for more simplified understanding

    Row(
          crossAxisAlignment: CrossAxisAlignment.baseline,
          textBaseline: TextBaseline.alphabetic,
          children: [
            Text('50',
                style: TextStyle(
                    fontSize: 50, decoration: TextDecoration.underline,  decorationColor: Colors.green)),
            Text('KG',
                style: TextStyle(
                    fontSize: 20, decoration: TextDecoration.underline, decorationColor: Colors.green)),
          ],
        )