Flutter：键盘出现时 UI 没有向上推

Question

I create 3 text fields to get input from the user on this screen. The problem is when the keyboard appears, the UI didn't move up to the keyboard.. I already add resizeToAvoidBottomInset: false inside the Scaffold widget but it won't work. Here is the screenshot and the code for this page.

Screenshot

class AddEmployee extends StatelessWidget {
  const AddEmployee({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      resizeToAvoidBottomInset: false,
      body: SafeArea(child: AddNewEmployeeWidget()),
    );
  }
}

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

  @override
  State<AddNewEmployeeWidget> createState() => _AddNewEmployeeWidgetState();
}

class _AddNewEmployeeWidgetState extends State<AddNewEmployeeWidget> {
  TextEditingController nameController = TextEditingController(),
      usernameController = TextEditingController(),
      passwordController = TextEditingController();

  addEmployee() async {
    await FirebaseFirestore.instance.collection('employee').add({
      'username': usernameController.text,
      'name': nameController.text,
      'password': passwordController.text
    });

    Fluttertoast.showToast(
        msg: "Successfully Add a new employee!",
        toastLength: Toast.LENGTH_LONG,
        gravity: ToastGravity.TOP,
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.grey,
        textColor: Colors.white,
        fontSize: 20.0);
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            //Logo
            // Center(
            //   child: Image.asset(
            //     'assets/mashiso.png',
            //     height: 250,
            //   ),
            // ),

            const SizedBox(
              height: 100,
            ),
            // name
            SizedBox(
              width: 300,
              child: TextField(
                controller: nameController,
                textInputAction: TextInputAction.next,
                decoration: const InputDecoration(
                    focusColor: Color(0xffFDBF05),
                    prefixIcon: Icon(Icons.alternate_email),
                    focusedBorder: OutlineInputBorder(
                        borderSide:
                            BorderSide(color: Color(0xffFDBF05), width: 3),
                        borderRadius: BorderRadius.all(Radius.circular(25))),
                    hintText: "Enter name",
                    enabledBorder: OutlineInputBorder(
                        borderSide:
                            BorderSide(color: Color(0xffFDBF05), width: 3),
                        borderRadius: BorderRadius.all(Radius.circular(25)))),
              ),
            ),

            //
            const SizedBox(
              height: 10,
            ),
            //username
            SizedBox(
              width: 300,
              child: TextFormField(
                controller: usernameController,
                textInputAction: TextInputAction.next,
                decoration: const InputDecoration(
                    focusColor: Color(0xffFDBF05),
                    prefixIcon: Icon(Icons.person),
                    focusedBorder: OutlineInputBorder(
                        borderSide:
                            BorderSide(color: Color(0xffFDBF05), width: 3),
                        borderRadius: BorderRadius.all(Radius.circular(25))),
                    hintText: "Enter username",
                    enabledBorder: OutlineInputBorder(
                        borderSide:
                            BorderSide(color: Color(0xffFDBF05), width: 3),
                        borderRadius: BorderRadius.all(Radius.circular(25)))),
              ),
            ),

            //
            const SizedBox(
              height: 10,
            ),

            //password
            SizedBox(
              width: 300,
              child: TextField(
                controller: passwordController,
                textInputAction: TextInputAction.next,
                obscureText: true,
                decoration: const InputDecoration(
                    focusColor: Color(0xffFDBF05),
                    prefixIcon: Icon(Icons.lock),
                    focusedBorder: OutlineInputBorder(
                        borderSide:
                            BorderSide(color: Color(0xffFDBF05), width: 3),
                        borderRadius: BorderRadius.all(Radius.circular(25))),
                    hintText: "Enter password",
                    enabledBorder: OutlineInputBorder(
                        borderSide:
                            BorderSide(color: Color(0xffFDBF05), width: 3),
                        borderRadius: BorderRadius.all(Radius.circular(25)))),
              ),
            ),

            const SizedBox(
              height: 10,
            ),

            //Add Button
            SizedBox(
              width: 170,
              height: 50,
              child: ElevatedButton(
                onPressed: () {
                  setState(() {
                    usernameController;
                    nameController;
                    passwordController;
                  });

                  addEmployee();

                  Future.delayed(
                      const Duration(seconds: 1),
                      (() => Navigator.pushReplacement(
                          context,
                          PageTransition(
                              child: const MobileHome(),
                              type: PageTransitionType.leftToRight))));
                },
                child: const Text(
                  "Add",
                  style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.bold,
                      fontSize: 30),
                ),
                style: ButtonStyle(
                    backgroundColor:
                        MaterialStateProperty.all(const Color(0xffFDBF05))),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

If you remove 'resizeToAvoidBottomInset: false' your code should work as expected. Are you using this widget inside another one? Maybe the wrapper widget is having some issue.

Answer 2

Wrap your Column with a SingleChildScrollView