Insert an image StaggeredGridView that is upload by the user !! The argument type 'File' can't be assigned to the parameter type '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])