Hi,
This strange behavior happens when transitioning from using headerSizeIsClosed with a PanelHeaderWidget to no PanelHeaderWidget at all.
To make the transition I'm using
setState(() {
_headerWidget = null;
pc.rebuild(then: () => pc.expand());
}),
Here is a video demonstrating the issue.
- Please note the initial panel closed size (very small, intended behavior).
- After transitioning to using a header, the panel closed size becomes the size of the header (intended behavior).
- After removing the header and going back to the initial mode, the panel closed size does not go back to what it should be, but instead remains the size of the header.
Imgur Video Link
The issue demonstrated in this video is that in the end, the panel does not go as low as it did in the beginning, despite both not having a header. If the video is unclear, please try lowering the panel after swapping modes with the sample code that replicates the screen:
class GithubExample extends StatefulWidget {
const GithubExample();
@override
_GithubExampleState createState() => _GithubExampleState();
}
class _GithubExampleState extends State<GithubExample> {
PanelController pc;
Widget _headerWidget;
String _mode;
@override
void initState() {
super.initState();
pc = PanelController();
_mode = 'No Header';
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Dynamic Panel Content'),
),
body: Stack(
children: <Widget>[
Center(child: Text('Background')),
SlidingPanel(
panelController: pc,
backdropConfig: BackdropConfig(
enabled: true, closeOnTap: true, shadowColor: Colors.blue),
content: PanelContent(
panelContent: [
Container(
height: 200,
color: Colors.lightGreen,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('MODE: ' + _mode),
Row(
children: <Widget>[
MaterialButton(
onPressed: () => setState(() {
_headerWidget = null;
_mode = 'No Header';
pc.rebuild(then: () => pc.expand());
}),
child: Text('No header'),
),
MaterialButton(
onPressed: () => setState(() {
_headerWidget = _headerSmall();
_mode = 'Small Header';
pc.rebuild(then: () => pc.expand());
}),
child: Text('Small header'),
),
MaterialButton(
onPressed: () => setState(() {
_headerWidget = _headerBig();
_mode = 'Big Header';
pc.rebuild(then: () => pc.expand());
}),
child: Text('Big header'),
)
],
),
],
),
)
],
headerWidget: _headerWidget != null
? PanelHeaderWidget(
options: PanelHeaderOptions(elevation: 0),
headerContent: _headerWidget)
: const PanelHeaderWidget()),
snapping: PanelSnapping.forced,
size: PanelSize(closedHeight: 0.06, expandedHeight: 0.85),
autoSizing: PanelAutoSizing(
autoSizeExpanded: true,
headerSizeIsClosed: true,
useMinExpanded: true,
),
isTwoStatePanel: true,
duration: Duration(milliseconds: 500),
),
],
),
);
}
Widget _headerSmall() {
return Container(
color: Colors.lightBlue,
child: Center(child: Text('SMALL HEADER')),
height: 60,
width: double.infinity,
);
}
Widget _headerBig() {
return Container(
color: Colors.lightBlue,
child: Center(child: Text('BIG HEADER')),
height: 120,
width: double.infinity,
);
}
}
bug fixed
98 Oct 31, 2022
28 Oct 7, 2022
315 Dec 16, 2022
364 Dec 6, 2022
368 Jan 5, 2023
67 Oct 2, 2022
150 Jan 7, 2023
55 Jan 4, 2023
2 May 30, 2022
15 Aug 21, 2021
8 Dec 15, 2022
22 Dec 29, 2022
3 May 26, 2022
428 Dec 30, 2022
352 Dec 25, 2022
3 Oct 31, 2022
2 Sep 29, 2022
15 Sep 13, 2022
2 Feb 9, 2022