Search code examples
flutterformsdartscrollview

How to make my Form scrollable on keyboard input

I have designed a form in Flutter. I want to make it scrollable whenever keyboard opens up so that user can fill the fields that gets hidden below the keyboard. Here is the screenshot of the same:

enter image description here

enter image description here

I have tried this using SingleChildScrollView(), however, its not working. I have tried wrapping various widgets inside the SingleChildScrollView() but its not working. I have also tried to wrap this inside Expanded() widget but still unable to achieve my goal.

Here is my code:

Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(10),
      child: Column(children: <Widget>[
        Form(
            key: formKey,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                ListTile(
                  title: const Text("Name"),
                  subtitle: TextFormField(
                    decoration: const InputDecoration(
                      border: OutlineInputBorder(
                          borderRadius: BorderRadius.all(Radius.circular(8))),
                      contentPadding: EdgeInsets.symmetric(horizontal: 10),
                      hintText: 'Type your name here',
                    ),
                  ),
                ),
        
            ElevatedButton(
              style: style,
              child: Container(
              width: MediaQuery.of(context).size.width,
              alignment: Alignment.center,
              child: const Text(
               'Update',
               style: TextStyle(
                  fontSize: 24, color: Colors.white, fontFamily: 'Nunito'),
            ),
          ),
             onPressed: () {
            }
          },
        ),
      ]),
    );
Solution

  • Try Wrapping it with Padding

    padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),