07-21-2023, 09:39 PM
I'm trying to overlap a `SliverList` a few pixels over the `SliverAppBar`. Similar to [this post][1]. I'd like the image in the `FlexibleSpaceBar` to go under the radius of my `SliverList`.
I'm attempting to achieve the below.
[![enter image description here][2]][2]
I can only get the radius like so. Without the ability to overlap the `SliverList` onto he `SliverAppBar`.
[![enter image description here][3]][3]
```
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
floating: false,
expandedHeight: MediaQuery.of(context).size.height * 0.50,
flexibleSpace: FlexibleSpaceBar(
background: Image.network(pet.photos.first)
),
),
SliverList(
delegate: SliverChildListDelegate([
Container(
height: 40,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
),
]),
)
],
),
);
}
```
Any direction would be appreciated, thanks!
[1]:
[3]:
I'm attempting to achieve the below.
[![enter image description here][2]][2]
I can only get the radius like so. Without the ability to overlap the `SliverList` onto he `SliverAppBar`.
[![enter image description here][3]][3]
```
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
floating: false,
expandedHeight: MediaQuery.of(context).size.height * 0.50,
flexibleSpace: FlexibleSpaceBar(
background: Image.network(pet.photos.first)
),
),
SliverList(
delegate: SliverChildListDelegate([
Container(
height: 40,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
),
]),
)
],
),
);
}
```
Any direction would be appreciated, thanks!
[1]:
[To see links please register here]
[2]:[3]: