如何清除按钮上单击时的所有图像颤动

Question

如何清除用户选择的整个图像选择器图像。当我单击清除按钮时，它将清除所有选定的图像。

这里是此图像选择器的代码。

在此代码中，我选择一个图像，然后，如果我想要另一个图像，则可以单击相机图标并从中选择图像。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      backgroundColor: Colors.grey[100],
      appBar: AppBar(
        titleSpacing: 0,
        title: Text("Choose Image"),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: Form(
                key: _formKey,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    _buildPropertyPhotosWidget(),
                    SizedBox(
                      height: 20,
                    ),
                    _clearbutton()
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildPropertyPhotosWidget() {
    return Container(
      color: Colors.white,
      height: 120.0,
      padding: const EdgeInsets.symmetric(vertical: 10.0),
      margin: EdgeInsets.only(top: 10.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(left: 15.0, right: 10.0),
            child: Column(
              children: <Widget>[
                IconButton(
                  onPressed: () {
                    _openImagePicker(context);
                  },
                  icon: Icon(Icons.camera_enhance),
                  color: Colors.grey,
                  iconSize: 65.0,
                ),
                Text(
                  "Add Photos",
                  style: TextStyle(fontSize: 13.0),
                ),
              ],
            ),
          ),
          Expanded(
            child: Container(
              child: ListView.builder(
                itemCount: _imageFilesList.length,
                padding: EdgeInsets.only(left: 10.0, right: 10.0),
                shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                itemBuilder: (BuildContext context, int index) {
                  return Center(
                    child: Container(
                      margin: EdgeInsets.only(right: 10.0),
                      height: 80.0,
                      width: 80.0,
                      child: Stack(
                        children: <Widget>[
                          ClipOval(
                            child: _imageFilesList[index] != null &&
                                    _imageFilesList[index].isNotEmpty
                                ? checkForFileOrNetworkPath(
                                        _imageFilesList[index])
                                    ? fetchImageFromNetworkFileWithPlaceHolderWidthHeight(
                                        80.0, 80.0, _imageFilesList[index])
                                    : Image.file(
                                        File(_imageFilesList[index]),
                                        fit: BoxFit.cover,
                                        height: 80.0,
                                        width: 80.0,
                                      )
                                : Image.asset(
                                    "assets/images/transparent_placeholder.png",
                                    fit: BoxFit.cover,
                                    height: 80.0,
                                    width: 80.0,
                                  ),
                          ),
                          GestureDetector(
                            onTap: () {
                              setState(() {
                                _imageFilesList.removeAt(index);
                              });
                            },
                            child: Container(
                                alignment: Alignment.topRight,
                                child: Icon(Icons.close)),
                          ),
                        ],
                      ),
                    ),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }

  void _openImagePicker(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return Container(
            height: 150.0,
            padding: EdgeInsets.all(20.0),
            child: Column(
              children: <Widget>[
                Center(
                  child: Text(
                    "Select Image",
                    style: TextStyle(
                      fontSize: 25.0,
                      fontWeight: FontWeight.bold,
                      color: themeColor,
                    ),
                  ),
                ),
                SizedBox(
                  height: 10.0,
                ),
                GestureDetector(
                  onTap: () {
                    _getImage(context, ImageSource.camera);
                    Navigator.of(context).pop();
                  },
                  child: Row(
                    children: <Widget>[
                      Icon(
                        Icons.photo_camera,
                        size: 30.0,
                        color: themeColor,
                      ),
                      Padding(
                        padding: EdgeInsets.symmetric(
                          horizontal: 10.0,
                        ),
                      ),
                      Text(
                        "Use Camera",
                        style: TextStyle(
                          fontSize: 15.0,
                          color: themeColor,
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(
                  height: 10.0,
                ),
                GestureDetector(
                  onTap: () {
                    _getImage(context, ImageSource.gallery);
                    Navigator.of(context).pop();
                  },
                  child: Row(
                    children: <Widget>[
                      Icon(
                        Icons.camera,
                        size: 30.0,
                        color: themeColor,
                      ),
                      Padding(
                        padding: EdgeInsets.symmetric(
                          horizontal: 10.0,
                        ),
                      ),
                      Text(
                        "Use Gallery",
                        style: TextStyle(
                          fontSize: 15.0,
                          color: themeColor,
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ),
          );
        });
  }

  Widget _clearbutton() {
    return Center(
        child: new FlatButton.icon(
      icon: Icon(Icons.close),
      label: Text('Clear'),
      color: Colors.redAccent,
      textColor: Colors.white,
      padding: EdgeInsets.symmetric(vertical: 10, horizontal: 50),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(7),
      ),
      onPressed: () {
        _formKey.currentState.reset();
      },
    ));
  }

  _getImage(BuildContext context, ImageSource source) async {
    ImagePicker.pickImage(
      source: source,
      maxWidth: 400.0,
      maxHeight: 400.0,
    ).then((File image) async {
      if (image != null) {
        setState(() {
      if (_imageFilesList.contains(image.path)) {
        print('same image encountered');
      } else {
        _imageFilesList.add(image.path);
        _licenseImages.add(image);
      }
      print(_licenseImages);
      print("_imageFile : $image");
      print("filePath : ${image.path}");
      print("fileURI : ${image.uri}");
      /*String filePath = image.path;
      Uri fileURI = image.uri;*/
    });
      }
    });
  }

这是上面代码的输出。

Answer 1

在_clearButton()方法内部，您可以这样做：

onPressed: () {
    setState(() => _imageFilesList.clear());
}