0

In part of my application that I developed with Flutter, I create containers with ListView and display the photos I keep in a list outside of these containers with the CarouselSlider package. This use has not caused any problems so far, but when I want to add an indicator under the photos, the same indicator works for all containers.

Thanks in advance to anyone who helps or reads.

Stay healthy...

Code Fragment;

1.Create ListView

ListView.builder(
            physics: AlwaysScrollableScrollPhysics(),
            controller: model.scrollController,
            padding: EdgeInsets.only(left: 8, right: 8, top: 0, bottom: 25),
            itemCount: model.hiveService.t.length,
            shrinkWrap: true,
            itemBuilder: (context, index) =>
                model.hiveService.t.getAt(index) != null
                    ? tCard(
                        context,
                        index: index,
                        model: model,
                        t:
                            model.hiveService.t.getAt(index)!,
                        goingPlaces: model.tlist.contains(
                            model.hiveService.t.getAt(index)!.id),
                      )
                    : Container(),
          );

2. Create CarouselSlider

CarouselSlider(
                              options: CarouselOptions(
                                onPageChanged: (index, reason) {
                                  model.onPageChanged(index, reason);
                                  model.notifyListeners();
                                },
                                initialPage: 0,
                                height: 400.0,
                                viewportFraction: 1,
                              ),
                              items: t.photos!.map((i) {
                                return Builder(
                                  builder: (BuildContext context) {
                                    for (int i = 0;
                                        i <= t.photos!.length;
                                        i++);
                                    return Container(
                                        width: (model.isListOrGrid!)
                                            ? double.infinity
                                            : null,
                                        margin: EdgeInsets.all(10),
                                        clipBehavior: Clip.hardEdge,
                                        decoration: BoxDecoration(
                                          borderRadius: BorderRadius.only(
                                              topLeft: Radius.circular(10),
                                              bottomLeft: Radius.circular(10),
                                              bottomRight: Radius.circular(10),
                                              topRight: Radius.circular(10)),
                                        ),
                                        child: GezibilenImage(
                                          i,
                                          boxFit: BoxFit.fill,
                                        ));
                                  },
                                );
                              }).toList(),
                            ),

3. Create Indicator

Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    for (int i = 0;
                                        i <= tl.photos!.length;
                                        i++)
                                      Container(
                                        height: 7,
                                        width: 7,
                                        decoration: BoxDecoration(
                                            color: model.currentIndex == i
                                                ? Colors.blue
                                                : Colors.white,
                                            shape: BoxShape.circle,
                                            boxShadow: [
                                              BoxShadow(
                                                color: Colors.grey,
                                                spreadRadius: 1,
                                                blurRadius: 3,
                                                offset: Offset(2, 2),
                                              ),
                                            ]),
                                      ),
                                  ],
                                ),

I tried a lot of solution about this topic but i can't do anything about it. I want to do indicator under all pictures. thanks...

  • I would start by starting in debug mode and see what value model.currentIndex has in different iterations of the for loop for the indicator – Eagle Jan 23 '23 at 15:18

0 Answers0