Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 818
Darshan Avatar asked Oct 24 '25 17:10

Darshan


1 Answers

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.

like image 83
CopsOnRoad Avatar answered Oct 27 '25 09:10

CopsOnRoad