How to being able to change the image on a card by swipping the images?-CodePudding

I want to have a card with an image and I want to be able to change the images by swiping the images. Now I have a card with BoxDecordation and Image Decoration, but how is it possible to add the image swiping functionality to the image decoration? Or is there any convenient solution? Here is my code so far:

Card(
    child: Container(
      decoration: BoxDecoration(
              borderRadius:
                  BorderRadius.circular(15),
              image: DecorationImage(
                  alignment:
                      Alignment.bottomCenter,
                  image: image(photoURL).image,
                  fit: BoxFit.scaleDown),
            )
      child: Container(
        padding: EdgeInsets.all(5),
        child: Column(children: [
                      Text(id),
                      Text(
                          name,
                          style: const TextStyle(
                          fontWeight:
                          FontWeight.bold),
                ),
        ]),
      ),
    ),
    ),

CodePudding user response：

I think what you are looking for is PageView.

final PageController controller = PageController();
return PageView(
  controller: controller,
  children: const <Widget>[
    Center(
      child: Text('First Page'),
    ),
    Center(
      child: Text('Second Page'),
    ),
    Center(
      child: Text('Third Page'),
    )
  ],
);

In your case the children will be a List of your card.

CodePudding user response：

If you are looking to change the image inside the card based on swipe you can create a list of images and add an index.. On each swipe increment the index and use that index to fetch image from the list like shown below.

List<String> imagePathList = ["path1", "path2"....]; //add all image path here.
int currentIndex = 0;

GestureDetector(
  onPanUpdate: (details) {
    // Swiping in right direction.
    if (details.delta.dx > 0) {
      setState((){
       if(currentIndex 1 < imagePathList.length)currentIndex  ;
      });
    }
  
    // Swiping in left direction.
    if (details.delta.dx < 0) {}
  },
  child: Card(
    child: Container(
      decoration: BoxDecoration(
              borderRadius:
                  BorderRadius.circular(15),
              image: DecorationImage(
                  alignment:
                      Alignment.bottomCenter,
                  image: AssetImage(imagePathList[currentIndex]),//use NetworkImage if its a network image
                  fit: BoxFit.scaleDown),
            )
      child: Container(
        padding: EdgeInsets.all(5),
        child: Column(children: [
                      Text(id),
                      Text(
                          name,
                          style: const TextStyle(
                          fontWeight:
                          FontWeight.bold),
                ),
        ]),
      ),
    ),
    ),
)