如何清除用户选择的整个图像选择器图像。当我单击清除按钮时,它将清除所有选定的图像。
这里是此图像选择器的代码。
在此代码中,我选择一个图像,然后,如果我想要另一个图像,则可以单击相机图标并从中选择图像。
@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;*/
});
}
});
}
这是上面代码的输出。
在_clearButton()
方法内部,您可以这样做:
onPressed: () {
setState(() => _imageFilesList.clear());
}