What does CrossAxisAlignment.baseline, in Column

Issue

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

Answered By – Ahmad Ali

Answer Checked By – Senaida (FlutterFixes Volunteer)