Return to Answer

You can easily achieve this using a list, I have created a sample code for you please check this. Multi Image picker Library

You can easily achieve this using a list, I have created a sample code for you please check this.

import 'package:blog_app/models/ImageUploadModel.dart'; import 'package:flutter/material.dart'; import 'package:multi_image_picker/multi_image_picker.dart'; class SingleImageUpload extends StatefulWidget { @override _SingleImageUploadState createState() { return _SingleImageUploadState(); } } class _SingleImageUploadState extends State<SingleImageUpload> { List<Object> images = List<Object>(); @override void initState() { // TODO: implement initState super.initState(); setState(() { images.add("Add Image"); images.add("Add Image"); images.add("Add Image"); images.add("Add Image"); }); } @override Widget build(BuildContext context) { return new MaterialApp( home: new Scaffold( appBar: new AppBar( centerTitle: true, title: const Text('Plugin example app'), ), body: Column( children: <Widget>[ Expanded( child: buildGridView(), ), ], ), ), ); } Widget buildGridView() { return GridView.count( shrinkWrap: true, crossAxisCount: 3, childAspectRatio: 1, children: List.generate(images.length, (index) { if (images[index] is ImageUploadModel) { ImageUploadModel uploadModel = images[index]; return Card( clipBehavior: Clip.antiAlias, child: Stack( children: <Widget>[   AssetThumb(   asset: uploadModel.asset, width: 300, height: 300, ), Positioned( right: 5, top: 5, child: InkWell( child: Icon( Icons.remove_circle, size: 20, color: Colors.red, ), onTap: () { setState(() { images.replaceRange(index, index + 1, ['Add Image']); }); }, ), ), ], ), ); } else { return Card( child: IconButton( icon: Icon(Icons.add), onPressed: () { loadAssets(index); }, ), ); } }), ); } Future<void> loadAssets(int index) async { List<Asset> resultList;  try { resultList = await MultiImagePicker.pickImages( maxImages: 1,  ); } on Exception catch (e) {  print(e.toString()); } // If the widget was removed from the tree while the asynchronous platform // message was in flight, we want to discard the reply rather than calling // setState to update our non-existent appearance. if (!mounted) return; setState(() { resultList.forEach((imageAsset) { ImageUploadModel imageUpload = new ImageUploadModel(); imageUpload.isUploaded = false; imageUpload.uploading = false; imageUpload.asset = imageAsset; imageUpload.imageUrl = ''; images.replaceRange(index, index + 1, [imageUpload]); }); });   } } 

class ImageUploadModel { bool isUploaded; bool uploading;   Asset asset; String imageUrl; ImageUploadModel({ this.isUploaded, this.uploading, this.asset, this.imageUrl, }); } 

import 'package:blog_app/models/ImageUploadModel.dart'; import 'package:flutter/material.dart'; import 'package:image_picker/image_picker.dart'; class SingleImageUpload extends StatefulWidget { @override _SingleImageUploadState createState() { return _SingleImageUploadState(); } } class _SingleImageUploadState extends State<SingleImageUpload> { List<Object> images = List<Object>();  Future<File> _imageFile; @override void initState() { // TODO: implement initState super.initState(); setState(() { images.add("Add Image"); images.add("Add Image"); images.add("Add Image"); images.add("Add Image"); }); } @override Widget build(BuildContext context) { return new MaterialApp( home: new Scaffold( appBar: new AppBar( centerTitle: true, title: const Text('Plugin example app'), ), body: Column( children: <Widget>[ Expanded( child: buildGridView(), ), ], ), ), ); } Widget buildGridView() { return GridView.count( shrinkWrap: true, crossAxisCount: 3, childAspectRatio: 1, children: List.generate(images.length, (index) { if (images[index] is ImageUploadModel) { ImageUploadModel uploadModel = images[index]; return Card( clipBehavior: Clip.antiAlias, child: Stack( children: <Widget>[ Image.file( uploadModel.imageFile, width: 300, height: 300, ), Positioned( right: 5, top: 5, child: InkWell( child: Icon( Icons.remove_circle, size: 20, color: Colors.red, ), onTap: () { setState(() { images.replaceRange(index, index + 1, ['Add Image']); }); }, ), ), ], ), ); } else { return Card( child: IconButton( icon: Icon(Icons.add), onPressed: () { _onAddImageClick(index); }, ), ); } }), ); } Future _onAddImageClick(int index) async { setState(() { _imageFile = ImagePicker.pickImage(source: ImageSource.gallery); getFileImage(index); });  } void getFileImage(int index) async { // var dir = await path_provider.getTemporaryDirectory(); _imageFile.then((file) async { setState(() { ImageUploadModel imageUpload = new ImageUploadModel(); imageUpload.isUploaded = false; imageUpload.uploading = false; imageUpload.imageFile = file; imageUpload.imageUrl = ''; images.replaceRange(index, index + 1, [imageUpload]); });  }); }  } 

class ImageUploadModel { bool isUploaded; bool uploading; File imageFile; String imageUrl; ImageUploadModel({ this.isUploaded, this.uploading, this.imageFile, this.imageUrl, }); } 

import 'package:blog_app/models/ImageUploadModel.dart'; import 'package:flutter/material.dart'; import 'package:multi_image_picker/multi_image_picker.dart'; class SingleImageUpload extends StatefulWidget { @override _SingleImageUploadState createState() { return _SingleImageUploadState(); } } class _SingleImageUploadState extends State<SingleImageUpload> { List<Object> images = List<Object>(); @override void initState() { // TODO: implement initState super.initState(); setState(() { images.add("Add Image"); images.add("Add Image"); images.add("Add Image"); images.add("Add Image"); }); } @override Widget build(BuildContext context) { return new MaterialApp( home: new Scaffold( appBar: new AppBar( centerTitle: true, title: const Text('Plugin example app'), ), body: Column( children: <Widget>[ Expanded( child: buildGridView(), ), ], ), ), ); } Widget buildGridView() { return GridView.count( shrinkWrap: true, crossAxisCount: 3, childAspectRatio: 1, children: List.generate(images.length, (index) { if (images[index] is ImageUploadModel) { ImageUploadModel uploadModel = images[index]; return Card( clipBehavior: Clip.antiAlias, child: Stack( children: <Widget>[ AssetThumb( asset: uploadModel.asset, width: 300, height: 300, ), Positioned( right: 5, top: 5, child: InkWell( child: Icon( Icons.remove_circle, size: 20, color: Colors.red, ), onTap: () { setState(() { images.remove(uploadModel); }); }, ), ), ], ), ); } else { return Card( child: IconButton( icon: Icon(Icons.add), onPressed: () { loadAssets(index); }, ), ); } }), ); } Future<void> loadAssets(int index) async { List<Asset> resultList; try { resultList = await MultiImagePicker.pickImages( maxImages: 1, ); } on Exception catch (e) { print(e.toString()); } // If the widget was removed from the tree while the asynchronous platform // message was in flight, we want to discard the reply rather than calling // setState to update our non-existent appearance. if (!mounted) return; setState(() { resultList.forEach((imageAsset) { ImageUploadModel imageUpload = new ImageUploadModel(); imageUpload.isUploaded = false; imageUpload.uploading = false; imageUpload.asset = imageAsset; imageUpload.imageUrl = ''; images.replaceRange(index, index + 1, [imageUpload]); }); }); } } 

import 'package:blog_app/models/ImageUploadModel.dart'; import 'package:flutter/material.dart'; import 'package:multi_image_picker/multi_image_picker.dart'; class SingleImageUpload extends StatefulWidget { @override _SingleImageUploadState createState() { return _SingleImageUploadState(); } } class _SingleImageUploadState extends State<SingleImageUpload> { List<Object> images = List<Object>(); @override void initState() { // TODO: implement initState super.initState(); setState(() { images.add("Add Image"); images.add("Add Image"); images.add("Add Image"); images.add("Add Image"); }); } @override Widget build(BuildContext context) { return new MaterialApp( home: new Scaffold( appBar: new AppBar( centerTitle: true, title: const Text('Plugin example app'), ), body: Column( children: <Widget>[ Expanded( child: buildGridView(), ), ], ), ), ); } Widget buildGridView() { return GridView.count( shrinkWrap: true, crossAxisCount: 3, childAspectRatio: 1, children: List.generate(images.length, (index) { if (images[index] is ImageUploadModel) { ImageUploadModel uploadModel = images[index]; return Card( clipBehavior: Clip.antiAlias, child: Stack( children: <Widget>[ AssetThumb( asset: uploadModel.asset, width: 300, height: 300, ), Positioned( right: 5, top: 5, child: InkWell( child: Icon( Icons.remove_circle, size: 20, color: Colors.red, ), onTap: () { setState(() { images.replaceRange(index, index + 1, ['Add Image']); }); }, ), ), ], ), ); } else { return Card( child: IconButton( icon: Icon(Icons.add), onPressed: () { loadAssets(index); }, ), ); } }), ); } Future<void> loadAssets(int index) async { List<Asset> resultList; try { resultList = await MultiImagePicker.pickImages( maxImages: 1, ); } on Exception catch (e) { print(e.toString()); } // If the widget was removed from the tree while the asynchronous platform // message was in flight, we want to discard the reply rather than calling // setState to update our non-existent appearance. if (!mounted) return; setState(() { resultList.forEach((imageAsset) { ImageUploadModel imageUpload = new ImageUploadModel(); imageUpload.isUploaded = false; imageUpload.uploading = false; imageUpload.asset = imageAsset; imageUpload.imageUrl = ''; images.replaceRange(index, index + 1, [imageUpload]); }); }); } }