Question 214054 in Flutter Question posted in
The official Flutter documentation can be found here.

Make TextField Autoscroll when keyboard popsup in flutter

This is my Login page code

Scaffold(
      body: SafeArea(
          child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 40),
        child: _loading
            ? Center(child: CircularProgressIndicator())
            : SingleChildScrollView(
                child: Column(
                  children: [
                    SizedBox(
                      height: 120.h,
                    ),
                    Image.asset(
                      "assets/splash.png",
                      width: MediaQuery.of(context).size.width / 2.2,
                    ),
                    SizedBox(
                      height: 60.h,
                    ),
                    TextField(
                        controller: _name,
                        decoration: InputDecoration(labelText: 'User Name')),
                    SizedBox(
                      height: 15.h,
                    ),
                    TextField(
                        controller: _password,
                        decoration: InputDecoration(labelText: 'Password')),
                    SizedBox(
                      height: 45.h,
                    ),
                    GestureDetector(
                      onTap: () {
                        check();
                      },
                      child: Container(
                        width: fullWidth(context),
                        padding: EdgeInsets.symmetric(vertical: 10),
                        decoration: BoxDecoration(
                            color: AppColor.mainThemeColor,
                            borderRadius: BorderRadius.circular(5)),
                        child: Center(
                          child: Text(
                            "Login",
                            style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.w500),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
      )),
    );

The issue with this page is that whenever I click on any text field it hides under the keyboard even after wrapping it under SingleChildScrollView it does not allow me to scroll. I even tried resizeToAvoidBottomInset: false but that didn’t work.

Tags:

2

Answers


  1. 0

    Padding(
    padding: EdgeInsets.only(
    bottom: MediaQuery.of(context).viewInsets.bottom),
    child: TextField(
    autofocus: true,
    ),
    ),
    );

    Login or Signup to reply.
  2. 0

    You can use GlobalKey to solve your problem
    like this

    class test extends StatelessWidget {
  final textFieldKey = GlobalKey<State<StatefulWidget>>();

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          //...
          TextField(
            key: textFieldKey,
              onTap: () {
                autoScroll(textFieldKey: textFieldKey);
            }
          )
          //...
        ]
      )
    );
  }
  Future<void> autoScroll({required GlobalKey textFieldKey}) async {
    final keyContext = textFieldKey.currentContext;
    if (keyContext != null) {
      await Future.delayed(const Duration(milliseconds: 500)).then(
          (value) =>
          Scrollable.ensureVisible(
            keyContext,
            duration: const Duration(milliseconds: 200),
            curve: Curves.linear
          )
      );
    }
  }
}

    It worked for me

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search