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