2

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

1 Answer 1

5

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(),
    ],
  ),
2
  • it's not working. Mar 18, 2022 at 21:42
  • Sorry for the delay, I modified the answer with the updated code! Mar 21, 2022 at 9:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.