Not able to clear text fields using reset method in flutter form-CodePudding

I am designing a form in flutter which is taking input for two text fields using TextField widgets, one time field using DateTimeField and one day picker using WeekDay selector widget. I have used the reset method to reset the form but this is only resetting the BasicTimeField widget and is unable to reset all other fields.

class MyCustomForm extends StatefulWidget {
  const MyCustomForm({Key? key}) : super(key: key);

  @override
  State<MyCustomForm> createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  final formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    var ht = MediaQuery.of(context).size.height;
    var wd = MediaQuery.of(context).size.width;
    return Form(
      key: formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          SizedBox(
            height: ht / 20,
          ),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: wd / 40, vertical: 1),
            child: Text(
              "Subject",
              style: TextStyle(fontSize: ht / 30, fontWeight: FontWeight.w500),
            ),
          ),
          Padding(
            padding:
                EdgeInsets.symmetric(horizontal: wd / 40, vertical: ht / 60),
            child: TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(), // UnderlineInputBorder(),
                hintText: 'Type Subject name here',
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: wd / 40, vertical: 1),
            child: Text(
              "Class Link",
              style: TextStyle(fontSize: ht / 30, fontWeight: FontWeight.w500),
            ),
          ),
          Padding(
            padding:
                EdgeInsets.symmetric(horizontal: wd / 40, vertical: ht / 60),
            child: const TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(), // UnderlineInputBorder(),
                hintText: 'Paste class link here',
              ),
            ),
          ),
          Center(
              child: Text(
            "Timing",
            style: TextStyle(fontSize: ht / 30, fontWeight: FontWeight.w500),
          )),
          Row(mainAxisAlignment: MainAxisAlignment.center, children: [
            BasicTimeField(),
            SizedBox(
              width: wd / 9,
              child: Center(
                child: Text(
                  "to",
                  style:
                      TextStyle(fontSize: ht / 40, fontWeight: FontWeight.w400),
                ),
              ),
            ),
            BasicTimeField()
          ]),
          SizedBox(
            height: ht / 40,
          ),
          Center(
              child: Text(
            "Select days of week",
            style: TextStyle(fontSize: ht / 30, fontWeight: FontWeight.w500),
          )),
          DayPicker(),
          SizedBox(
            height: ht / 20,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                child: Text('Add'),
                onPressed: () => formKey.currentState?.save(),
              ),
              const SizedBox(
                width: 50,
              ),
              ElevatedButton(
                child: Text('Reset'),
                onPressed: () => formKey.currentState?.reset(),
              ),
            ],
          )
        ],
      ),
    );
  }
}

CodePudding user response：

reset in your form is not working because you are using a textfield which will not reset when using

formKey.currentState?.reset()

Try changing the Textform to TextFormField

Now, it will work.

Full Updated Code(From your code)


import 'package:flutter/material.dart';

class MyCustomForm extends StatefulWidget {
  const MyCustomForm({Key? key}) : super(key: key);

  @override
  State<MyCustomForm> createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  final formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    var ht = MediaQuery.of(context).size.height;
    var wd = MediaQuery.of(context).size.width;
    return Scaffold(
      body: Form(
        key: formKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SizedBox(
              height: ht / 20,
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: wd / 40, vertical: 1),
              child: Text(
                "Subject",
                style:
                    TextStyle(fontSize: ht / 30, fontWeight: FontWeight.w500),
              ),
            ),
            Padding(
              padding:
                  EdgeInsets.symmetric(horizontal: wd / 40, vertical: ht / 60),
              child: TextFormField(
                decoration: const InputDecoration(
                  border: OutlineInputBorder(), // UnderlineInputBorder(),
                  hintText: 'Type Subject name here',
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: wd / 40, vertical: 1),
              child: Text(
                "Class Link",
                style:
                    TextStyle(fontSize: ht / 30, fontWeight: FontWeight.w500),
              ),
            ),
            Padding(
              padding:
                  EdgeInsets.symmetric(horizontal: wd / 40, vertical: ht / 60),
              child: TextFormField(
                decoration: const InputDecoration(
                  border: OutlineInputBorder(), // UnderlineInputBorder(),
                  hintText: 'Paste class link here',
                ),
              ),
            ),
            Center(
                child: Text(
              "Timing",
              style: TextStyle(fontSize: ht / 30, fontWeight: FontWeight.w500),
            )),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: [
              // BasicTimeField(),
              SizedBox(
                width: wd / 9,
                child: Center(
                  child: Text(
                    "to",
                    style: TextStyle(
                        fontSize: ht / 40, fontWeight: FontWeight.w400),
                  ),
                ),
              ),
              // BasicTimeField()
            ]),
            SizedBox(
              height: ht / 40,
            ),
            Center(
                child: Text(
              "Select days of week",
              style: TextStyle(fontSize: ht / 30, fontWeight: FontWeight.w500),
            )),
            // DayPicker(),
            SizedBox(
              height: ht / 20,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  child: Text('Add'),
                  onPressed: () => formKey.currentState?.save(),
                ),
                const SizedBox(
                  width: 50,
                ),
                ElevatedButton(
                  child: Text('Reset'),
                  onPressed: () => formKey.currentState?.reset(),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

Output

Entering data

Clearing after reset is pressed

CodePudding user response：

formKey.currentState?.reset()

This line of code resets all the form fields that are descendant of Form(). It only works on TextFormField widgets.

You can change all TextField widgets to TextFormField, so the reset would work on them.