When I add a widget to a sliding_up_panel widget dynamically after the initial load, the panel's height does not increase, meaning that the bottom of the panel gets cut off and I get the A RenderFlex overflowed by 27 pixels on the bottom. error.

What can I do to ensure the panel updates its height in this case please?

To Reproduce

Add a widget to the panel dynamically via the condition ? widget : widget logic. For example:

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("SlidingUpPanelExample"),
        ),
        body: Stack(
          children: <Widget>[
            Center(child: Text("This is the Widget behind the sliding panel"),),

            SlidingUpPanel(
              panel: Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    myFirstVariable ? Text("This is a sliding Widget") : Container(),
                    mySecondVariable ? Text("This is another sliding Widget") : Container(),
                  ],
                ),
              )
            )
          ],
        )
    );
  }

Thanks so much!

CodePudding user response：

Plugin has the methods: minHeight and maxHeight to do the work. I think is not posible change it dynamically without set that attributes.

CodePudding user response：

hope this helps:

1. use a controller,

You can control the height of the panel depending on the items on the list (0.0 to 1.0). Ensure to update the UI once you add a new item.

2. use a List

This will solve the renderOverflow you mentioned

  /// just for the example
  List<Widget> items = <Widget>[];

  //adding items
  addItem() {
    items.add(Container(
      constraints: BoxConstraints(maxHeight: 200, minHeight: 200),
      color: Color((Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0),
    ));

    /// if you know in advance the height of the widgets been rendered: 200
    /// if you know in advance the height of the panel: 500, or context.size.height / 2 (which would be 50% of screen) asume 600
    ///
    /// increase panel height panel according to the number of items
    ///
    _pc.panelPosition =
        (items.length * 200) / 600 > 1.0 ? 1 : (items.length * 200) / 600;

    /// Hey
    /// SET State after adding the item
    /// to refresh UI
  }

  Widget _scrollingList(ScrollController sc) {
    return ListView.builder(
      controller: sc,
      itemCount: items.length,
      itemBuilder: (context, index) {
        return items[index];
      },
    );
  }

  PanelController _pc = new PanelController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("SlidingUpPanelExample"),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: addItem,
        ),
        body: Stack(
          children: <Widget>[
            Center(
              child: Text("This is the Widget behind the sliding panel"),
            ),
            SlidingUpPanel(
              controller: _pc,
              panelBuilder: (ScrollController sc) => _scrollingList(sc),
            ),
          ],
        ));

CodePudding user response：

the SlidingUpPanel widget doesn't adjust its height according to its children.

A solution to your problem would be add a SingleChildScrollView to your panel content and use the panelBuilder instead of the panel property.

The panelBuilder takes the burden of managing scrolling and sliding conflicts by providing you a controller that you can feed to your SingleChildScrollView, your code will change to be like the following :

    @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("SlidingUpPanelExample"),
        ),
        body: Stack(
          children: <Widget>[
            Center(child: Text("This is the Widget behind the sliding panel"),),
            SlidingUpPanel(
              panelBuilder:(sc) => SingleChildScrollView(
                controller: sc,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    myFirstVariable ? Text("This is a sliding Widget") : Container(),
                    mySecondVariable ? Text("This is another sliding Widget") : Container(),
                  ],
                ),
              )
            )
          ],
        )
    );
  }

Like this, you won't have any overflow issues, and when the content of the panel overflows the SingleChildScrollView will become scrollable.