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)

Leave a Reply

Your email address will not be published.