CODEWITHSUNDEEP
flutterflutter-layout
Darshan
Darshan

Reputation: 11669

How to remove space between image and text in Flutter

I want to display the text (Facebook) exactly below the image (fb icon) without any spacing. Below is the code as of now :

@override   Widget build(BuildContext context) {
    return Scaffold(
      // prevent pixel overflow when typing
      resizeToAvoidBottomPadding: false,
      body: Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage(
                  "assets/login_background.png",
                ),
                fit: BoxFit.cover)),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          //  mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[

           Image(
              image: AssetImage("assets/fb_icon.png"),
              width: 180.0,
              height: 250.0,
            ),
            new Text('Facebook.',
                style: TextStyle(
                    fontStyle: FontStyle.italic,
                    color: Colors.white,)),
            _textFields(),
            _signInButton(),
            _socialMediaSignIns(),
            _accountButtons()
          ],
        ),
      ),
    );
   }
 }

Currently, I see like this and would like to remove the space between image and text.

enter image description here

Upvotes: 4

Views: 6788

Answers (2)

CopsOnRoad
CopsOnRoad

Reputation: 267554

Actually you should use BoxFit.cover to see that in effect because image has got less physical height than what is being allocated to it.

Here is the solution

       Image(
          image: AssetImage("assets/fb_icon.png"),
          width: 180.0,
          height: 250.0,
          fit: BoxFit.cover,
        ),

You could try other BoxFit to see which one suits you better.

Upvotes: 6

Andrii Turkovskyi
Andrii Turkovskyi

Reputation: 29438

Image(
  image: AssetImage("assets/fb_icon.png"),
),
Text('Facebook.',
    style: TextStyle(
      fontStyle: FontStyle.italic,
      color: Colors.white,))

It has to be no padding in this case. You can check padding exactly in png file such way:

Image(
  image: AssetImage("assets/fb_icon.png"),
  color: Colors.red,
  colorBlendMode: BlendMode.multiply,
),

This will show real borders of your image

Upvotes: 3

Related Questions