Unique headerValue and expandedValue for ExpansionPanelRadio

Question

How to add unique value to each expandable tile to make the FAQ look like this?

Took my code from this link: https://medium.com/aubergine-solutions/how-to-create-expansion-panel-list-in-flutter-2fba574366e8

I want to add my own unique headerValue and expandedValue and not let it just take up a standard number like

 headerValue: 'Book $index',
      expandedValue: 'Details for Book $index goes here'

I'll probably be using this class and not theirs:

class FAQ {
  FAQ({
    this.id,
    this.expandedValue,
    this.headerValue,
  });

  int id;
  String expandedValue;
  String headerValue;
}

Answer 1

You can create your custom class which can return a list of your questions. In your Item class you need to define functions Item.fromJson(dynamic json) which will return you Map or your items. Then you can create one more function where you will pass your actual data to your class Item and it will return you Map so you can use in your widgets.

Here is the full code and working

  class Item {
  final String id;
  final String expandedValue;
  final String headerValue;
  Item(
    this.id,
    this.expandedValue,
    this.headerValue,
  );

  factory Item.fromJson(dynamic json) {
    return Item(
        "${json['id']}", "${json['expandedValue']}", "${json['headerValue']}");
  }
}

var mylist = [
  {"id": "1", "headerValue": "question 1", "expandedValue": "answer 1"},
  {"id": "2", "headerValue": "question 2", "expandedValue": "answer 2"}
];

getFeedbackList() {
  return mylist.map((json) => Item.fromJson(json)).toList();
}

class ExpansionItems extends StatefulWidget {
  const ExpansionItems({Key? key}) : super(key: key);

  @override
  State<ExpansionItems> createState() => _ExpansionItemsState();
}

class _ExpansionItemsState extends State<ExpansionItems> {
  final List<Item> _data = getFeedbackList();
  @override
  Widget build(BuildContext context) {
    print(_data);
    return SingleChildScrollView(
      child: Container(
        child: _buildPanel(),
      ),
    );
  }

  Widget _buildPanel() {
    return ExpansionPanelList.radio(
      initialOpenPanelValue: 2,
      children: _data.map<ExpansionPanelRadio>(
        (Item item) {
          return ExpansionPanelRadio(
            value: item.id,
            headerBuilder: (BuildContext context, bool isExpanded) {
              return ListTile(
                title: Text(item.headerValue),
              );
            },
            body: ListTile(
              title: Text(item.expandedValue),
            ),
          );
        },
      ).toList(),
    );
  }
}

You can try above code here