title: Clear the form completely
body: <p>I have a form that the user can fill out. This form has one text field and one custom field (ImagePickerWidget()) with the ability to add a photo.
  The custom field is moved to a separate class.</p>
  <pre><code>.......
            new Text('What is problem', style: TextStyle(fontSize: 20.0),),
        new TextFormField(decoration: const InputDecoration(
          hintText: 'Describe the problem',),
            validator: (value){if (value!.isEmpty) return 'Please, describe the problem ';}),
        new SizedBox(height: 20.0),
  
        ImagePickerWidget(),
        new SizedBox(height: 20.0),
  
        ElevatedButton(
          onPressed: (){if(_formKey.currentState!.validate()) {
            _formKey.currentState?.reset();
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(content: Text('Form completed successfully',
                style: TextStyle(color: Colors.black),),
                backgroundColor: Colors.yellow,));
          }},
          child: const Text('Submit', style: TextStyle(color: Colors.black),),
          style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.yellow)),)
   ......
  </code></pre>
  <p>my custom widget</p>
  <pre><code>    class ImagePickerWidget extends StatefulWidget {
        const ImagePickerWidget( {Key? key}) : super(key: key);
      
      
        @override
        State&lt;ImagePickerWidget&gt; createState() =&gt; _ImagePickerWidgetState();
      }
      
      class _ImagePickerWidgetState extends State&lt;ImagePickerWidget&gt; {
  
    late List&lt;CustomImage&gt; images;
    late double size;
    late ImagePicker imagePicker;
    late int idGenerator;
  
    @override
    void initState() {
      images = [];
      size = 100;
      idGenerator = 0;
      imagePicker = ImagePicker();
    }
  
    @override
    Widget build(BuildContext context) {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          ElevatedButton(
              onPressed: () {
                pickImage();
              },
              child: Text('Pick Image')),
          Wrap(
              children: images.map((image) {
                return Stack(children: [
                  SizedBox(
                      height: size,
                      width: size,
                      child: ClipRRect(
                          child: Image.memory(
                            image.imageData,
                            fit: BoxFit.fill,
                          ))),
                  Positioned(
                      right: 4,
                      top: 4,
                      child: InkWell(
                          onTap: () {
                            //delete image
                            images.removeWhere(
                                    (element) =&gt; element.imageData == image.imageData);
                            setState(() {});
                          },
                          child: Container(
                              color: Colors.white, child: Icon(Icons.clear))))
                ]);
              }).toList())
        ],
      );
    }
  
    Future&lt;void&gt; pickImage() async {
      //XFile? image = await imagePicker.pickImage(source: ImageSource.camera);
      XFile? image = await imagePicker.pickImage(source: ImageSource.gallery);
      if (image != null) {
        Uint8List imageData = await image.readAsBytes();
        int id = idGenerator++;
        images.add(CustomImage(imageData: imageData, id: id));
        setState(() {});
  
  
      }
    }
  }
  
  class CustomImage {
    Uint8List imageData;
    int id;
  
    CustomImage({required this.imageData, required this.id});
  }
  </code></pre>
  <p>but the problem is that when the button is pressed 'Submit' only the text field is erased (_formKey.currentState?.reset();), and the selected photos remain in the form. Tell me what should I do so that when I click on the button 'Submit' the whole form is cleared?</p>