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