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

Question

我的 flutter 应用程序有问题。当我在模拟器上运行它时，一切正常，它完全按照我想要的方式呈现。但是，当我尝试在我的物理设备 (Samsung S4 Mini) 上运行它时，应用程序的底部显示“底部溢出 97 像素”。

溢出的部分是“开始”按钮，应该会打开登录屏幕。

一切正常，但唯一的问题是它在物理设备上溢出。

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

这是“开始”按钮的代码：

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
                                    ),
                                  )
                              )
                            ),
                          ),
                        ),
                          ]
                  ),
                ),
              ),

我是 Flutter 的新手，我不太确定如何解决这个问题。所有按钮代码都有效，但唯一的问题是按钮没有在实际设备上呈现。你怎么解决这个问题？

Answer 1

使用 MediaQuery，我们可以设计我们的应用程序以呈现所有类型的屏幕。

您可以使用 MediaQuery 获取屏幕宽度和高度并使用它修复溢出。

首先，用MediaQuery定义screenHeight和screenWidth：

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

然后，给出您的边距和填充值，如下例所示：

// 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

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

Flutter app renders fine on the emulator (Pixel 4) but overflows on physical device

mobile

android

flutter