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

Flutter Best way to create form with a button on the bottom?

Here is what I’m trying to achieve:

On a smaller device, where all the input fields can’t be
displayed on a single page, the form should be like this:

enter image description here

But on a bigger screen, where all the Input fields

can be displayed on one page, I want it to be like this:

enter image description here

(Notice the spacing between the button and the last input

field should be dynamic, so that even on tablets the button
will be on the bottom of the screen)

Also, of course, I don’t want the keyboard to cause overflows, or make the input fields not accessible, I have tried many things, and I haven’t found a way to achieve it, even though it seems to be a simple problem.

Tags:

2

Answers


  1. 0

    You can wrap your code with SingleChildScrollView widget that will allow you to scroll to the bottom without overflow and UI will be responsive.

    For more details checkout: this

    Login or Signup to reply.
  2. 0

    Try the following code:

    Column(
        children: [
          Expanded(
            child: SingleChildScrollView(
              child: Column(
                children: [
                  TextFormField(
                    decoration: InputDecoration(
                      hintText: 'Field 1',
                      border: OutlineInputBorder(
                      
                      )
                    )
                  ),
                  TextFormField(
                    decoration: InputDecoration(
                      hintText: 'Field 2',
                      border: OutlineInputBorder(
                      
                      )
                    )
                  ),TextFormField(
                    decoration: InputDecoration(
                      hintText: 'Field 3',
                      border: OutlineInputBorder(
                      
                      )
                    )
                  ),TextFormField(
                    decoration: InputDecoration(
                      hintText: 'Field 4',
                      border: OutlineInputBorder(
                      
                      )
                    )
                  ),TextFormField(
                    decoration: InputDecoration(
                      hintText: 'Field 5',
                      border: OutlineInputBorder(
                      
                      )
                    )
                  ),
                ],
              ),
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Padding(
              padding: const EdgeInsets.all(15),
              child: FilledButton(
                onPressed: (){},
                child: Text('Submit'),
              ),
            ),
        )
        ],
        
      )

    enter image description here

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

Back To Top
Search