Content flows over rounded top corners

[welfvh]

Describe the bug Listcontent is shown outside of the rounded corners.

To Reproduce Add a rounded corner (24px) to the top of your slidinguppanel. Add a header with rounded (24px) corners. Add a Listview with content that has less than 24px padding. Scroll down in the listview and see the content visible in these corners.

Expected behavior Not seeing content, having it wrapped by the rounded corner.

Screenshots

Smartphone (please complete the following information):

• Device: [iPhone 12 Pro Simulator, iPhone 12 mini]
• OS: [14.4]
• Flutter Version [stable 1.22.5]
• sliding_up_panel Version [1.0.2]

Sample main.dart Please provide a sample main.dart that reproduces this issue. The code provided here should be able to be run on its own without any external dependencies.

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> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SlidingUpPanel(
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(24), topRight: Radius.circular(24)),
        panelBuilder: (ScrollController scrollController) => Container(
          child: ListView(
            controller: scrollController,
            children: [
              Card(child: ListTile(title: Text('data'))),
              Card(child: ListTile(title: Text('data'))),
              Card(child: ListTile(title: Text('data'))),
              Card(child: ListTile(title: Text('data'))),
              Card(child: ListTile(title: Text('data'))),
              Card(child: ListTile(title: Text('data'))),
              Card(child: ListTile(title: Text('data'))),
              Card(child: ListTile(title: Text('data'))),
              Card(child: ListTile(title: Text('data'))),
            ],
          ),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('You have pushed the button this many times:'),
              Text('x', style: Theme.of(context).textTheme.headline4),
            ],
          ),
        ),
      ),
    );
  }
}

[polarby]

Try using ClipRRect.

ClipRRect(
                    borderRadius: BorderRadius.all(Radius.circular(30)),
                    child: widget.panelBuilder!),