I have an ExpandablePanel with an arrow down icon in the header, when you click on it the body of the ExpandablePanel expands, I would like that when I click on it this Icon also change to an arrow up, and when I click on it again, get back to an arrow down, and so on.
Here is my code :
return ExpandableNotifier(
controller: expandableController,
child: ExpandablePanel(
theme: const ExpandableThemeData(
hasIcon: false,
headerAlignment: ExpandablePanelHeaderAlignment.center
),
header: Icon(BeoticIcons.simply_down, color: BeoColors.lightGreyBlue),
collapsed: SizedBox.shrink(),
expanded:
Row(
children: [
Expanded(
child: Form(
key: UniqueKey(),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Flexible(
child: buildDateTimePickerContainer2()
),
Flexible(
child: buildTimesInputFieldContainer2()
),
//buildVerticalSpace(20.0)
],
),
buildButtonContainer()
],
),
),
)
],
)
)
);
You can get state from ExpandableController
and check with expandableController.expanded
. To update the UI addListener
on controller.
@override
void initState() {
super.initState();
expandableController.addListener(() {
setState(() {});
});
}
....
header: Icon(
expandableController.expanded
? Icons.arrow_upward
: Icons.arrow_downward,
color: Colors.blue),