Specify the image index when we have multiple swipable images-CodePudding

I have a widget that contains a gesture detector and a card. In this widget I want to show some text information and one or more images. There is something that I don't know the exact name, that shows the image index (For example, we have three images, so there are three small rectangles. We are on the second image, so the second rectangle has a different color or more opacity), I want to know how I can implement this in flutter and what its name is. I have attached the image of that widget I need from a website, and also added my code. Thanks.

 GestureDetector(
      onPanUpdate: (details) {
        if (details.delta.dx > 0) {
          setState(() {
            if (0 < widget.current_index) {
              widget.current_index--;
            }
          });
        }
        if (details.delta.dx < 0) {
          setState(() {
            if (widget.current_index < number_of_photos - 1) {
              widget.current_index  ;
            }
          });}},
      child: SizedBox(
        width: 300,
        height: 400,
        child: Card(
          child: Container(
            decoration: BoxDecoration(
                    image: DecorationImage(
                        alignment: Alignment.bottomCenter,
                        image: image(photoURL[widget.current_index]).image,
                        fit: BoxFit.scaleDown),)
            child: Text(id),
                  Text(
                        name,
                        style: const TextStyle(fontWeight: FontWeight.bold),
                      ),),),),)

PS: Using the links in the solution, I Used AnimatedSmoorh with this code, and it worked perfectly:

 AnimatedSmoothIndicator(
              activeIndex: widget.current_index,
              count: number_of_photos,
              effect: ExpandingDotsEffect(),
            ),

CodePudding user response：

They are called indicators, page indicators, index indicators, etc...

There is a package called smooth_page_indicator that provides a customizable animated page indicator with a set of built-in effects.

Also you can check this gallery from fluttergems.dev to get a good number of indicators packages along with Carousel with built-in indicators.