How to fix a Form that doesn't scroll

Question

I'm doing a Form but I can't make it scrollable, it just works on the edge from the 'window' but not inside the form, and I made this with the final X = TextFormField because is the only way I found to validate info before submit, this is my code:

I have all the Q's like this:

final usuarioForm = TextFormField(
controller: _idusuarioController,
validator: (value) {
if (value.isEmpty) return 'Llenar campo de Usuario';
return null;
},
style: TextStyle(fontSize: 17.0, color: Colors.deepOrangeAccent),
decoration: InputDecoration(
icon: Icon(Icons.person),
labelText: 'Usuario',
),
);

My form like this:

 final vuelosForm = Form(
      key: _formKey,
      child: ListView(
        shrinkWrap: true,
        scrollDirection: Axis.vertical,
        padding: EdgeInsets.all(10),
        children: [
          usuarioForm,
        ],
      ),
    );

and my scaffold like this:

return Scaffold(
      key: _scaffoldKey,
      resizeToAvoidBottomPadding: false,
      appBar: AppBar(
        title: Text('Vuelos'),
        backgroundColor: Colors.deepOrangeAccent,
      ),
      body: Container(
        child: ListView(
          shrinkWrap: true,
          padding: EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0),
          children: [
            Center(
              child: Card(
                elevation: 18.0,
                child: Container(
                  padding: EdgeInsets.all(10.0),
                  child: Column(
                    children: [
                      vuelosForm,
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );

obviously I have more questions but I don't paste them here because it will be a lot of code.

Solution 1

In your code, you wrap the column widget with Listview so I only remove the Listview widget and simply wrap Column with SingleChildScrollView for scrolling

Container(
        child: Card(
          elevation: 18.0,
          child: Container(
              padding: EdgeInsets.all(10.0),
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    vuelosForm,
                  ],
                ),
              )l̥
          ),
        ),
      ),

Solution 2

As far as I understand your question, you can add one line in your code to make it scrollable in ListView of your Form widget:

physics: NeverScrollableScrollPhysics(),

Full code of your Form:

final vuelosForm = Form(
    child: ListView(
      physics: NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      scrollDirection: Axis.vertical,
      padding: EdgeInsets.all(10),
      children: [
        usuarioForm,
      ],
    ),
  );

Solution 3

Adding to @Shubham Narkhede Answer, if you want to build up a form then use flutter_form_builder package with SingleChildScrollView

This package helps to create big forms in Flutter by removing the boilerplate needed to build a form, validate fields, react to changes, and collect final user input.

In pubspec.ymal file add dependency like:

dependencies:
flutter_form_builder: ^3.8.2

After adding dependency, run following command:

flutter pub get

Import package in your .dart file:

import 'package:flutter_form_builder/flutter_form_builder.dart';

You can add these form fields as Input Widgets

---

Now you can use FormBuilder as Widget in your code:

@override
Widget build(BuildContext context) {

 return Scaffold(
  appBar: AppBar(
    title: Text(formName, style: TextStyle(fontWeight: FontWeight.bold),),
  ),
  body: Container(
    child: Center(
      child: Container(
            child: SingleChildScrollView(
              child: Column(
                children: <Widget>[
                  FormBuilder(
                    key: _fbKey,
                    autovalidate: _autoValidate,
                    child: Column(
                      children: bind your form fields,
                    )
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

Comments

[Sam Chan]

It looks like you are using two listView, you could remote one of them.

[iEduuardo]

I have tried but it doesn't work or I don't know how to do it in the right way

[Sam Chan]

I still not get it why you need two listView, but would you try set a size to Form?

[iEduuardo]

this is my idea: As I need to validate text from the field, I needed to put all fields separate, then join in the final x = Form(); to use key: _formKey. which needs a ListView to show my "questions". and this Form needs to be in the scaffold part with a body>child>child>children.

[Sam Chan]

Would you try to set a size to the list view from the final x = TextFormField? Get a size may make it scrollable when its children is larger.

[Shubham Narkhede]

@iEduuardo have you tried with SingleChildScrollView widget? Let check my answer

[Mr. Tacio]

Isn't the answer supposed to be this?