Flutter 应用程序在模拟器（Pixel 4）上呈现良好，但在物理设备上溢出

Question

I'm having a problem with my flutter app. When I run it on the emulator, everything works fine and it renders exactly how I want it to. However, when I attempt to run it on my physical device (Samsung S4 Mini), the bottom of the app says "bottom overflowed by 97 pixels".

The part that is overflowing is a "Get Started" button, which is supposed to open up the login screen.

Everything works, but the only problem is that it overflows on the physical device.

This is a picture of the bottom of my emulator. The blue is just there so I can see where the container ends.

Here is the code for the Get Started Button:

Container(
                child: GestureDetector(
                  onTap: () {
                    setState(() {
                      if(_pageState!= 1)
                      _pageState = 1;
                      else
                        _pageState = 0;
                    });



                  },
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                    children: [ Container(
                      color: Colors.blue,
                      margin: EdgeInsets.symmetric(horizontal: 0, vertical: 0),
                        child: Padding(
                          padding: const EdgeInsets.symmetric(vertical: 50),
                            child: Container(
                              decoration: BoxDecoration(
                                boxShadow: [
                                  BoxShadow(
                                    color: Colors.black26,
                                    blurRadius: 4.0,
                                    spreadRadius: 2.0,
                                    offset: Offset(2.0, 2.0), // shadow direction: bottom right
                                  )
                                ],
                                color: colorScheme[2],
                                border: Border.all(
                                  color: colorScheme[2],
                                  width: 2
                                ),
                                borderRadius: BorderRadius.circular(50),

                              ),
                              child: Container(
                                  padding: EdgeInsets.symmetric(vertical: 10, horizontal: 80),
                                  child: Text(
                                      "Get Started",
                                    style: TextStyle(
                                      color: colorScheme[3],
                                      fontFamily: "Nunita",
                                      fontSize: 16.0,
                                      fontWeight: FontWeight.bold
                                    ),
                                  )
                              )
                            ),
                          ),
                        ),
                          ]
                  ),
                ),
              ),

I'm new to flutter and I'm not really sure how to fix this issue. All of the button code works, but the only problem is that the button isn't rendering on the actual device. How can you fix this?

Answer 1

Using MediaQuery, we can design our apps to render all type of screens.

You can get the screen width and height with MediaQuery and fix the overflowing using it.

First, define the screenHeight and screenWidth with MediaQuery :

screenHeight = MediaQuery.of(context).size.height;
screenWidth = MediaQuery.of(context).size.width;

Then, give your margin and padding values like in example below:

// example
padding: EdgeInsets.symmetric(vertical: screenHeight * 0.1, horizontal: screenWidth * 0.8),
// this means give 10% of screen height as vertical value and 80% of screen width as horizontal value