Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to make only one ExpansionTile expanded at a time

i want when i click on one expansion tile the other to close

StatefulBuilder(
                builder:  (BuildContext context, StateSetter setInternalState,){
                  return ListView( children: [
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 8),
                      child: Divider(height: 2,color: Colors.grey,),
                    ),
                    ExpansionTile(
                        initiallyExpanded: true,
                        maintainState: false,
                        shape: Border(),
                        title: Text('Описание на продукта',
                          style: TextStyle(fontWeight: FontWeight.w500),
                        ),
                        children:[
                          htmlView
                        ] ),
                     ExpansionTile(
                          shape: Border(),
                          title: Text('Описание на продукта 2',
                            style: TextStyle(fontWeight: FontWeight.w500),
                          ),
                          children:[
                            Text('12'),
                            Text('12'),
                            Text('12'),
                            Text('12'),
                          ] ),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 8),
                      child: Divider(height: 2,color: Colors.grey,),
                    ),
                  ]
                  );
                }
              )

i tried using a gesture detector with on tap

Tags:

2

Answers


  1. 0

    You can use two ExpansionTileController for your case.

    StatefulBuilder(
  builder: (
    BuildContext context,
    StateSetter setInternalState,
  ) {
    final ExpansionTileController expansionTileController =
        ExpansionTileController();
    final ExpansionTileController expansionTileController1 =
        ExpansionTileController();
    return ListView(
      children: [...

    and you can call Y controller on X expand.

    ExpansionTile( // panel 1
  controller: expansionTileController,
  onExpansionChanged: (value) {
    if (value) expansionTileController1.collapse();
  },

    Second panel

    ExpansionTile(
    controller: expansionTileController1,
    onExpansionChanged: (value) {
      if (value) expansionTileController.collapse();
    },
    Login or Signup to reply.
  2. 0

    You can manage the expansion state of ExpansionTile using the ExpansionTileController.

    1. Create two instances of ExpansionTileController.
    2. Assign a distinct ExpansionTileController to each corresponding ExpansionTile.
    3. Implement the logic for controlling expansion within the onExpansionChanged callback.

    For example:

    class ExpansionTileSample extends StatefulWidget {
  const ExpansionTileSample({super.key});

  @override
  State<ExpansionTileSample> createState() => _ExpansionTileSampleState();
}

class _ExpansionTileSampleState extends State<ExpansionTileSample> {
  late List<ExpansionTileController> tileControllers;

  @override
  void initState() {
    super.initState();
    tileControllers = List.generate(2, (_) => ExpansionTileController());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StatefulBuilder(builder: (
        BuildContext context,
        StateSetter setInternalState,
      ) {
        return ListView(children: [
          ...,
          ExpansionTile(
              controller: tileControllers[0],
              onExpansionChanged: (isExpanded) {
                if (tileControllers[1].isExpanded) {
                  tileControllers[1].collapse();
                }
                if (isExpanded) {
                  tileControllers[0].expand();
                } else {
                  tileControllers[0].collapse();
                }
              },
              ...,
          ExpansionTile(
              controller: tileControllers[1],
              onExpansionChanged: (isExpanded) {
                if (tileControllers[0].isExpanded) {
                  tileControllers[0].collapse();
                }
                if (isExpanded) {
                  tileControllers[1].expand();
                } else {
                  tileControllers[1].collapse();
                }
              },
              ...,
          ...,
        ]);
      }),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search