How do I call a sliding up panel in Flutter?

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(),
        ),

Solution

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,
            ),
          ),
        ],
      ),
    );
  }
}

Comments

[Simran Aswani]

Worked great thanks! just wanted to know if there is a way to add an animation for the closing and opening of the new panel?