Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to fix a Form that doesn't scroll

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.

like image 893
iEduuardo Avatar asked Oct 16 '25 13:10

iEduuardo


2 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̥
          ),
        ),
      ),
like image 77
Shubham Narkhede Avatar answered Oct 18 '25 05:10

Shubham Narkhede


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,
      ],
    ),
  );
like image 27
siddhartha sapkota Avatar answered Oct 18 '25 07:10

siddhartha sapkota



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!