Insert an image StaggeredGridView that is upload by the user !! The argument type 'File' can't be assigned to the parameter type 'String' - string

Question

I want to create a StaggeredGridView and fill it with images that the user uploads. The problem is that the type of StaggeredGridView is String or ImageProvider<Object> and the file is PickedFile or File
What is the solution ??
class GalleryClassOneState extends State<GalleryClassOne> {
List<File> arrayImage = [];
File sampleImage;
final _picker = ImagePicker();
// #override
// void initState() {
// super.initState();
// DatabaseReference images =
// FirebaseDatabase.instance.reference().child("NeuralNetwork");
// }
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Galeria clase 1'),
),
body: Container(padding: EdgeInsets.all(8), child: galeria(arrayImage)),
floatingActionButton: FloatingActionButton(
onPressed: _optionsDialogBox,
tooltip: 'Pick Image',
child: Icon(Icons.add_outlined),
),
);
}
Widget galeria(List<File> arrayImage) {
return StaggeredGridView.countBuilder(
crossAxisCount: 4,
itemCount: 11,
itemBuilder: (BuildContext context, int index) {
return ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
color: Colors.deepPurple,
child: Column(
children: <Widget>[
Image.network(arrayImage[index])
],
),
),
);
},
// staggeredTileBuilder: (int index) => new StaggeredTile.fit(1),
staggeredTileBuilder: (int index) =>
new StaggeredTile.count(2, index.isEven ? 2 : 1),
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
);
}
}

Answer 1

We will need to work with the images as bytes instead of files. First, make arrayImage a List<Uint8List>. Here we will store a list of the byte arrays representing an image loaded in memory. Update the galeria() method to accept a List<Uint8List> as well.
Now in the optionsDialogBox() method, we will use the results of the _picker like so:
_picker.getImage(source: ImageSource.gallery).then((pickedFile) {
// read the bytes from the PickedFile
pickedFile.readAsBytes().then((bytes) {
// add the image as bytes to the arrayImage list and update the UI
setState(() => arrayImage.add(bytes));
});
});
When we create our Image widget, we will use the Image.memory() constructor passing to it the bytes representing our image.
Image.memory(arrayImage[index])