flutterdartflutter-layoutexpandable

How to change the Icon of an ExpandablePanel onExpansion in Flutter


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


Solution

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