如何在 Flutter 中创建小部件的下拉列表？

Question

I'd like to implement a Drop Down button that open a list of other Card. For example, what happens when we click on "Campionati Appuntati" in these screenshoots:

How could I code this in Flutter?

EDIT: I found ExpansionPanelList that could help me, but I don't know how to code expansionCallback field

ExpansionPanelList(
        children: [
          ExpansionPanel(
              headerBuilder: (context, isExpanded) {
                return ListTile(
                  title: Text('Click To Expand', style: TextStyle(color: Colors.white),),
                );
              },
              body:ListTile(
                title: Text('Description text',style: TextStyle(color: Colors.black)),
                tileColor: Colors.white,
              ),
            backgroundColor: Colors.green
          ),
        ],
        expansionCallback: (panelIndex, isExpanded) {
         
        },
  )

Answer 1

You can create a state bool to handle expand mode.

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

  @override
  State<EXTEst> createState() => _EXTEstState();
}

class _EXTEstState extends State<EXTEst> {
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          ExpansionPanelList(
            children: [
              ExpansionPanel(
                  isExpanded: _isExpanded,
                  headerBuilder: (context, isExpanded) {
                    return ListTile(
                      title: Text(
                        'Click To Expand',
                        style: TextStyle(color: Colors.white),
                      ),
                    );
                  },
                  body: ListTile(
                    title: Text('Description text',
                        style: TextStyle(color: Colors.black)),
                    tileColor: Colors.white,
                  ),
                  backgroundColor: Colors.green),
            ],
            expansionCallback: (panelIndex, isExpanded) {
              debugPrint(isExpanded.toString());
              setState(() {
                _isExpanded = !isExpanded;
              });
            },
          ),
        ],
      ),
    );
  }
}

More about ExpansionPanel