Flutter表单页面按钮不显示，出现Overflow错误求助

嘿，我帮你排查了代码里的问题，主要是两个点导致的异常，咱们一步步来修复：

问题根源 #

1. 固定高度容器引发内容溢出：你给包裹Column的Container设置了固定height:245.0，但里面5个TextField加按钮的总高度已经超过了这个值，直接导致按钮被挤出可视区域，同时触发Overflow错误。
2. 语法小错误：你的RaisedButton末尾多了一个逗号（,,），这会干扰组件正常渲染，也是按钮不显示的诱因之一。

修复方案 #

步骤1：修复语法错误 #

把RaisedButton后面的多余逗号删掉：

new RaisedButton(
  onPressed: () {},
  color: Colors.pinkAccent,
  child: new Text('Calculate'),
  textColor: Colors.white,
), // 这里原来有两个逗号，改成一个即可

步骤2：解决Overflow问题（二选一即可） #

方案A：给Column添加滚动能力

在Column外层套一个SingleChildScrollView，这样当内容超过容器高度时可以滚动，既不会触发Overflow，按钮也能正常显示：

new Container(
  margin: const EdgeInsets.all(3.0),
  height: 245.0,
  width: 290.0,
  color: Colors.grey.shade300,
  child: new SingleChildScrollView( // 新增滚动组件
    child: new Column(
      children: <Widget>[
        // 你的TextField和按钮代码...
      ],
    ),
  ),
)

方案B：去掉Container的固定高度

因为外层已经是ListView（本身支持滚动），可以直接删掉Container的height:245.0，让Column自适应内容高度，彻底避免溢出问题：

new Container(
  margin: const EdgeInsets.all(3.0),
  width: 290.0, // 移除固定height属性
  color: Colors.grey.shade300,
  child: new Column(
    children: <Widget>[
      // 你的TextField和按钮代码...
    ],
  ),
)

修改后的完整代码（方案B示例） #

Widget build(BuildContext context) { 
  return new Scaffold( 
    appBar: new AppBar( 
      centerTitle: true, 
      backgroundColor: Colors.redAccent.shade200, 
    ), 
    body: new Container( 
      alignment: Alignment.topCenter, 
      child: new ListView( 
        padding: const EdgeInsets.all(2.0), 
        children: <Widget>[ 
          new Image.asset( 
            'assets/images/odddd.png', 
            height: 85.0, 
            width: 75.0, 
          ), 
          new Container( 
            margin: const EdgeInsets.all(3.0), 
            width: 290.0, 
            color: Colors.grey.shade300, 
            child: new Column( 
              children: <Widget>[ 
                new TextField( 
                  controller: firstNameCtrlr, 
                  keyboardType: TextInputType.text, 
                  decoration: new InputDecoration( 
                    labelText: 'Surname', 
                    hintText: 'Paul', 
                    icon: new Icon(Icons.person_add)), 
                ), 
                new TextField( 
                  controller: lastNameCtrlr, 
                  keyboardType: TextInputType.text, 
                  decoration: new InputDecoration( 
                    labelText: 'name', 
                    hintText: 'Ebuka', 
                    icon: new Icon(Icons.person_pin_circle))), 
                new TextField( 
                  controller: stateController, 
                  keyboardType: TextInputType.text, 
                  decoration: new InputDecoration( 
                    labelText: 'State of Recidence', 
                    hintText: 'Osun, Chicago e.t.c', 
                    icon: new Icon(Icons.location_city))), 
                new TextField( 
                  controller: languageController, 
                  keyboardType: TextInputType.text, 
                  decoration: new InputDecoration( 
                    labelText: 'Official Language', 
                    hintText: 'English, French', 
                    icon: new Icon(Icons.language))), 
                new TextField( 
                  controller: ageController, 
                  keyboardType: TextInputType.number, 
                  decoration: new InputDecoration( 
                    labelText: 'Age', 
                    hintText: 'e.g 70, 60', 
                    icon: new Icon(Icons.person))), 
                new Padding(padding: new EdgeInsets.all(5.2)), 
                //calculate button 
                new Container( 
                  alignment: Alignment.center, 
                  child: new RaisedButton( 
                    onPressed: () {}, 
                    color: Colors.pinkAccent, 
                    child: new Text('Calculate'), 
                    textColor: Colors.white, 
                  ),
                )
              ]
            )
          )
        ]
      )
    )
  );
}

这样修改后，按钮就能正常显示，Overflow错误也会彻底消失啦。

内容的提问来源于stack exchange，提问作者Gbadegesin Taiwo