roee attias
roee attias

Reputation: 183

Flutter align text vertically inside a wrap widget

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

Upvotes: 2

Views: 3916

Answers (1)

theFreeman96
theFreeman96

Reputation: 124

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

Upvotes: 6

Related Questions