flutterexpandable

How can I change the header when the ExpandablePanel is opened


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();
  }


Solution

  • 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 :

    enter image description here