How to remove picked image in flutter?

Question

I am using below code to pick the image in flutter application, which is successfully working. If in case I don't want to upload the image and want to remove the picked image, how am I supposed to that?

Future getImage() async {
    print("get image");

    PickedFile image = await _picker.getImage(source: ImageSource.gallery);

    if (image != null) {
      setState(() {
        final File file = File(image.path);
        avatarImageFile = file;
        isLoading1 = true;

      });
    }
  }

CODE TO SHOW THE IMAGE

Stack(

                      children: <Widget>[
                        (avatarImageFile == null)
                            ? (photoUrl != ''
                            ? Material(
                          child: Image(image: AssetImage('assets/user.jpg'),
                            width: 100,
                            height: 100,
                            fit: BoxFit.cover,


                          ),
                          clipBehavior:Clip.hardEdge ,
                          borderRadius: BorderRadius.all(Radius.circular(25.0)),
                        )
                            : Icon(
                          Icons.account_circle,
                          size: 90.0,
                          color: Colors.grey,
                        ))
                            : Material(
                          child: Image.file(
                            avatarImageFile,
                            width: 90.0,
                            height: 90.0,
                            fit: BoxFit.cover,
                          ),
                          borderRadius: BorderRadius.all(Radius.circular(25.0)),
                          clipBehavior: Clip.hardEdge,
                        ),
                        IconButton(
                          icon: Icon(
                            Icons.camera,
                            color: Colors.orange.withOpacity(0.5),
                          ),
                          onPressed: getImage,
                          padding: EdgeInsets.all(30.0),
                          splashColor: Colors.transparent,
                          highlightColor: Colors.grey,
                          iconSize: 30.0,
                        ),
                      ],
                    ),

Right Now I am just picking the image and trying to remove the picked image, I mean it should be null, uploading the image is at a later stage of the context

Answer 1

Wrap it with an inkwell this way when you tap an image the image picker reopens and can overwrite the other image

 Inkwell(
   onTap: (){
   getImage()}
   Image.file(
     avatarImageFile,
     width: 90.0,
     height: 90.0,
    fit: BoxFit.cover,
   ),

Answer 2

You can set it to null again using setState in a IconButton like this:

IconButton(
  icon: Icon(Icons.clear),
  onPressed: () {
    setState(() {
      avatarImageFile = null;
    });
  },
),