Home > Enterprise >  Flutter NestedScrollView body comes under header
Flutter NestedScrollView body comes under header

Time:11-01

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

CodePudding user response:

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

  • Related