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

nicover · Accepted Answer · 2022-10-31 15:53:55Z

1

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

answered Oct 31, 2022 at 15:53

nicover

2,6531 gold badge18 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Андрей Макаренко Over a year ago

thx, snapping_sheet perfectly works for me

Akinjiola Toni · Accepted Answer · 2023-01-12 09:14:16Z

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,
 ),
),
)

Collectives™ on Stack Overflow

Flutter NestedScrollView body comes under header

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related