SmoothPageIndicator with CarouselSlider.builder flutter

MarcMsan
August 28, 2023
194 views
1 vote
2 Answers

I am not able to connect the SmoothPageIndicator with the Carousel because the SmoothPageIndicator needs a PageController which I can’t use on the Carousel becuase it need a Carousel Controller.
What can i do in this situation?

This is the code for the SmoothPageIndicator

SmoothPageIndicator(
                controller: zcontroller5,
                count: 3,
                axisDirection: Axis.horizontal,
                effect: const ExpandingDotsEffect(
                  expansionFactor: 2,
                  dotHeight: 4,
                  activeDotColor: Color(0xfff7bb23),
                  dotColor: Color.fromRGBO(100, 100, 111, 0.2),
                ),
              ),

And this is the code for the CarouselSlider.builder

CarouselSlider.builder(
          itemCount: widget.dataList2.length,
          itemBuilder:
              (BuildContext context, int itemIndex, int pageViewIndex) {
            final data2 = widget.dataList2[itemIndex];
            if (data2["img_lst"].length > 0) {
              return GestureDetector(
                child: Stack(
                  children: [
                    Container(
                      margin: const EdgeInsets.all(4.0),
                      decoration: BoxDecoration(
                        color: const Color.fromARGB(96, 255, 255, 255),
                        borderRadius: BorderRadius.circular(5.0),
                        image: DecorationImage(
                          image: NetworkImage(
                              '${context.resources.image.networkImagePath}/${data2["img_lst"][0]}'),
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                    Align(
                      alignment: Alignment.bottomCenter,
                      child: Container(
                          margin: const EdgeInsets.all(4.0),
                          decoration: BoxDecoration(
                            color: const Color(0XFF131314).withOpacity(0.6),
                            borderRadius:
                                const BorderRadius.all(Radius.circular(5)),
                          ),
                          height: context.appValues.appSizePercent.h8,
                          width: context.appValues.appSizePercent.w100,
                          child: Padding(
                            padding: EdgeInsets.only(
                                left: context.appValues.appPadding.p10),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  data2['job_title'],
                                  maxLines: 1,
                                  overflow: TextOverflow.ellipsis,
                                  style: getPrimaryBoldStyle(
                                      color: Colors.white, fontSize: 14),
                                ),
                                Text(
                                  data2['rec_id'] != null &&
                                          data2['rec_id']['first_name'] !=
                                              null &&
                                          data2['rec_id']['last_name'].length >
                                              0
                                      ? data2['rec_id']['first_name'] +
                                          ' ' +
                                          data2['rec_id']['last_name']
                                      : '',
                                  style: getPrimaryRegularStyle(
                                      color: const Color(0xffC2C2CC),
                                      fontSize: 12),
                                ),
                              ],
                            ),
                          )),
                    ),
                  ],
                ),
                onTap: () {
                  widget.jobsViewModel
                      .setSingleJobFromObject(jobDetails: data2);
                  Navigator.of(context).push(_createRoute(JobsDetails(
                    image:
                        data2['img_lst'] != null && data2['img_lst'].length > 0
                            ? data2['img_lst'][0]
                            : 'e07c4a71-26a3-4863-a204-6b9fd797fd60',
                    position: data2['job_title'],
                    jobSchedule: 'Full Time - Hourly Paid',
                    companyName: data2['rec_id'] != null &&
                            data2['rec_id']['first_name'] != null &&
                            data2['rec_id']['last_name'].length > 0
                        ? data2['rec_id']['first_name'] +
                            ' ' +
                            data2['rec_id']['last_name']
                        : '',
                    job: data2,
                    location: data2["rec_id"] != null &&
                            data2["rec_id"]['location'] != null &&
                            data2["rec_id"]['location'].length > 0
                        ? data2["rec_id"]['location']
                        : '',
                    rec_id:
                        data2["rec_id"] != null && data2['rec_id'].length > 0
                            ? data2["rec_id"]['id']
                            : '',
                  )));
                },
              );
            }
            return Container(
              margin: const EdgeInsets.all(4.0),
              decoration: BoxDecoration(
                color: const Color.fromARGB(96, 255, 255, 255),
                borderRadius: BorderRadius.circular(5.0),
                image: DecorationImage(
                  image: AssetImage(context.resources.image.homeBackground),
                  fit: BoxFit.contain,
                ),
              ),
            );
          },
          options: CarouselOptions(
              height: 270.0,
              enlargeCenterPage: true,
              aspectRatio: 16 / 9,
              autoPlayCurve: Curves.fastOutSlowIn,
              enableInfiniteScroll: false,
              autoPlayAnimationDuration: const Duration(milliseconds: 800),
              viewportFraction: 0.8,
              ),
        ),

Tags: dart flutter

Answers

- DineshKumarM
- August 28, 2023 at 8:12 am
- 0 votes
0
I don’t know if this is the way but still give this one a try.

Declare a PageController that will be used for the SmoothPageIndicator:
```
PageController _pageController = PageController();
```
In your CarouselSlider.builder, set the onPageChanged callback to update the _pageController:
```
CarouselSlider.builder(
  itemCount: widget.dataList2.length,
  itemBuilder: (BuildContext context, int itemIndex, int pageViewIndex) {
    // Your existing item builder code...
  },
  options: CarouselOptions(
    // Other options...
    onPageChanged: (index, reason) {
      _pageController.animateToPage(index,
          duration: Duration(milliseconds: 300), curve: Curves.easeInOut);
    },
  ),
),
```
Use the _pageController in your SmoothPageIndicator:
```
SmoothPageIndicator(
  controller: _pageController,
  count: 3, // Replace count
  axisDirection: Axis.horizontal,
  effect: const ExpandingDotsEffect(
    expansionFactor: 2,
    dotHeight: 4,
    activeDotColor: Color(0xfff7bb23),
    dotColor: Color.fromRGBO(100, 100, 111, 0.2),
  ),
),
```
By setting the onPageChanged callback in the CarouselSlider.builder, you’re ensuring that whenever the Carousel Controller changes the page index, it also updates the Page Controller used by the SmoothPageIndicator. This way, both components will stay in sync, and the indicator will reflect the correct page index of the carousel.
Login or Signup to reply.

create a variable named currentIdx:

int currentIdx = 0;

add this code to Carousel Slider onPageChanged:

onPageChanged: (index, _) {
                setState(() {
                  currentIdx = index;
                });
              },

and instead of using SmoothPageIndicator, use AnimatedSmoothIndicator:

AnimatedSmoothIndicator(
            activeIndex: currentIdx,
            count: 3,
            axisDirection: Axis.horizontal,
            effect: const ExpandingDotsEffect(
              expansionFactor: 2,
              dotHeight: 4,
              activeDotColor: Color(0xfff7bb23),
              dotColor: Color.fromRGBO(100, 100, 111, 0.2),
            ),
          ),

as the Documentation of SmoothPageIndicator says:

/// Unlike [SmoothPageIndicator] this indicator is self-animated
/// and it only needs to know active index
///
/// Useful for paging widgets that does not use [PageController]

Please signup or login to give your own answer.

Click here to cancel reply.