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