How to set up only one global panel instead of multiple

[leafney]

I want to set up a global sliding_up_panel that can be used in all pages. Now I can open the sliding panel from APage as follows:

@override
Widget build(BuildContext context){
  return Material(
    child: SlidingUpPanel(
      controller: _pc,
      backdropEnabled: true,
      panel: Center(
        child: Text("This is the sliding Widget"),
      ),
      body: Scaffold(
        appBar: AppBar(
          title: Text("SlidingUpPanelExample"),
        ),
        body:  APage(),
        ),
      ),
    ),
  );

// And APage can navigator to sub Page

I want to invoke the panel use controller in the subpage of APage, but it has no effect. Except to setting a new sliding panel in the sub page, is there a way to set a global panel?

My application scenario is here is that the content of sliding display in APage is the same as that of sliding display in sub page. Thanks.

[mohammadne]

Exactly same issue for me.

[mohammadne]

It is very good if we could have something like navigator to call it and open the sliding up panel, in every page we want

[mpcreza]

I want to set up a global sliding_up_panel that can be used in all pages. Now I can open the sliding panel from APage as follows:

@override
Widget build(BuildContext context){
  return Material(
    child: SlidingUpPanel(
      controller: _pc,
      backdropEnabled: true,
      panel: Center(
        child: Text("This is the sliding Widget"),
      ),
      body: Scaffold(
        appBar: AppBar(
          title: Text("SlidingUpPanelExample"),
        ),
        body:  APage(),
        ),
      ),
    ),
  );

// And APage can navigator to sub Page

I want to invoke the panel use controller in the subpage of APage, but it has no effect. Except to setting a new sliding panel in the sub page, is there a way to set a global panel?

My application scenario is here is that the content of sliding display in APage is the same as that of sliding display in sub page. Thanks.

you can do something like this:

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();

  static void expandPanel(BuildContext context) {
    _MainPageState state = context.findAncestorStateOfType();
    state._panelController.open();
  }
}

class _MainPageState extends State<MainPage> {
  PanelController _panelController = PanelController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SlidingUpPanel(
        controller: _panelController,
        panel: Container(),
        body: Container(),
      ),
    );
  }
}

and then call from sub pages:

MainPage.expandPanel(context);

---

UPDATE:

use Provider

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  PanelController _panelController = PanelController();

  @override
  Widget build(BuildContext context) {
    return Provider(
      create: (context) => _panelController,
      child: SlidingUpPanel(
        controller: _panelController,
        panel: Container(),
        body: Container(),
      ),
    );
  }
}

then use panel controller from other widgets:

PanelController panelController = Provider.of(context);
panelController.close();

[mohammadne]

I want to set up a global sliding_up_panel that can be used in all pages. Now I can open the sliding panel from APage as follows:

@override
Widget build(BuildContext context){
  return Material(
    child: SlidingUpPanel(
      controller: _pc,
      backdropEnabled: true,
      panel: Center(
        child: Text("This is the sliding Widget"),
      ),
      body: Scaffold(
        appBar: AppBar(
          title: Text("SlidingUpPanelExample"),
        ),
        body:  APage(),
        ),
      ),
    ),
  );

// And APage can navigator to sub Page

I want to invoke the panel use controller in the subpage of APage, but it has no effect. Except to setting a new sliding panel in the sub page, is there a way to set a global panel? My application scenario is here is that the content of sliding display in APage is the same as that of sliding display in sub page. Thanks.

you can do something like this:

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();

  static void expandPanel(BuildContext context) {
    _MainPageState state = context.findAncestorStateOfType();
    state._panelController.open();
  }
}

class _MainPageState extends State<MainPage> {
  PanelController _panelController = PanelController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SlidingUpPanel(
        controller: _panelController,
        panel: Container(),
        body: Container(),
      ),
    );
  }
}

and then call from sub pages:

MainPage.expandPanel(context);

Thanks. why do you use stf widget, I think you could use stl widget.

[mpcreza]

@mohammadne yeah, you can also use STL widget

[brianschardt]

This should be on the documentation as this will help a lot of people.