I have a drawer that have a listview that have a nested expansion tiles as its children.

1- I want to close all open expanded tiles exepet the one that just opened.(No more the 1 expanded tile that is open) What is the best way to do this?

2- i also want to keep the open one stay open when i close and reopen the drawer (I acheved this by using key:PageStorageKey but if there is a better way i would like to hear it).

CodePudding user response：

This just work, but go through solution and adopt solution with your project design pattern and adopt it with your state management(Provider)

import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(new ExpansionTileSample());
}

class ExpansionTileSample extends StatefulWidget {
  @override
  ExpansionTileSampleState createState() => new ExpansionTileSampleState();
}

class ExpansionTileSampleState extends State {
  String foos = 'One';
  int _key;

  _collapse() {
    int newKey;
    do {
      _key = new Random().nextInt(10000);
    } while(newKey == _key);
  }

  @override
  void initState() {
    super.initState();
    _collapse();
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: const Text('ExpansionTile'),
        ),
        body: new ExpansionTile(
            key: new Key(_key.toString()),
            initiallyExpanded: false,
            title: new Text(this.foos),
            backgroundColor: Colors.gray,
            children: [
              new ListTile(
                title: const Text('One'),
                onTap: () {
                  setState(() {
                    this.foos = 'One';
                    _collapse();
                  });
                },
              ),
              new ListTile(
                title: const Text('Two'),
                onTap: () {
                  setState(() {
                    this.foos = 'Two';
                    _collapse();
                  });
                },
              ),
              new ListTile(
                title: const Text('Three'),
                onTap: () {
                  setState(() {
                    this.foos = 'Three';
                    _collapse();
                  });
                },
              ),
            ]
        ),
      ),
    );
  }
}

CodePudding user response：

I solved the problem by using this custom ExpansionTile widget from https://stackoverflow.com/a/58221096/19329222

It have errors (I think because the answer is 3 years old) but you can get rid of them by replacing the incorrect syntax with the correct one from the original ExpansionTile widget file.