Flutter NestedScrollView body comes under header

Question

I want to create scrollable screen with rounded corners in header. I use NestedScrollView with SliverPersistentHeader but when i scroll up, body content comes under header, so it's broke corners look. Can I achieve it somehow else with correct corners look?

NestedScrollView(
                      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
                        return <Widget>[
                          SliverPersistentHeader(
                            delegate: CollapsableSpace(
                              minHeight: 0,
                              maxHeight: MediaQuery.of(context).size.height * 0.25,
                            ),
                            pinned: true,
                            floating: false,
                          ),
                          SliverPersistentHeader(
                            delegate: PublicTransportRidesBenefitsDelegate(
                              state.voucherDetails,
                              state.route,
                            ),
                            pinned: true,
                            floating: false,
                          ),
                        ];
                      },
                      body: Container(
                        margin: EdgeInsets.only(top: 0),
                        color: Colors.blue,
                        padding: EdgeInsets.symmetric(horizontal: Dimens.spanBig),
                        height: 1000,
                       
                      ),
                    )

I need blue section be scrollable example

Answer 1

Wrapping your NestedScrollView in a ClipRRect will clip the body content when overscrolled past the NestedScrollView boundaries (pinned header for example) like the following:

ClipRRect(
 borderRadius: BorderRadius.only(
  topLeft: Radius.circular(Dimens.clipperRadius),
  topRight: Radius.circular(Dimens.clipperRadius),
  bottomLeft: Radius.zero,
  bottomRight: Radius.zero,
 ),
 child: NestedScrollView(headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
  return <Widget>[
   SliverPersistentHeader(
    delegate: CollapsableSpace(
     minHeight: 0,
     maxHeight: MediaQuery.of(context).size.height * 0.25,
    ),
    pinned: true,
    floating: false,
   ),
   SliverPersistentHeader(
    delegate: PublicTransportRidesBenefitsDelegate(
     state.voucherDetails,
     state.route,
    ),
    pinned: true,
    floating: false,
   ),
  ];
 },
 body: Container(
  margin: EdgeInsets.only(top: 0),
  color: Colors.blue,
  padding: EdgeInsets.symmetric(horizontal: Dimens.spanBig),
  height: 1000,
 ),
),
)

Answer 2

To handle this case I highly recommend you to use this snapping_sheet plugin instead of NestedScrollView.

You will be able to achieve what you want here and it will be easier to manipulate views and callback with the snapping sheet