Image list edit - flutter

Question

I have an edit view which contains an image list.I'm using image picker to upload multiple images and created the image list.When the edit view comes I have displayed the previous uploaded images from the API and I need to edit this images(remove/add).I have done thee display and remove part but I can't use the image picker to upload more images in the edit view.Can someone please give me a solution to this.
This is the images I'm getting for edit view,
_imageGridEdit() {
return ChangeNotifierProvider.value(
value: _postGetNotifier,
child: Consumer<PostGetNotifier>(builder: (context, imgNtfr, child) {
if (imgNtfr.isLoading == true) {
return Container();
} else {
return imgNtfr.post?.images?.length == 0
? Container()
: GridView.builder(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: imgNtfr.post?.images?.length,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 8,
mainAxisSpacing: 8),
itemBuilder: (BuildContext context, int index) {
return imgNtfr.post?.images?.length == 0
? Container()
: Stack(children: [
Container(
height: 150,
width: 150,
child: ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Image.network(
'${Config.API_URL}/file/${imgNtfr.post?.images?[index].id}',
height: 150,
width: 200,
fit: BoxFit.cover,
)),
),
Align(
alignment: Alignment.topRight,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 20,
width: 20,
child: FloatingActionButton(
heroTag: 'rem1',
backgroundColor: const Color(0xffED104D),
onPressed: () {
setState(() => imgNtfr.post?.images
?.removeAt(index));
},
child: const Icon(
Icons.close,
color: Colors.white,
size: 15,
),
),
),
),
)
]);
});
}
}));
}
This is how I'm displaying the images getting from image picker
_imageGrid() {
return GridView.builder(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: _imageFileList == null
? 0
: (_imageFileList!.length > 5 ? 5 : _imageFileList!.length),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3, crossAxisSpacing: 8, mainAxisSpacing: 8),
itemBuilder: (BuildContext context, int index) {
return _imageFileList!.length == 0
? Container()
: Stack(children: [
Container(
height: 150,
width: 150,
child: ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Image.file(
File(_imageFileList![index].path),
fit: BoxFit.cover,
)),
),
Align(
alignment: Alignment.topRight,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 20,
width: 20,
child: FloatingActionButton(
heroTag: 'rem1',
backgroundColor: const Color(0xffED104D),
onPressed: () {
setState(() => _imageFileList?.removeAt(index));
},
child: const Icon(
Icons.close,
color: Colors.white,
size: 15,
),
),
),
),
)
]);
});
}
what I need is to use the image picker images and the edit displaying images from the API to show at the same time.