Flutter - 当键盘出现时如何使用 SingleScrollView() 滚动整个屏幕，而不仅仅是自动显示文本

Question

即使使用 SingleChildScrollView() 作为主父级后，仍然只有文本字段上移，但我也需要上移登录按钮。

我的代码的输出是左图，但我需要右图的结果。

我已经使用 Material 定制了一个 Button。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_catalog/utils/routes.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  String name = "";
  bool changeButton = false;
  final _formKey = GlobalKey<FormState>();

  moveToHome(BuildContext context) async {
    if (_formKey.currentState!.validate()) {
      setState(() {
        changeButton = true;
      });

      await Future.delayed(Duration(seconds: 1));
      await Navigator.pushNamed(context, MyRoutes.homeRoute);
      setState(() {
        changeButton = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomInset: true,
        // color: Colors.white,
        body: Center(
          child: SingleChildScrollView(
              child: Form(
            key: _formKey,
            child: Column(
              children: [
                Image.asset(
                  "assets/images/login.png",
                  fit: BoxFit.cover,
                  height: 100,
                ),
                SizedBox(height: 24.0),
                Text("Welcome, $name",
                    style: TextStyle(
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                    )),
                SizedBox(
                  height: 20.0,
                ),
                Padding(
                  // padding: const EdgeInsets.all(16.0),  //everywhere padding
                  padding: const EdgeInsets.symmetric(
                      vertical: 16.0, horizontal: 20.0),
                  child: Column(
                    children: [
                      TextFormField(
                          decoration: InputDecoration(
                            hintText: "Enter Username",
                            hintStyle: TextStyle(
                                height: 2, fontWeight: FontWeight.bold),
                            labelText: "Username",
                          ),
                          onChanged: (value) {
                            name = value;
                            setState(() {});
                          },
                          validator: (value) {
                            if (value!.isEmpty)
                              return "Username cannot be Empty";
                            else
                              return null;
                          }),
                      TextFormField(
                          obscureText: true, //wont show text
                          decoration: InputDecoration(
                            hintText: "Enter Password",
                            hintStyle: TextStyle(
                                height: 2, fontWeight: FontWeight.bold),
                            labelText: "Password",
                          ),
                          validator: (value) {
                            if (value!.isEmpty)
                              return "Password Cannot be Empty";
                            else if (value.length < 6)
                              return "Password must be Greater than 6 Length";
                          }),
                    ],
                  ),
                ),
                SizedBox(
                  height: 20.0,
                ),

                Material(
                  color: Colors.deepPurple,
                  borderRadius: BorderRadius.circular(changeButton ? 50 : 8),
                  child: InkWell(
                    // splashColor: Colors.redAccent,
                    onTap: () => moveToHome(context),
                    child: AnimatedContainer(
                      duration: Duration(seconds: 1),
                      width: (changeButton ? 50 : 150),
                      height: 50,
                      //you can keep color at one place
                      alignment: Alignment.center,
                      child: changeButton
                          ? Icon(Icons.done, color: Colors.white)
                          : Text(
                              "Login",
                              style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold,
                                  fontSize: 18),
                            ),
                    ),

                    // ElevatedButton(
                    //   child: Text('Login'),
                    //   style: TextButton.styleFrom(minimumSize: Size(150, 40)),
                    //   onPressed: () {
                    //     Navigator.pushNamed(context, MyRoutes.homeRoute);
                    //     // print('hi');
                    //   },
                  ),
                ) // ),
              ],
            ),
          )),
        ));
  }
}

忽略这个，这个用来让stackoverflow显示整个代码 Ignore This，这用于允许 stackoverflow 显示整个代码 Ignore This，这用于允许 stackoverflow 显示整个代码 Ignore This，这用于允许 stackoverflow 显示整个代码 Ignore This，这用于允许 stackoverflow 显示整个代码 Ignore This，这用于允许 stackoverflow 显示整个代码 Ignore This，这用于允许 stackoverflow 显示整个代码 Ignore This，这用于允许 stackoverflow 显示整个代码 Ignore This，这用于允许 stackoverflow 显示整个代码 Ignore This，这用于允许 stackoverflow 显示整个代码 Ignore This，这用于允许 stackoverflow 显示整个代码 Ignore This，这用于允许 stackoverflow 显示整个代码 Ignore This，这用于允许 stackoverflow 显示整个代码 Ignore This, This is used to allow stackoverflow to show entire codeIgnore This, This is used to allow stackoverflow to show whole codeIgnore This, This is used to allow stackoverflow to show whole codeIgnore This, This is used to allow stackoverflow to show whole codeIgnore This , 这用于让stackoverflow显示整个代码

Answer 1

scrollPadding: EdgeInsets.only(bottom: 150),

到 TextFormField