Flutter add images in carousel with known position

Question

I currently have a carousel in flutter where I can add and delete images, but the problem is that I can add after the last picture in the carousel.

Likewise I can delete just the last picture, in order.

How can I choose what picture to delete or where to add it based on the user position in the carousel?

I use two buttons, one for adding the pictures and another for deleting them, by calling specific methods ( a method for add, another for delete ).

Here is the code

import 'dart:io';

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:image_picker/image_picker.dart';

class ProductCarousel extends StatefulWidget {
  @override
  _ProductCarouselState createState() => _ProductCarouselState();
}

class ImageConfig {
  String source;
  String path;

  ImageConfig({this.source, this.path});
}

class _ProductCarouselState extends State<ProductCarousel> {
  List<ImageConfig> imgList = [
    ImageConfig(
        source: "http",
        path:
        'https://cdn.pixabay.com/photo/2016/04/15/08/04/strawberries-1330459_960_720.jpg'),
    ImageConfig(
        source: "http",
        path:
        'https://cdn.pixabay.com/photo/2019/12/01/16/56/cookies-4665910_960_720.jpg'),
    ImageConfig(
        source: "http",
        path:
        'https://cdn.pixabay.com/photo/2017/05/23/22/36/vegetables-2338824_960_720.jpg')
  ];
  List<Widget> imageSliders;

  final picker = ImagePicker();

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

    setState(() {
      imgList.add(ImageConfig(source: "file", path: pickedFile.path));
    });
  }

  Future deleteImage() async {
    setState(() {
      imgList.removeLast();
    });
  }

  @override
  Widget build(BuildContext context) {
    imageSliders = imgList
        .map(
          (item) =>
          Container(
            child: Container(
              margin: EdgeInsets.all(5.0),
              child: ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(5.0)),
                  child: Stack(
                    children: <Widget>[
                      item.source == "http"
                          ? Image.network(item.path,
                          fit: BoxFit.cover, width: 1000.0)
                          : Image.file(File(item.path),
                          fit: BoxFit.cover, width: 1000.0),
                      Positioned(
                        bottom: 0.0,
                        left: 0.0,
                        right: 0.0,
                        child: Container(
                          decoration: BoxDecoration(
                            gradient: LinearGradient(
                              colors: [
                                Color.fromARGB(200, 0, 0, 0),
                                Color.fromARGB(0, 0, 0, 0)
                              ],
                              begin: Alignment.bottomCenter,
                              end: Alignment.topCenter,
                            ),
                          ),
                          padding: EdgeInsets.symmetric(
                              vertical: 10.0, horizontal: 20.0),
                        ),
                      ),
                    ],
                  )),
            ),
          ),
    )
        .toList();

    return Container(
     child: Column(
        children: <Widget>[
          CarouselSlider(
            options: CarouselOptions(
                autoPlay: false,
                aspectRatio: 2.0,
                enlargeCenterPage: true,
                enlargeStrategy: CenterPageEnlargeStrategy.height,
                pauseAutoPlayOnManualNavigate: true,
                pauseAutoPlayOnTouch: true,
                scrollDirection: Axis.horizontal),
            items: imageSliders,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              FlatButton(
                               padding: EdgeInsets.all(8.0),
                splashColor: Colors.tealAccent,
                child: Row(
                  children: <Widget>[
                    Icon(FontAwesomeIcons.plus),
                  ],
                ),
                onPressed: getImage,
              ),
              FlatButton(
                padding: EdgeInsets.all(8.0),
                splashColor: Colors.red,
                child: Row(
                  children: <Widget>[
                    Icon(FontAwesomeIcons.trashAlt),
                  ],
                ),
                onPressed: deleteImage,
              ),
            ],
          )
        ],
      ),
    );
  }
}

Answer 1

1. add int pageIndex = 0;

2. add onPageChanged property to CarouselSlider:

   onPageChanged: (index, reason) {
     pageIndex = index;
   }
   

3. change getImage():

   Future getImage() async {
     final pickedFile = await picker.getImage(source: ImageSource.gallery);
   
     setState(() {
       //imgList.add(ImageConfig(source: "file", path: pickedFile.path));
       if (pageIndex == 0)
         imgList.add(ImageConfig(source: "file", path: pickedFile.path));
       else 
         imgList.insert(pageIndex + 1, ImageConfig(source: "file", path: pickedFile.path)); //insert after current image
     });
   }
   

4. change deleteImage():

   Future deleteImage() async {
    setState(() {
      //imgList.removeLast();
      imgList.removeAt(pageIndex); //remove current image
    });
   }
   

Full code:

import 'dart:io';

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:image_picker/image_picker.dart';

class ProductCarousel extends StatefulWidget {
  @override
  _ProductCarouselState createState() => _ProductCarouselState();
}

class ImageConfig {
  String source;
  String path;

  ImageConfig({this.source, this.path});
}

class _ProductCarouselState extends State<ProductCarousel> {
  int pageIndex = 0;

  List<ImageConfig> imgList = [
    ImageConfig(
        source: "http",
        path:
        'https://cdn.pixabay.com/photo/2016/04/15/08/04/strawberries-1330459_960_720.jpg'),
    ImageConfig(
        source: "http",
        path:
        'https://cdn.pixabay.com/photo/2019/12/01/16/56/cookies-4665910_960_720.jpg'),
    ImageConfig(
        source: "http",
        path:
        'https://cdn.pixabay.com/photo/2017/05/23/22/36/vegetables-2338824_960_720.jpg')
  ];
  List<Widget> imageSliders;

  final picker = ImagePicker();

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

    setState(() {
      //imgList.add(ImageConfig(source: "file", path: pickedFile.path));
      if (pageIndex == 0)
        imgList.add(ImageConfig(source: "file", path: pickedFile.path));
      else 
        imgList.insert(pageIndex + 1, ImageConfig(source: "file", path: pickedFile.path));
    });
  }

  Future deleteImage() async {
    setState(() {
      //imgList.removeLast();
      imgList.removeAt(pageIndex);
    });
  }

  @override
  Widget build(BuildContext context) {
    imageSliders = imgList
        .map(
          (item) =>
          Container(
            child: Container(
              margin: EdgeInsets.all(5.0),
              child: ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(5.0)),
                  child: Stack(
                    children: <Widget>[
                      item.source == "http"
                          ? Image.network(item.path,
                          fit: BoxFit.cover, width: 1000.0)
                          : Image.file(File(item.path),
                          fit: BoxFit.cover, width: 1000.0),
                      Positioned(
                        bottom: 0.0,
                        left: 0.0,
                        right: 0.0,
                        child: Container(
                          decoration: BoxDecoration(
                            gradient: LinearGradient(
                              colors: [
                                Color.fromARGB(200, 0, 0, 0),
                                Color.fromARGB(0, 0, 0, 0)
                              ],
                              begin: Alignment.bottomCenter,
                              end: Alignment.topCenter,
                            ),
                          ),
                          padding: EdgeInsets.symmetric(
                              vertical: 10.0, horizontal: 20.0),
                        ),
                      ),
                    ],
                  )),
            ),
          ),
    )
        .toList();

    return Scaffold(
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center ,
            children: <Widget>[
              CarouselSlider(
                options: CarouselOptions(
                    autoPlay: false,
                    aspectRatio: 2.0,
                    enlargeCenterPage: true,
                    enlargeStrategy: CenterPageEnlargeStrategy.height,
                    pauseAutoPlayOnManualNavigate: true,
                    pauseAutoPlayOnTouch: true,
                    scrollDirection: Axis.horizontal,
                    onPageChanged: (index, reason) {
                      pageIndex = index;
                    }
                ),
                items: imageSliders,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  FlatButton(
                                  padding: EdgeInsets.all(8.0),
                    splashColor: Colors.tealAccent,
                    child: Row(
                      children: <Widget>[
                        Icon(FontAwesomeIcons.plus),
                      ],
                    ),
                    onPressed: getImage,
                  ),
                  FlatButton(
                    padding: EdgeInsets.all(8.0),
                    splashColor: Colors.red,
                    child: Row(
                      children: <Widget>[
                        Icon(FontAwesomeIcons.trashAlt),
                      ],
                    ),
                    onPressed: deleteImage,
                  ),
                ],
              )
            ],
          ),
        )
    );
  }
}

Answer 2

Works !!! Amazing!!

import 'dart:io';

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class ProductCarousel extends StatefulWidget {
  @override
  _ProductCarouselState createState() => _ProductCarouselState();
}

class ImageConfig {
  String source;
  String path;

  ImageConfig({this.source, this.path});
}

class _ProductCarouselState extends State<ProductCarousel> {
  int _currentPosition = 0;
  List<ImageConfig> imgList = [
    ImageConfig(
        source: "http",
        path:
            'https://cdn.pixabay.com/photo/2016/04/15/08/04/strawberries-1330459_960_720.jpg'),
    ImageConfig(
        source: "http",
        path:
            'https://cdn.pixabay.com/photo/2019/12/01/16/56/cookies-4665910_960_720.jpg'),
    ImageConfig(
        source: "http",
        path:
            'https://cdn.pixabay.com/photo/2017/05/23/22/36/vegetables-2338824_960_720.jpg')
  ];
  List<Widget> imageSliders;
  final picker = ImagePicker();

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    imageSliders = imgList.map((item) {
      print(item.path);
      return Container(
        child: Container(
          margin: EdgeInsets.all(5.0),
          child: ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
              child: Stack(
                children: <Widget>[
                  item.source == "http"
                      ? Image.network(item.path,
                          fit: BoxFit.cover, width: 1000.0)
                      : Image.file(File(item.path),
                          fit: BoxFit.cover, width: 1000.0),
                  Positioned(
                    bottom: 0.0,
                    left: 0.0,
                    right: 0.0,
                    child: Container(
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                          colors: [
                            Color.fromARGB(200, 0, 0, 0),
                            Color.fromARGB(0, 0, 0, 0)
                          ],
                          begin: Alignment.bottomCenter,
                          end: Alignment.topCenter,
                        ),
                      ),
                      padding: EdgeInsets.symmetric(
                          vertical: 10.0, horizontal: 20.0),
                    ),
                  ),
                ],
              )),
        ),
      );
    }).toList();

    return Container(
      child: Column(
        children: <Widget>[
          CarouselSlider(
            options: CarouselOptions(
                autoPlay: false,
                aspectRatio: 2.0,
                enlargeCenterPage: true,
                enlargeStrategy: CenterPageEnlargeStrategy.height,
                pauseAutoPlayOnManualNavigate: true,
                onPageChanged: (position, reason) =>
                    {_currentPosition = position},
                pauseAutoPlayOnTouch: true,
                scrollDirection: Axis.horizontal),
            items: imageSliders,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              FlatButton(
                padding: EdgeInsets.all(8.0),
                splashColor: Colors.tealAccent,
                child: Row(
                  children: <Widget>[ Icon(FontAwesomeIcons.plus)],
                ),
                onPressed: getImage,
              ),
              FlatButton(
                padding: EdgeInsets.all(8.0),
                splashColor: Colors.red,
                child: Row(
                  children: <Widget>[
                    Icon(FontAwesomeIcons.trashAlt),
                  ],
                ),
                onPressed: () {
                  deleteImage();
                },
              ),
            ],
          )
        ],
      ),
    );
  }

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

   
    var item = ImageConfig(source: "file", path: pickedFile.path);

    setState(() {
      imgList.insert(_currentPosition, item);
    });
  }

  Future deleteImage() async {
    setState(() {
      imgList.removeAt(_currentPosition);
    });
  }
}