flutterdartexpandable

Flutter - The Expand Icon is not working properly


I'm creating expandable data. I tried with the Expand icon widget. But the expand icon is not working properly. The button state is not changing.

Code:

  bool _isExpanded = true;
Container(
                color: const Color(0xffeaeaea),
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        child: Text('Description'),
                      ),
                      ExpandIcon(
                          expandedColor: Colors.black,
                          color: Colors.black,
                          isExpanded: _isExpanded,
                          onPressed: (bool _isExpanded) {
                            setState(() {
                              _isExpanded = !_isExpanded;
                            });
                          }),
                    ]),
              ),
            if (_isExpanded) const Text('Data'),

Solution

  • the problem here in your code is you are using the private bool variable in callback of the onPressed method, that is causing the issue.

    here is the working code:

    class Entry extends StatefulWidget {
      const Entry({Key? key}) : super(key: key);
    
      @override
      State<Entry> createState() => _EntryState();
    }
    
    class _EntryState extends State<Entry> {
      bool _isExpanded = true;
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                color: const Color(0xffeaeaea),
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        child: Text('Description'),
                      ),
                      ExpandIcon(
                        isExpanded: _isExpanded,
                        color: Colors.white,
                        expandedColor: Colors.black,
                        disabledColor: Colors.grey,
                        onPressed: (bool isExpanded) {
                          setState(() {
                            _isExpanded = !isExpanded;
                          });
                        },
                      ),
                    ]),
              ),
              if (_isExpanded) const Text('Data'),
            ],
          ),
        ));
      }
    }