'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: () {
            }
          },
        ),
      ]),
    );
flutterformsdartscrollview


Solution 1:[1]

Try Wrapping it with Padding

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

Solution 2:[2]

The SingleChildScrollView widget should solve your issue. It may be where you are placing it. It needs to wrap the whole form not just an individual list tile. Below is an example using you example as a base.

Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: SingleChildScrollView(
    child: Container(
      margin: const EdgeInsets.all(10),
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        ListTile(
          title: const Text("1"),
          subtitle: TextFormField(
            decoration: const InputDecoration(
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(8))),
              contentPadding: EdgeInsets.symmetric(horizontal: 10),
              hintText: 'Type your name here',
            ),
          ),
        ),
        ListTile(
          title: const Text("2"),
          subtitle: TextFormField(
            decoration: const InputDecoration(
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(8))),
              contentPadding: EdgeInsets.symmetric(horizontal: 10),
              hintText: 'Type your name here',
            ),
          ),
        ),
        ListTile(
          title: const Text("3"),
          subtitle: TextFormField(
            decoration: const InputDecoration(
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(8))),
              contentPadding: EdgeInsets.symmetric(horizontal: 10),
              hintText: 'Type your name here',
            ),
          ),
        ),
        ListTile(
          title: const Text("4"),
          subtitle: TextFormField(
            decoration: const InputDecoration(
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(8))),
              contentPadding: EdgeInsets.symmetric(horizontal: 10),
              hintText: 'Type your name here',
            ),
          ),
        ),
        ListTile(
          title: const Text("5"),
          subtitle: TextFormField(
            decoration: const InputDecoration(
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(8))),
              contentPadding: EdgeInsets.symmetric(horizontal: 10),
              hintText: 'Type your name here',
            ),
          ),
        ),
      ]),
    ),
  ),
);

}

Solution 3:[3]

I encountered this issue sometime back and I managed to mitigate it by wrapping the column containing the widgets with a SingleChildScrollView and giving it Axis.vertical. Then go to the parent scaffold and set resizeToAvoidBottomInset to true.

Depends on how your widget tree looks

Scaffold(
    resizeToAvoidBottomInset: true,
    ///
    body: SingleChildScrollView(
     scrollDirection: Axis.vertical,
     child: Column(  /// Your widget
        children: []
      ),
     ),
    );

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 potatoCutts
Solution 3 DevKev

Related Questions