Can't align icon and text baseline

user_11875658 0
Viewed 488

I'm trying to align an icon and a text with CrossAxisAlignment.baseline but I can't get it right.

What I want

enter image description here

What I get

enter image description here

This is my code:

Row(
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.alphabetic,
  children: [
    Icon(Icons.cloud_outlined),
    Text(
      "Cloud",
      style: TextStyle(fontSize: 18),
    )
  ],
)
flutter-layout flutter
2 Answers

Simply change the cross axis alignment to end

Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                textBaseline: TextBaseline.alphabetic,
                children: [
                  Icon(Icons.cloud_outlined, size: 20),
                  SizedBox(width: 5),
                  Text(
                    "Cloud",
                    style: TextStyle(fontSize: 18),
                  )
                ],
              ),

Result:-

enter image description here

user_148077580

You can used ListTile insted of Row

 ListTile(
        leading: Icon(Icons.cloud_outlined),
        title: Text(
          "Cloud",
          style: TextStyle(fontSize: 18),
        ),
      ),
user_139972100
Related