Trying to create an FAQ section with an expandable listview

Widgets & Design

I'm trying to create an expandable list view like an accordion with questions and answers, and when you click on the question, the answer gets shown.

I have tried to use the Expandable in the list view, but unless I am missing something you can only set the height of the overall widget. When collapsed and in a list, this creates big gaps between the individual expandable widgets. e.g if the height of the expandable is 100, when collapsed, it will be much smaller, let's say 30, so there will be a gap of 70, between it and the next expandable and so on.

So I then created a listview with a main row (to drive the query) and inside it two rows, one for the question and one for the answer. The row with the question has an onClick action to toggle a page state element, which controls the Visibility of the second row that has the answer. This works fine when there is only one question, but when there is more than one, it toggles the answers to all questions, whereas I only want to toggle the answer of the question that was clicked.
How can I get toggle the answer only for the row clicked?

Or is there a better/different way to do this?

What have you tried so far?

Using Expandable in a list view.

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