Flutter: Unknown bottom padding

Question

Specs: Emulator; Nexus 7 (2012) 7.0 800x1280 hdpi; Android 4.4 x86 (Developing an app for an older system)

I'm working on an application and have placed a background image as seen in the picture below. The image has been created to be 800x1280 naturally. Notice the "BOOOYA" text in the bottom left (EDIT: The Booya text was meant to show that positioning something at zero-zero does not place it at the bottom of the screen, but the bottom of the image):

I'm not sure what's happening at the bottom of the screen with the blue bar. I know that it's the Scaffold's background color, but I don't know why it is showing considering I've chosen the background image to be Boxfit.fit. I have tried changing the Boxfit to different options, and that hasn't done anything to change what's occurring in the space below. It just seems to be dead space that I can't affect except for its colour.

Any suggestions on why this is occurring please? Thank you.

@override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (TapDownDetails details) => _onTapDown(details),
      child: Scaffold(
        backgroundColor: Colors.blue,
        body: currentLocation != null
            ? Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage("lib/pages/assets/images/road_map.png"),
                    fit: BoxFit.fill,
                  ),
                ),
                child: Stack(
                  children: <Widget>[
                    Positioned(
                      //We have the "?? -100" so we don't get a null error on load
                      //TODO: the "+3 -4" need to be sorted. Not center without it
                      //Is this an image problem or a lastTouch problem?
                      top: (lastTouchLogicalY + 4 - image.width / 2) ?? -100,
                      left: (lastTouchLogicalX - 3 - image.height / 2) ?? -100,
                      child: Image.asset(
                        'lib/pages/assets/images/dot1.png',
                      ),
                    ),
                    Positioned(
                      //We have the "?? -100" so we don't get a null error on load
                      //TODO: the "+3 -4" need to be sorted. Not center without it
                      //Is this an image problem or a lastTouch problem?
                      top: currentPositionY - doomGuy.width,
                      left: currentPositionX - doomGuy.height / 2.5,
                      child: Image.asset(
                        'lib/pages/assets/images/doomguy1.png',
                      ),
                    ),
                    Positioned(
                      //We have the "?? -100" so we don't get a null error on load
                      top: textBoxOffsetY ?? -100,
                      left: textBoxOffsetX ?? -100,
                      child: Container(
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.all(Radius.circular(10)),
                            border: Border.all(
                              color: Colors.black,
                              width: 2,
                            )),
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Column(
                            children: [
                              Text(
                                'To Sign: ${distanceToStop.toStringAsFixed(0)}m',
                                style: TextStyle(
                                  color: Colors.black,
                                  fontSize: 20,
                                ),
                              ),
                              Text(
                                'To DoomGuy: ${distanceToDoomGuy.toStringAsFixed(0)}m',
                                style: TextStyle(
                                  color: Colors.black,
                                  fontSize: 20,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                    Positioned(
                      left: 0,
                      bottom: 0,
                      child: Text("BOOOOYYAAAA"),
                    ),
                  ],
                ),
              )
            : Text(
                "SPOOOOOOKY!!!",
                style: TextStyle(fontSize: 50),
              ),
      ),
    );
  }
}

please check if your image isn't transparent from the bottom? — Maz341, Oct 08 '20 at 10:35
Apologies... The Booya text was meant to show that positioning something at zero-zero does not place it at the bottom of the screen, but the bottom of the image. — Michael T, Oct 08 '20 at 10:37
Are you sure that blue area is not where the back button for the android phone resides? — Joseph Utulu, Oct 08 '20 at 11:19
@JosephUtulu That's a good point. I did make the app fullscreen, but if that is the case, how do you fill that gap? — Michael T, Oct 08 '20 at 11:22
Found a solution to the problem. Thanks @JosephUtulu for pointing out the issue which helped my searching. https://stackoverflow.com/a/50917464/9554434 — Michael T, Oct 08 '20 at 11:44

score 0 · Accepted Answer · answered Oct 08 '20 at 11:47

Thanks to Joseph Utulu for figuring out that my issue was that since I was hiding the Navigation Bar, the gap at the bottom was being created.

Rémi Rousselet's answer at https://stackoverflow.com/a/50917464/9554434 was the solution to my problem:

You can set resizeToAvoidBottomPadding to false on Scaffold

Scaffold(
  resizeToAvoidBottomPadding: false,
  appBar: new AppBar(),
);

Flutter: Unknown bottom padding

1 Answers1