Flutter - The Expand Icon is not working properly

Question

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'),

score 1 · Accepted Answer · answered Mar 25 '23 at 07:33

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'),
        ],
      ),
    ));
  }
}

Flutter - The Expand Icon is not working properly

1 Answers1