Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to decrease the space between image and text?

I’m doing a login and sign up page using flutter. I wanted to put the logo in the welcome screen. However, the distance between the image and the text is too far. This is the code and the image distance between logo and text is too far

How can I decrease distance between the two? I tried to put padding below the container but it still doesnt work.

const Padding(padding: EdgeInsets.all(10),
          child: Image(
            image: AssetImage("assets/images/logo2.png"),
            width: 180.0,
            height: 250.0,
            fit: BoxFit.contain,
          ),// fix this freaking distance
        ),

          //The text in the middle
          Flexible(
            flex: 8,
            child:Container(
            padding: const EdgeInsets.only(top: 5.0),

              child:Center(
                child: RichText(
                  textAlign: TextAlign.center,

                  //Welcome Back Text
                  text: const TextSpan(
                    children:[
                      TextSpan(
                        text: "Welcome Back!",
                        style: TextStyle(
                          fontSize: 45.0,
                          fontWeight: FontWeight.w600,
                          color: Color(0xFF7F6F5E),
                        ),
                      ),

                      //the text for enter personal deets
                      TextSpan(
                        text: "nYou enter personal deets bro",
                        style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.w500,
                          color: Color(0xFF7F6F5E),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
          ),
          ),
Tags:

3

Answers


  1. 0

    I’m not sure what the dimensions of the logo is but it appears that the height dimension is incorrect and possibly causing the problem. Maybe try:

    const Padding(padding: EdgeInsets.all(10),
          child: Image(
            image: AssetImage("assets/images/logo2.png"),
            width: 180.0,
            height: 180.0,
            fit: BoxFit.contain,
          ),// fix this freaking distance
...
    Login or Signup to reply.
  2. 0

    Remove the Flexible Widget and Add SizedBox Upper that.
    Try like this

    const Padding(padding: EdgeInsets.all(10),
    child: Image(
    image: AssetImage("assets/images/logo2.png"),
    width: 180.0,
    height: 250.0,
    fit: BoxFit.contain,
    ),// fix this freaking distance
    ),

        // Add this line and remove flexible. If you want to increase the height increse height value of sized box
    SizedBox(
      height: 50,
    ),

      //The text in the middle
      Container(
      padding: const EdgeInsets.only(top: 5.0),

        child:Center(
          child: RichText(
            textAlign: TextAlign.center,

            //Welcome Back Text
            text: const TextSpan(
              children:[
                TextSpan(
                  text: "Welcome Back!",
                  style: TextStyle(
                    fontSize: 45.0,
                    fontWeight: FontWeight.w600,
                    color: Color(0xFF7F6F5E),
                  ),
                ),

                //the text for enter personal deets
                TextSpan(
                  text: "nYou enter personal deets bro",
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.w500,
                    color: Color(0xFF7F6F5E),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    Login or Signup to reply.
  3. 0

    Do no give the fix height to the image, it will take the space as per it’s dimensions and after that you want some space between the image and the text then use Sizebox(height: 20).

    padding: EdgeInsets.all(10),
      child: Image(
        image: AssetImage("assets/images/logo2.png"),
        fit: BoxFit.contain,
    ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search