RenderFlex在底部溢出147個像素

Question

這是我要構建的應用程序的屏幕截圖。

單擊“出生日期”字段時應顯示一個日歷。 假設我在電子郵件文本字段中，並且鍵盤處於打開狀態，現在用戶移到了出生日期字段。 用戶點擊出生日期字段后，我將卸下鍵盤並顯示日歷，這時我收到一個異常消息，說RenderFlex底部溢出了147個像素。

我已經經歷了很多關於此的堆棧問題，其中提到要使用我正在使用的ListView。 這是我的代碼片段。

return Scaffold(
  body: Column(
    children: <Widget>[
      Expanded(
          child: Padding(
        padding: const EdgeInsets.fromLTRB(20.0, 8.0, 40.0, 8.0),
        child: InkWell(
          onTap: () {
            FocusScope.of(context).requestFocus(FocusNode());
          },
          child: ListView(
            children: <Widget>[
              Image.asset(
                "images/alphaurbanelogo.png",
                width: 150.0,
                height: 150.0,
              ),
              Text("Sign Up",
                  style: TextStyle(
                      color: Colors.black,
                      fontFamily: "aktivgroteskBold",
                      fontSize: 25.0)),
              SizedBox(
                height: 5.0,
              ),
              Text("Create an account to access\n TAUP system",
                  style: TextStyle(
                      color: Colors.black,
                      fontFamily: "aktivgroteskLight",
                      fontSize: 15.0)),
              SizedBox(
                height: 10.0,
              ),
              TextFormField(
                style: TextStyle(color: Color(0xFF5c2a7c)),
                decoration: InputDecoration(
                    hintText: "First Name",
                    hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
                    focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xFF5c2a7c)))),
              ),
              SizedBox(
                height: 10.0,
              ),
              TextFormField(
                style: TextStyle(color: Color(0xFF5c2a7c)),
                decoration: InputDecoration(
                    hintText: "Last Name",
                    hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
                    focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xFF5c2a7c)))),
              ),
              SizedBox(
                height: 10.0,
              ),
              TextFormField(
                style: TextStyle(color: Color(0xFF5c2a7c)),
                decoration: InputDecoration(
                    hintText: "Email",
                    hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
                    focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xFF5c2a7c)))),
              ),
              SizedBox(
                height: 10.0,
              ),
              InkWell(
                onTap: () {
                  FocusScope.of(context).requestFocus(FocusNode());
                  _selectDate(context);
                },
                child: Row(
                  children: <Widget>[
                    Flexible(
                      child: TextFormField(
                          style: TextStyle(
                              color: Color(0xFF5c2a7c), height: 2.0),
                          enabled: false,
                          controller: dobController,
                          decoration: InputDecoration.collapsed(
                            hintText: "Date of Birth",
                            hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
                          )),
                    ),
                    Icon(
                      Icons.email,
                      color: Color(0xFF5c2a7c),
                    ),
                  ],
                ),
              ),
              Divider(
                color: Color(0xFF5c2a7c),
                height: 5.0,
              ),
              SizedBox(
                height: 10.0,
              ),
              TextFormField(
                style: TextStyle(color: Color(0xFF5c2a7c)),
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                    hintText: "Contact Number",
                    hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
                    focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xFF5c2a7c)))),
              ),
              SizedBox(
                height: 10.0,
              ),
              TextFormField(
                style: TextStyle(color: Color(0xFF5c2a7c)),
                decoration: InputDecoration(
                    hintText: "Parent Email",
                    hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
                    focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xFF5c2a7c)))),
              ),
              SizedBox(
                height: 10.0,
              ),
              TextFormField(
                style: TextStyle(color: Color(0xFF5c2a7c)),
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                    hintText: "Parent Contact Number",
                    hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
                    focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xFF5c2a7c)))),
              ),
              SizedBox(
                height: 10.0,
              ),
              DropdownButton<String>(
                items: _schools.map((String dropDownStringItem) {
                  return DropdownMenuItem<String>(
                    value: dropDownStringItem,
                    child: Text(dropDownStringItem),
                  );
                }).toList(),
                hint: Text("School/Institution"),
                onChanged: (String newValueSelected) {
                  setState(() {
                    this._currentItemSelected = newValueSelected;
                  });
                },
                value: _currentItemSelected,
                style: TextStyle(color: Color(0xFF5c2a7c), fontSize: 16.0),
              ),
              SizedBox(
                height: 1.0,
              ),
              Divider(
                color: Color(0xFF5c2a7c),
                height: 5.0,
              ),
              SizedBox(
                height: 10.0,
              ),
              Row(
                children: <Widget>[
                  Spacer(),
                  InkWell(
                    child: Image.asset(
                      "images/next.png",
                      width: 40.0,
                      height: 40.0,
                    ),
                    onTap: () {},
                  )
                ],
              )
            ],
          ),
        ),
      )),
      BottomBar()
    ],
  ),
);


Future<Null> _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
        context: context,
        initialDate: DateTime.now(),
        firstDate: new DateTime(1900),
        lastDate: new DateTime(2100));

    if (picked != null) {
      var formatter = new DateFormat('yyyy-MM-dd');
      choosenDate = formatter.format(picked);
      dobController.text = choosenDate;
    }
  }

Answer 1

如果您使用的是腳手架，請鍵入ResizetToAvoidBottomPadding：false。

Answer 2

我正在使用一個窗體小部件，並且其底部已溢出，所以類似的問題。 我的解決方案是應用SingleChildScrollView小部件。 這非常方便，因為我使用的是padding小部件，並且該部件也具有padding屬性。 只是替換它而完美。

return Form(
        key: _formKey,
        autovalidate: _autoValidate,
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(10.0),
          child: Column(
  (...)

資源