Flutter align text vertically inside a wrap widget

Issue

I am writing a flutter app that suppose to have a row with icon and text but for some reason I can’t put the text in the same line as the icon vertically wise. What I mean is that I want to have an icon, than in the same line a text but the text is a little bit higher than the icon. Someone know how can I fix it?. (I need to have the row because I want to put more things in the line).

my code:

              Column(
                children: [
                  Container(
                    height: size.height * .04,
                    color: NotificationColor,
                    child: Row(
                      children: [
                        Wrap(
                          spacing: size.width * .040,
                          children: [
                            const Icon(CupertinoIcons.bell),
                            Text(
                              "Notification", // this is the text that is higher then the icon
                              style: TextStyle(
                                fontSize: size.width * .035,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  SizedBox(height: size.height * .01),
                  Container(),
                  SizedBox(height: size.height * .01),
                  Container(),
                ],
              ),

Solution

Have you tried using the following property of the Row?

CrossAxisAlignment.center

This should vertically align all children of the Row.

Let me know if it works!

---

Update

Try the code below, it shoud work fine.

Column(
    children: [
      Container(
        height: MediaQuery.of(context).size.height * .04,
        color: Colors.red,
        child: Row(
          children: [
            Wrap(
              crossAxisAlignment: WrapCrossAlignment.center,
              spacing: MediaQuery.of(context).size.width * .040,
              children: [
                const Icon(CupertinoIcons.bell),
                Text(
                  "Notification", // now the text is vertically aligned with the icon
                  style: TextStyle(
                    fontSize: MediaQuery.of(context).size.width * .035,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
      SizedBox(height: MediaQuery.of(context).size.height * .01),
      Container(),
      SizedBox(height: MediaQuery.of(context).size.height * .01),
      Container(),
    ],
  ),

Answered By – theFreeman96

Answer Checked By – Timothy Miller (FlutterFixes Admin)