Selectable cards leading to different pages

Actions & Logic

Hello everyone,

I'm trying to create a user interface with four cards, each having a unique color. These cards should be dynamically generated from a variable (using 'generating children from variable').

My goal is to:

  • Highlight the selected card: When a card is tapped, its border should turn green, while the other cards keep their initial border.

  • Handle redirection: After selecting a card, a "Next" button should redirect the user to a specific page, different for each card.

Thank you in advance for your help.

What have you tried so far?

"Hi everyone,

I'm currently facing an issue with managing the state of individual cards within a Flutterflow GridView. I've tried several approaches:

  • Boolean for state: I've added a boolean field to my data to indicate whether a card is active or inactive, but I'm unable to uniquely associate this state with each card.

  • Integer for index: I've used an integer to identify each card, but I'm unable to isolate the increment of this integer for each individual card.

The problem seems to stem from the fact that all my cards are managed within the same GridView, preventing me from differentiating their states.

What are the best practices for managing the state of individual cards within a Flutterflow GridView?

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