formsfluttertextfieldflutter-widgetflutter-form-builder

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


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

Solution

  • 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

    enter image description here

    Clearing after reset is pressed

    enter image description here