How to align image along with text in flutter

Question

enter code hereenter image description herehow to reduce the vertical distance between widgets, I even haven't used any sizebox or padding then why this spacing happened, and also if I tried using "crossAxisAlignment" to start only text moved up but not image. why?

                Wrap(
                 alignment: WrapAlignment.start,
                  children: [
                    Image.asset("assets/images/bline.png",
                        color: Colors.white, width: 150),
                    Text(
                      "or login with",
                      style: TextStyle(
                        fontFamily: GoogleFonts.oregano().fontFamily,
                        fontSize: 25,
                        color: Colors.white,
                      ),
                    ),
                    Image.asset("assets/images/bline.png",
                        color: Colors.white, width: 150),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    SocialCard(
                      icon: "assets/icons/google.svg",
                      press: () {},
                    ),
                    SocialCard(
                      icon: "assets/icons/facebook.svg",
                      press: () {},
                    ),
                    SocialCard(
                      icon: "assets/icons/phone.svg",
                      press: () {},
                    ),
                  ],
                ),

Try with Align or positioned widgets refer this links https://stackoverflow.com/questions/53716571/how-to-align-single-widgets-in-flutter or https://www.geeksforgeeks.org/flutter-positioned-widget/ — Abhijith, Aug 19 '21 at 09:29
A warm welcome to Stack Overflow community. Please read https://stackoverflow.com/help/how-to-ask and share your code snippet to reproduce the errors. — Md. Yeasin Sheikh, Aug 19 '21 at 10:11
Try using mainAxisSize : MainAxisSize.min in Column. Still issue shows your image might have padding or extra space vertically ! — Naveen Avidi, Aug 19 '21 at 11:11
Naveen Avidi , still nothing happened and I already reviewed it more than 10 times no extra spacing was provided — jasmine, Aug 19 '21 at 11:26

score 0 · Answer 1 · answered Aug 19 '21 at 08:55

0

Have you used Column as a parent of your Row widgets? if yes, you should set:

mainAxisAlignment: MainAxisAlignment. //use different formats to find one that best suits for your purpose

In general, you should use mainAxisAlignment and crossAxisAlignment for each Row and Column to align their children in each direction. see this Flutter crossAxisAlignment vs mainAxisAlignment.

answered Aug 19 '21 at 08:55

Abbasihsn

2,075
1
7
17

mainAxisAlignment only moves text up not the side image – jasmine Aug 19 '21 at 09:07

Jahidul Islam · Answer 2 · 2021-08-19T11:35:51.853

0

You just replace your Column with wrap

EDITED

Wrap(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
              Image.asset("assets/images/bline.png",
                color: Colors.green,width: 120,),
              SizedBox(height: 10,),
              Text(
                "or login with",
                style: TextStyle(
                  //  fontFamily: GoogleFonts.oregano().fontFamily,
                  fontSize: 25,
                  color: Colors.black,
                ),
              ),
              SizedBox(height: 10,),
              Image.asset("assets/images/bline.png",
                color: Colors.green,width: 120,),
            ],),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SocialCard(
                  icon: "assets/icons/google.svg",
                  press: () {},
                ),
                SocialCard(
                  icon: "assets/icons/facebook.svg",
                  press: () {},
                ),
                SocialCard(
                  icon: "assets/icons/phone.svg",
                  press: () {},
                ),
              ],
            ),
          ],
        )

edited Aug 19 '21 at 11:35

answered Aug 19 '21 at 09:00

Jahidul Islam

11,435
3
17
38

wait m trying to attach code here .actually m new on stack so facing lots of issues on posting code – jasmine Aug 19 '21 at 10:41
please review it I edited the code also let me know why these 2 rows why automatically created such wide space without providing any alignment or spacing – jasmine Aug 19 '21 at 11:06
gimme some moment, i will check – Jahidul Islam Aug 19 '21 at 11:10
@jasmine please have a look i edited my answer – Jahidul Islam Aug 19 '21 at 11:36
still, no change, should I send you the whole code so you can review it and I also get to know whether I actually used any extra space or not – jasmine Aug 19 '21 at 12:32
from my end it's working, you bind your code with two row inside `wrap` – Jahidul Islam Aug 19 '21 at 12:36
no just the 1st row (image ,text , image) inside wrap – jasmine Aug 19 '21 at 12:45
you also wrap 2nd row, otherwise just paste my code i hope it works for you – Jahidul Islam Aug 19 '21 at 12:47
i did the same have only copy pase your code – jasmine Aug 19 '21 at 12:49
1st row (image ,text , image), 2nd row( 3 images) both two in under wrap – Jahidul Islam Aug 19 '21 at 13:01
or share your git link – Jahidul Islam Aug 19 '21 at 13:04

score 0 · Answer 3 · answered Aug 19 '21 at 09:12

If you've used Column. maybe you should set the parameter mainAxisSize и mainAxisAlignment

To change the spacing between widgets you can use SizedBox for fixed margins or Spacer to fill the remaining free space. You can also wrap your widgets in Expanded. And set Flex option for Expanded and Spacer

Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          widget_1,
          SizedBox(
            height: 10,
          ),
          widget_2,
          Spacer(),
          widget_3,
        ],
      );

How to align image along with text in flutter

3 Answers3