How to fix a Form that doesn't scroll

user_13022315 0
Viewed 1263

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.

dart flutter scroll forms
5 Answers

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̥
          ),
        ),
      ),
user_120966530

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

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

Issue: The Listview region of form was not scrolling properly using finger gestures. (scrolling on table and mobile device).

Ovrview: I created a customer website with a large form using flutter_form_builder with two layers of ListView. One Listview nested within another.

Two parts to solution ...

One: in my second layer of ListView I added the property:

  physics: NeverScrollableScrollPhysics(),

so

ListView( ... physics: NeverScrollableScrollPhysics(), ... )

And Second and important step is to use SKIA ... So, I had to build the web application with...

flutter build web --dart-define=FLUTTER_WEB_USE_SKIA=true --release

user_26565550

Try this.

final vuelosForm = Form(
key: _formKey,
child: Scrollbar(
  isAlwaysShown: true,
  controller: _controllerScroll,
  child: ListView(
    controller: _controllerScroll,
    shrinkWrap: true,
    scrollDirection: Axis.vertical,
    padding: EdgeInsets.all(10),
    children: [
      usuarioForm,
    ],
  ),
),
user_106860330
Related