Flutter创建按钮时出现BOTTOM OVERFLOWING BY 1.1 PIXELS错误如何解决

问题原因 #

• 你直接将最外层Container的高度设置为屏幕全高size.height，没有扣除SafeArea自带的上下安全边距，导致内容总高度超出了页面可用布局空间，出现少量溢出。
• 存在冗余嵌套：FittedBox已配置alignment: Alignment.center属性，内部额外嵌套的Center组件属于不必要布局，会额外占用计算空间。
• Column使用mainAxisAlignment: MainAxisAlignment.spaceAround会自动在子组件上下、组件之间插入均等空白，叠加后总高度超出可用范围。

修复代码 #

return SafeArea(
  child: Container(
    // 扣除SafeArea的上下边距，使用实际可用高度
    width: size.width,
    height: size.height - MediaQuery.of(context).padding.top - MediaQuery.of(context).padding.bottom,
    color: background,
    child: FittedBox(
      fit: BoxFit.contain,
      alignment: Alignment.center,
      // 删除多余的Center嵌套
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Container(
            width: size.width,
            height: size.height * 0.1,
            child: Padding(
              padding: EdgeInsets.zero,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                ],
              ),
            ),
          ),
          Container(
            width: size.width,
            height: size.height * 0.25,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                Container(
                  width: size.width * 0.25,
                  height: size.height * 0.25,
                  decoration: new BoxDecoration(
                    color: buttonBackground,
                    borderRadius: new BorderRadius.all(
                      Radius.circular(40.0),
                    ),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      Icon(
                        Icons.keyboard_arrow_left,
                        color: iconButton,
                        size: 38,
                      ),
                      Text(
                        "L&R",
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: text,
                          fontSize: 24,
                        ),
                      ),
                      Icon(
                        Icons.keyboard_arrow_right,
                        color: iconButton,
                        size: 38,
                      ),
                    ],
                  ),
                ),
                Container(
                  padding: EdgeInsets.zero,
                  width: size.width * 0.1,
                  height: size.width * 0.1,
                  decoration: new BoxDecoration(
                    gradient: new LinearGradient(
                      begin: Alignment.topLeft,
                      end: Alignment.topRight,
                      colors: [
                        Colors.blue,
                        Colors.pink,
                      ],
                    ),
                    shape: BoxShape.circle,
                  ),
                  child: Container(
                    padding: EdgeInsets.zero,
                    width: size.width * 0.4,
                    height: size.width * 0.4,
                    decoration: new BoxDecoration(
                      color: background,
                      shape: BoxShape.circle,
                    ),
                  ),
                ),
                Container(
                  width: size.width * 0.25,
                  height: size.height * 0.25,
                  decoration: new BoxDecoration(
                    color: buttonBackground,
                    borderRadius: new BorderRadius.all(
                      Radius.circular(40.0),
                    ),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      Icon(
                        Icons.keyboard_arrow_up,
                        color: iconButton,
                        size: 38,
                      ),
                      Text(
                        "U & D",
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: text,
                          fontSize: 24,
                        ),
                      ),
                      Icon(
                        Icons.keyboard_arrow_down,
                        color: iconButton,
                        size: 38,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Container(
            width: size.width,
            height: size.height*0.23,
          ),
        ],
      ),
    ),
  ),
);

可选优化 #

如果后续需要在页面中新增更多组件，可将Column外层包裹SingleChildScrollView，避免内容增加后再次出现溢出问题。

内容的提问来源于stack exchange，提问作者Nithin Kumar