Clipping Widgets when SlidingUpPanel not fully expanded

[alestiago]

Describe the bug I am not sure if this is a bug. Consider this as a question instead of a bug (initially).

The idea is to show a Container or any other Widget a little bit shifted from the panel. Illustration 1 shows this behaviour (see below in "Screenshots" section of the issue).

However, when I try to do so by using a Stack and Positioned widget the behaviour is somewhat unexpected. Instead, the container is clipped if the SlidingUpPanel is not fully expanded. Illustration 2 shows this behaviour.

In addition, when the SlidingUpPanel is fully expanded, only then, the Container is not clipped. Illustration 3 shows this behaviour.

To Reproduce The idea is to assign a Stack to the panel parameter and then use a Positioned to shift the desired Widget upwards. In this example I've used a Container.

Steps to reproduce the behaviour:

1. Include a SlidingUpPanel in your application following the documentation recommended method (this is using the body parameter).

   return SlidingUpPanel(
     panel: _buildPanel(),
     controller: panelController,
     body: body,
   );
   }

2. Build the panel with a Stack and Positioned widget.

   Widget _buildPanel() {
   return Stack(
     overflow: Overflow.visible,
     children: [
       Positioned(
         top: -25,
         right: 0,
         child: Container(
           width: 50,
           height: 50,
           color: Colors.blue,
         ),
       ),
     ],
   );
   }

Expected behaviour When the SlidingUpPanel is not fully expanded, if I use a Stack and a Positioned widget to shift a Widget upwards this should not be clipped. As a developer, I would like to specify this clipping behaviour.

Screenshots Note: the illustrations I will use the "blue" colour to represent the SlidingUpPanel and the "purple" colour to represent the Container

Illustration 1

Illustration 2

As a screenshot:

Illustration 3

As a screenshot:

Sample main.dart

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: 'Panel',
      home: MyPanel(),
    );
  }
}

class MyPanel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SlidingUpPanel(
      panel: _buildPanel(),
      body: Scaffold(),
    );
  }

  Widget _buildPanel() {
    return Stack(
      overflow: Overflow.visible,
      children: [
        Positioned(
          top: -25,
          right: 0,
          child: Container(
            width: 50,
            height: 50,
            color: Colors.blue,
          ),
        ),
      ],
    );
  }
}

[ablbol]

I ran into same problem today. I have two buttons 50% out of the panel and they are clipped as shown in the pictures.

[KoBoVa]

simply modify the core file of the package in the part: //the actual sliding part !_isPanelVisible ? Container() : _gestureHandler( child: Stack( clipBehavior: Clip.none, children: <Widget>[ //open panel Positioned( top: widget.slideDirection == SlideDirection.UP ? 0.0 : null, bottom: widget.slideDirection == SlideDirection.DOWN ? 0.0 : null, width: MediaQuery.of(context).size.width - (widget.margin != null ? widget.margin!.horizontal : 0) - (widget.padding != null ? widget.padding!.horizontal : 0), child: Container( height: widget.maxHeight, child: widget.panel != null ? widget.panel : widget.panelBuilder!(_sc), )),

adding clipBehavior: Clip.none to Stack