How do I call a sliding up panel in Flutter? - user-interface

Question

I am using https://pub.dev/packages/sliding_up_panel and I want to trigger the opening of a new panel once a button is pressed on my existing panel.
#override
Widget build(BuildContext context) {
BorderRadiusGeometry radius = BorderRadius.only(
topLeft: Radius.circular(24.0),
topRight: Radius.circular(24.0),
);
return Scaffold(
appBar: AppBar(
title: Text("SlidingUpPanelExample"),
),
body: SlidingUpPanel(
panel: Center(
child: RaisedButton(
child: Text('Show new panel'),
onPressed: () {
**///want to add code
here to trigger the callback of the new panel.**
},
),
),
collapsed: Container(
decoration: BoxDecoration(
color: Colors.blueGrey,
borderRadius: radius
),
child: Center(
child: Text(
"This is the collapsed Widget",
style: TextStyle(color: Colors.white),
),
),
),
body: Center(
child: Text("This is the Widget behind the sliding panel"),
),
borderRadius: radius,
),
);
}
This dependency has the capability to call an open() method with the help of a controller but I am unable to understand how to call a new sliding up panel with it (and obviously closing the existing one).
This is the code for the open() operation:
PanelController _pc = new PanelController();
...
RaisedButton(
child: Text("Open"),
onPressed: () => _pc.open(),
),

Answer 1

You can copy paste run full code below
You can use Column and wrap these two SlidingUpPanel with Visibility and set maintainState, maintainAnimation to true
Working demo show switch between SlidingUpPanel 1 and 2
code snippet
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Visibility(
maintainState: true,
maintainAnimation: true,
visible: _visible,
child: SlidingUpPanel(
controller: _pc1,
panel: Center(
child: RaisedButton(
child: Text('Show new panel 2'),
onPressed: () {
_pc1.close();
_visible = false;
setState(() {});
_pc2.open();
},
working demo
full code
import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
PanelController _pc1 = new PanelController();
PanelController _pc2 = new PanelController();
bool _visible = true;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
BorderRadiusGeometry radius = BorderRadius.only(
topLeft: Radius.circular(24.0),
topRight: Radius.circular(24.0),
);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Visibility(
maintainState: true,
maintainAnimation: true,
visible: _visible,
child: SlidingUpPanel(
controller: _pc1,
panel: Center(
child: RaisedButton(
child: Text('Show new panel 2'),
onPressed: () {
_pc1.close();
_visible = false;
setState(() {});
_pc2.open();
},
),
),
collapsed: Container(
decoration:
BoxDecoration(color: Colors.blueGrey, borderRadius: radius),
child: Center(
child: Text(
"Panel 1",
style: TextStyle(color: Colors.orange),
),
),
),
body: Center(
child: Text(
"Panel 1 This is the Widget behind the sliding panel")),
borderRadius: radius,
),
),
Visibility(
maintainState: true,
maintainAnimation: true,
visible: !_visible,
child: SlidingUpPanel(
controller: _pc2,
panel: Center(
child: RaisedButton(
child: Text('Show new panel 1'),
onPressed: () {
_pc2.close();
_visible = true;
setState(() {});
_pc1.open();
},
),
),
collapsed: Container(
decoration:
BoxDecoration(color: Colors.blueGrey, borderRadius: radius),
child: Center(
child: Text(
"Panel 2 ",
style: TextStyle(color: Colors.red),
),
),
),
body: Center(
child:
Text("Panel 2 This is the Widget behind the sliding panel"),
),
borderRadius: radius,
),
),
],
),
);
}
}