Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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,
      )
    ],
  ),
);
like image 657
Sana'a Al-ahdal Avatar asked Sep 14 '26 05:09

Sana'a Al-ahdal


1 Answers

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)),
      ],
    )
like image 184
Ahmad Ali Avatar answered Sep 16 '26 08:09

Ahmad Ali



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!