[Flutter]How to import image from gallery dynamically - flutter

Question

I am a new flutter learner and trying to create my first app. My problem is...
(1). I use a method to build a place(widget) for image which will come from gallery or camera.
void _showPicker(context) {
showModalBottomSheet(
context: context,
builder: (BuildContext bc) {
return SafeArea(
child: Container(
child: new Wrap(
children: <Widget>[
new ListTile(
leading: new Icon(Icons.photo_library),
title: new Text('Gallery'),
onTap: () {
_imgFromGallery();
Navigator.of(context).pop();
}),
new ListTile(
leading: new Icon(Icons.photo_camera),
title: new Text('Camera'),
onTap: () {
_imgFromCamera();
Navigator.of(context).pop();
},
),
],
),
),
);
});
}
(2). I created a method to import image by using image_picker package.
Future _imgFromGallery() async {
final pickedImage =
await _picker.getImage(source: ImageSource.gallery, imageQuality: 50);
setState(() {
if (pickedImage != null) {
this._image = new File(pickedImage.path);
}
});
}
(3). I create a button which if pressed, will call method (1) and medthod (1) contained medthod (2).
(4). When I added the first image, everything fine but, when I add the second image, the first image also changed to the second
image
So, could you please help me for figure out of this problem?
Sorry that I didn't share the code that call _showPicker (function for displayed image) here is the code...please focus at GestureDetector(...),
_createListStepRow(String item, int index) {
return Column(children: [
Container(
margin: EdgeInsets.only(top: 3),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.circular(15),
border: Border.all(color: Colors.black)),
child: Column(children: [
Row(crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
Container(
width: 1175.0.w,
child: TextField(
autofocus: this.autoFocus,
cursorColor: Colors.black,
decoration: InputDecoration(
prefixIcon: Icon(
Icons.restaurant_outlined,
color: Constants.primaryColor,
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(15),
borderSide: BorderSide(color: Colors.white, width: 1.5),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Colors.white, width: 0),
),
contentPadding: EdgeInsets.symmetric(vertical: 8),
hintText: item,
floatingLabelBehavior: FloatingLabelBehavior.never,
)),
),
IconButton(
icon: Icon(Icons.delete),
onPressed: () {
setState(() {
_itemsStep.removeAt(index);
});
},
),
]),
GestureDetector(
onTap: () async {
_showPicker(context);
},
child: Container(
padding: EdgeInsets.all(8),
// height: 800.0.h,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.grey[200],
// image: DecorationImage(
// image: AssetImage('assets/images/food1.jpg'),
// fit: BoxFit.fill,
// ),
shape: BoxShape.rectangle,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new Column(children: [
Container(
// height: 200.0.h,r
child: _image == null
? _nullImage
: Image.file(_image, fit: BoxFit.contain),
),
// Text(
// 'Click to Add Step Image',
// style: GoogleFonts.poppins(fontSize: 14),
// ),
]),
]),
),
),
SizedBox(height: 60.0.h),
]),
),
SizedBox(height: 30.0.h),
]);
}

Answer 1

First off, you're not storing the images. You're basically choosing the latest one. Lets fix that. Find where you've declared var _image; and change that to final List<File> _images;.
Next, change the Column in the GestureDetector in _showPicker to this:
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new ListView.builder(
itemBuilder: (context, index) {
return Container(
// height: 200.0.h,r
child: _images[index] == null
? _nullImage
: Image.file(_images[index], fit: BoxFit.contain),
);
},
itemCount: _images.length,
// Text(
// 'Click to Add Step Image',
// style: GoogleFonts.poppins(fontSize: 14),
// ),
)
],
),
If the code you gave was working as you said before, this should probably work.