How can I display a Carousel framed by taking pictures in the moment? This carousel needs a function to remove photos if needed. And an indicator of what image I'm seeing.
I'm using packages: 'image_picker' to get the photos from gallery or camera. And the 'carousel_slider' package to display the carousel.
And so, if there isn't a photo there isn't a carousel.
The problem I get is that the second photo replaces the first... the third replaces the second and the first, I mean the next photo will replace the previous photos. Also, I can't remove the photos from the carousel, and I can't display the indicators for the image I'm looking at either.
Here are the functions I run to take the pictures:
_takePicture() async {
File auxiliarFile;
final ImagePicker _picker = ImagePicker();
XFile imageFile = await _picker.pickImage(
source: ImageSource.camera, maxWidth: 600) as XFile;
setState(() {
_storedImage = File(imageFile.path);
});
auxiliarFile = _storedImage!;
final appDir = await syspath.getApplicationDocumentsDirectory();
String fileName = path.basename(_storedImage!.path);
final savedImage = await _storedImage!.copy('${appDir.path}/$fileName');
listImages.add(auxiliarFile);
}
_chosePicture() async {
final ImagePicker _picker = ImagePicker();
XFile imageFile = await _picker.pickImage(
source: ImageSource.gallery,
) as XFile;
setState(() {
_storedImage = File(imageFile.path);
});
final appDir = await syspath.getApplicationDocumentsDirectory();
String fileName = path.basename(_storedImage!.path);
final savedImage = await _storedImage!.copy('${appDir.path}/$fileName');
listImages.add(savedImage);
}
To display the carousel I tried:
_storedImage != null
? Column(
children: [
CarouselSlider(
options: CarouselOptions(
enableInfiniteScroll: false,
enlargeCenterPage: true,
enlargeFactor: 0.25,
),
items: listImages.map((i) {
return Builder(builder:
(BuildContext context) {
return Container(
width: MediaQuery.of(context)
.size
.width *
0.75,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(10),
border: Border.all(
color: Colors.black87),
color: Colors.grey[350],
),
child: OutlinedButton(
onPressed: _showDeleteDialog,
onLongPress: () =>
_showDeleteDialog(),
child: Image.file(
(_storedImage!),
),
),
);
});
}).toList(),
),
Padding(
padding: const EdgeInsets.all(8),
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: map<Widget>(listImages,
(index, url) {
return InkWell(
onTap: () {
setState(() {
_pageController
.jumpToPage(index);
currentIndex = index;
});
},
child: Container(
width: 10,
height: 10,
margin: const EdgeInsets
.symmetric(
vertical: 10,
horizontal: 5,
),
decoration:
const BoxDecoration(
shape: BoxShape.circle,
color: Colors.grey,
),
),
);
}),
),
),
],
)
: const Text(
'No image',
style: TextStyle(
fontWeight: FontWeight.bold,
),
)
