REQUEST: Panel pulls up beyond Viewport by border Radius

[Sam-Guru-In-Training]

Describe the bug If I set the border radius to say 8: SlidingUpPanel( borderRadius: new BorderRadius.vertical(top: Radius.circular(8)),

then I set the Panel's maxHeight: maxHeight: MediaQuery.of(context).size.height - AppBar().preferredSize.height + 8

The curved top corners of the sliding panel stubbornly remain viewable no matter what numbers I add to the maxHeight. In fact if I put some numbers into MaxHeight the Panel will actually block some of its bottom child Widgets from showing.

It would be great to pull the sliding panel up to just beyond the AppBar by the borderRadius, so the curved corners disappear off the screen until the users pulls the sliding panel down. It looks slight unprofessional to have these 2 segments peeping at you on the top of the screen, as you scroll down a ListView, because intuitively they should move off-screen, as the list scrolls.

Great work otherwise :) x Sam.

[saksham-gt]

Hello,

You can use SlideUpPanel in stateful widget and declare a variable for radius, say topRadius with initial value of Radius.circular(8). Then you can do setState((){}) as the panel opens, For ex:

class SlideUpScreen extends StatefulWidget {
  @override
  _SlideUpScreenState createState() => _SlideUpScreenState();
}

class _SlideUpScreenState extends State<SlideUpScreen> {
  final PanelController _pc = PanelController();
  Radius topBorder = Radius.circular(8);                                      // a variable for the radius when the panel is opened
  final PanelController _pc = PanelController();
  ...
  @override
  Widget build(BuildContext context) {
         SlidingUpPanel(
              controller: _pc,
             onPanelOpened: () => {
                 setState(() {
                  topBorder = Radius.circular(0);                                // setState() when the panel is opened
                  }),
                  _pc.open()
                    }, 
               }
                collapsed: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.vertical(
                          top: Radius.circular(8),
                        ),
                        color: Colors.teal[800]!,
                      ),
                    child: .....
                ),
            body: .....
    }

}

[Sam-Guru-In-Training]

🤯 thankyou you Sudo! Of course, thanks for opening my mind with such a complete explanation.

[saksham-gt]

I think you can close this issue if you don't have any further questions.