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