How can I place some buttons to separate between tabs in a sliding up panel? Currently what I am trying to do is place them only when the slider is opened up, ohterwise the button tabs should dissapear. I am trying to controll this behavior with ternary operator and the variable: PanelState == PanelState.OPEN ?
but it does not work for me. The row dissapear when I close the panel.
SlidingUpPanel(
body: Body()
backdropEnabled: true,
panelSnapping: true,
collapsed: ListTile(
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
InkWell(
onTap: () {
_pcBreedsGrouping.open();
},
child: const Text(
'Breeds',
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
),
InkWell(
onTap: () {
_pcBreedsGrouping.open();
},
child: const Icon(
Icons.arrow_drop_down,
color: Colors.black,
size: 30,
),
),
],
),
),
minHeight: MediaQuery.of(context).size.height * 0.08,
controller: _pcBreedsGrouping,
defaultPanelState: PanelState.CLOSED,
panel: Positioned(
child: Stack(
children: [
PanelState == PanelState.OPEN
? Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Breeds',
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
InkWell(
onTap: () => _pcBreedsGrouping.close(),
child: const Icon(
Icons.arrow_drop_up,
color: Colors.black,
size: 30,
),
),
],
)
: Container(),
Visually, the panel is like this right now and I drawed what I am trying in red:
When I close the panel I would like it to be how it is right now, without the buttons, but I do not know how to make them dissapear when is closed:
What I am trying to accomplish:
