I'm getting a big white space between an image and the text below it.

The code has no widget between the image and the text.

children: <Widget>[
              Image.asset('assets/images/maggie.png'),
              RichText(
                text: TextSpan(
                  children: <TextSpan>[
                    TextSpan(
                        text: 'About Maggie McPherson',
                        style: TextStyle(
                          fontSize: 24.0,
                          height: 3.0,
                          fontWeight: FontWeight.bold,
                          color: Colors.black,
                        )),
                  ],
                ),
                textAlign: TextAlign.center,
              ),

I like the padding above the image and on the sides but there's too much padding below the image. Reading the Image class documentation I don't see any mention of default padding.

CodePudding user response：

Check Padding because of image using:

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

Try this after you check above

Use BoxFit.cover to see effect

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

CodePudding user response：

remove height: 3.0 from your TextStyle()

CodePudding user response：

Remove height: 3.0 and wrap Image with padding.

Solution:

children: <Widget> [
      Padding(
        padding: const EdgeInsets.only(top: 30,left: 30,right: 30),
        child: Image.asset('assets/images/maggie.png'),
      ),
      RichText(
        text: TextSpan(
          children: <TextSpan>[
            TextSpan(
                text: 'About Maggie McPherson',
                style: TextStyle(
                  fontSize: 24.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.black,
                )),
          ],
        ),
        textAlign: TextAlign.center,
      ),