How to change the Icon of an ExpandablePanel onExpansion in Flutter

Question

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

Answer 1

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