💬
Get Help
sherry wu
sherry wu
·Every small step counts

Dynamic Pagination for a Carousel

Widgets & Design

Hello community friends, I am new to FlutterFlow and coding in general. Right now I am stuck with making pagination styling respond to current slide. What I created is a simple carousel widget in a mobile UI builder, with a row of containers as the pagination - each container is a small bar, indicating one slide. I've connected flutter flow to firebase where I uploaded 16 images. Right now in test mode, I can see all 16 images and pagination is able to show correct number of small bars (16 in total). Auto-rotation is also working well.
However, I am struggling with making the bar that indicates current slide in a different color and width. My goal is to make the 'current bar' in white color and 2 times wide of inactive bars.

What have you tried so far?

At homepage level, I created a field named "activeIndex". At the carousel level, I created an action: On Page Change->update page state->activeIndex, set value to, carousel current index. At the container level, I added a condition to make the bar show different color depending on the state (I haven't differentiate width yet). However, when I run test mode, the bars are all same color.

For debugging, I added a text widget and made it equal to activeIndex, it should update itself while carousel is running. But in test mode, it's constantly showing number 0 (you can see it at the center of the screenshot).

Did you check FlutterFlow's Documentation for this topic?
No
2
3 replies