Flutter: отображение списка изображений из галереи устройств

Question

У меня есть ListView для фотографий, и я пытаюсь получить фотографии из галереи и отобразить их на экране, но проблема в том, что когда я нажимаю, чтобы добавить новую фотографию, все фотографии меняются на новую фотографию.

Я хочу изменить каждую фотографию отдельно, не меняя другие фотографии.

File _image;
final picker = ImagePicker();

Future getImage() async {
  final image = await picker.getImage(source: ImageSource.gallery);

  setState(() {
    _image = File(image.path);
    print((image.path));
  });
}

 child: ListView.builder(
    scrollDirection: Axis.horizontal,
    itemCount: 1,
      itemBuilder: (BuildContext context, int index){
      return Row(
        children: <Widget>[
          GestureDetector(
            onTap: (){
              getImage();

            },
            child: Padding(
              padding: EdgeInsets.only(left:5.0, right:5,top: 10),
              child: Container(
                height: 100.0,
                width: 100.0,
                decoration: BoxDecoration(
                  border: Border.all(),
                  image: DecorationImage(
                    image: _image == null ? AssetImage(
                        'assets/images/add_pic.jpg') : FileImage(_image),
                    fit: BoxFit.fill,
                  ),
                  shape: BoxShape.rectangle,
                ),
              ),
            ),
          ),

Answer 1

начните с этого кода:

List<File> _images = [];
final picker = ImagePicker();

Future getImage(int index) async {
  final image = await picker.getImage(source: ImageSource.gallery);

  setState(() {
    _images[index] = File(image.path);
    print((image.path));
  });
}

 child: ListView.builder(
    scrollDirection: Axis.horizontal,
    itemCount: _images.length + 1,
      itemBuilder: (BuildContext context, int index){
      if(index == _images.length){
        return GestureDetector(
            onTap: (){
              getImage(index);
            },
            child: Padding(
              padding: EdgeInsets.only(left:5.0, right:5,top: 10),
              child: Container(
                height: 100.0,
                width: 100.0,
                decoration: BoxDecoration(
                  border: Border.all(),
                  image: DecorationImage(
                    image: AssetImage('assets/images/add_pic.jpg'),
                    fit: BoxFit.fill,
                  ),
                  shape: BoxShape.rectangle,
                ),
              ),
            ),
         );
      }
      return Row(
        children: <Widget>[
          GestureDetector(
            onTap: (){
              getImage();
            },
            child: Padding(
              padding: EdgeInsets.only(left:5.0, right:5,top: 10),
              child: Container(
                height: 100.0,
                width: 100.0,
                decoration: BoxDecoration(
                  border: Border.all(),
                  image: DecorationImage(
                    image: FileImage(_image[index]),
                    fit: BoxFit.fill,
                  ),
                  shape: BoxShape.rectangle,
                ),
              ),
            ),
          ),