Can't align icon and text baseline

Question

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

What I want

What I get

This is my code:

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

Answer 1

You can used ListTile insted of Row

Using ListTile

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

Using Row:

     Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Icon(Icons.cloud_outlined),
            SizedBox(width: 10),
            Text(
              "Cloud",
              style: TextStyle(fontSize: 18),
            )
          ],
        ),

Result->

Answer 2

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:-