How can I change the header when the ExpandablePanel is opened

Question

I want to change the header part when the ExpandablePanel is opened. When I close it, the old header should come again. How can I do this in Flutter?

true false values are true but text is not updated

return ExpandableNotifier(
          controller: expandableController,
          child: ExpandablePanel(
            header: Padding(
              padding: const EdgeInsets.only(left: 15.0, top: 15.0),
              child: Text(expandableController.expanded
                  ? "${itemCount} kalemi gizlemek için tıklayınız..."
                  : "${itemCount} kalem daha var görmek için tıklayınız..."),
            ),
            collapsed: detayCard(detay, h),
            expanded: detayCard(detay, maxheight),
          ),
        );

  final ExpandableController expandableController = ExpandableController();


  void onExpandableControllerStateChanged() {
    if (expandableController.expanded) {
      print(expandableController.expanded);
    } else {
      print(expandableController.expanded);
    }
  }

  @override
  void initState() {
    super.initState();
    expandableController.addListener(onExpandableControllerStateChanged);

  }
  
  
    @override
  void dispose() {
    expandableController.removeListener(onExpandableControllerStateChanged);
    super.dispose();
  }

esentis · Accepted Answer · 2022-01-19T09:13:22.603

You can try adding a controller to your ExpandablePanel, which controller per documentation has this

  /// Returns [true] if the state is expanded, [false] if collapsed.
  bool get expanded => value;

This way you can change your header by checking the status of your panel, e.g

Text(controller.expanded ? 'Expanded' : 'Collapsed')

Edit:

Example

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    Key? key,
  }) : super(key: key);
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final ExpandableController _controller = ExpandableController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ExpandablePanel(
          controller: _controller
            ..addListener(() {
              setState(() {});
            }),
          header: Text(
            _controller.expanded ? 'Header expanded' : 'Header collapsed',
            key: ValueKey(_controller.expanded),
          ),
          expanded: Container(
            width: MediaQuery.of(context).size.width,
            height: 250,
            color: Colors.green,
          ),
          collapsed: Container(
            width: MediaQuery.of(context).size.width,
            height: 50,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

Above results to this :

I tried but it didn't work, I guess I missed something. Can you show a detailed example? Also, thank you very much for your reply. — Gülsen Keskin, Jan 19 '22 at 08:42
So what can I do to make this widget work the same way when I send it to another page? — Gülsen Keskin, Jan 19 '22 at 09:28
Make the whole thing a different widget, then send that widget (which already has the functionality) to a different page. — esentis, Jan 19 '22 at 09:30

How can I change the header when the ExpandablePanel is opened

1 Answers1