I'm going to create several containers that can contain images. This image container is made to be added through a button and ListView.builder. So I'm trying to put each image in this image container, but there's a problem.
When an image is selected through picker_image, the same image is put in all containers. And when I select an image, it doesn't apply directly to the container and the image is output from the newly created container.
I use image_picker: ^0.6.7 and image_picker_for_web: ^0.1.0. (I tested on Web)
body part code
//image
var _pickedImage;
var _pickWebImage; //web test
PickedFile _image;
bool addImageSelete = false;
bool isWeb = false; //check platform
//image picker
final picker = ImagePicker();
//image container list (add press button)
List<InkWell> _detailImageList = [];
//image picker container list
Container(
height: isWeb ? 300 : MediaQuery.of(context).size.width * 2 / 5,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
//Add image container
Expanded(
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
// physics: NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return _detailImageList[index];
},
itemCount: _detailImageList.length,
),
),
],
),
),
//add image container list
_addButton(),
image container widget code
Widget _detailImage() {
//test
PickedFile _detailImageFile;
return InkWell(
onTap: () async {
//alert (seleted 'add image' or 'remove image')
await _seletedDialogBox(context);
//after alert seleted
if (addImageSelete)
_getImage(_detailImageFile, source: ImageSource.gallery);
setState(() {
addImageSelete = false;
});
},
child: Container(
margin: EdgeInsets.symmetric(horizontal: 10),
width: MediaQuery.of(context).size.width * 2 / 5,
height: MediaQuery.of(context).size.width * 2 / 5,
child: _pickedImage == null
? Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Not Image Yet",
),
],
))
//output image
: isWeb
? _pickedImage
: Image.file(
_pickedImage,
fit: BoxFit.cover,
),
),
);
}
image_picker method
Future<void> _getImage(PickedFile imageTest, {ImageSource source}) async {
imageTest = await picker.getImage(source: source);
//test
setState(() {
if (imageTest != null) {
if (isWeb) {
_pickedImage = Image.network(
imageTest.path,
fit: BoxFit.cover,
);
} else {
_pickedImage = File(imageTest.path);
}
}
});
}
I think image_picker should be created using the list like the container, can I know how to do this?
Thank you.
Aucun commentaire:
Enregistrer un commentaire