CODEWITHSUNDEEP
flutterformsdartscrollview
enggPS
enggPS

Reputation: 712

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

Upvotes: 1

Views: 6409

Answers (3)

Vinamra Jaiswal
Vinamra Jaiswal

Reputation: 699

Try Wrapping it with Padding

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

Upvotes: 6

DevKev
DevKev

Reputation: 131

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: []
      ),
     ),
    );

Upvotes: 2

potatoCutts
potatoCutts

Reputation: 196

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',
            ),
          ),
        ),
      ]),
    ),
  ),
);

}

Upvotes: 0

Related Questions