Flutter：A RenderFlex 底部溢出 4.0 像素

Question

我試圖制作一個帶有動畫徽標、兩個 TextField 和一個按鈕的登錄頁面。 當我運行應用程序並嘗試在 TextField 中輸入一些值時，鍵盤會出現，它看起來就像我提供的圖像。 錯誤是：A RenderFlex 在底部溢出了 4.0 像素。

這是我的代碼：

    Scaffold(
      body: ModalProgressHUD(
          inAsyncCall: _spinner,
          child: ListView(
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Hero(
                    tag: 'logo',
                    child: Padding(
                      padding: const EdgeInsets.symmetric(vertical: 50),
                      child: Container(
                        height: animation.value * 50,
                        child: Image.asset("lib/images/chat.png"),
                      ),
                    ),
                  ),
                  const SizedBox(
                    width: 50,
                  ),
                  const Text(
                    "Email",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(
                    width: 20,
                  ),
                  Padding(
                    padding: const EdgeInsets.all(12.0),
                    child: TextField(
                      onChanged: (value) {
                        email = value;
                      },
                      
                  const Text(
                    "Password",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(
                    width: 20,
                  ),
                  Padding(
                    padding: const EdgeInsets.all(12.0),
                    child: TextField(
                      onChanged: (value) {
                        Password = value;
                      },
                      
                  const SizedBox(
                    width: 50,
                  ),
                  Padding(
                    padding: const EdgeInsets.all(20.0),
                    child: ElevatedButton(
                      onPressed: () async {
                        setState(() {
                          _spinner = true;
                        });
                      },
                      child: Text("Registar"),
                      style: ElevatedButton.styleFrom(
                        primary: Colors.blueAccent,
                        minimumSize: const Size.fromHeight(40), // NEW
                      ),
                    ),
                  )
                ],
              ),
            ],
          )),
    );
   

圖片：

Answer 1

嘗試使用resizeToAvoidBottomInset: true,

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,

Answer 2

嘗試用 SingleChildScrollView 包裝你的 ListView