Scroll animation like yelp app in flutter - flutter

Question

I'm trying to make a CustomScrollView similar to this:
I'm using a SliverAppBar but it seems that it is not the right way. My code so far:
CustomScrollView(
slivers: <Widget>[
SliverAppBar(
expandedHeight: 340,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
background: BackgroundImageWidget(),
centerTitle: true,
// title: Text("Search by cities or activitry in Kreis Kleve"),
title: SearchButtonWidget(),
),
),
),
SliverList(...)
What I get:
I cant figure out why the SearchButtonWidget is so huge at first. When it's shrinked it has the right size.
Is sliverAppBar with fliexibleSpace even the right approach?
Edit: can someone also tell me how to make the search button overlapping with the widget below? I guess sliverAppBar can't do that.
Edit 2: maybe it's a white background added under the image. I need to investigate this.

Answer 1

#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
top: true,
child: CustomScrollView(
slivers: <Widget>[
SliverPersistentHeader(
delegate: MySliverAppBar(
expandedHeight: 250,
title: Container(
margin: EdgeInsets.symmetric(horizontal: 20.0, vertical: 0),
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.all(Radius.circular(5.0))),
child: Row(children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 20.0, right: 10.0),
child: Icon(Icons.search),
),
Expanded(
child: TextFormField(
keyboardType: TextInputType.text,
textInputAction: TextInputAction.done,
cursorColor: Colors.black,
autofocus: false,
decoration: InputDecoration(
filled: true,
fillColor: Colors.transparent,
contentPadding: EdgeInsets.symmetric(
vertical: 10, horizontal: 15),
hintText: "Search",
border: InputBorder.none,
disabledBorder: OutlineInputBorder(
borderSide:
new BorderSide(color: Colors.transparent),
borderRadius: new BorderRadius.circular(2),
),
focusedBorder: OutlineInputBorder(
borderSide:
new BorderSide(color: Colors.transparent),
borderRadius: new BorderRadius.circular(2),
)),
),
)
]),
)),
pinned: true,
),
SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return Container(
child: ListTile(
title: Text("${index}a"),
));
}, childCount: 25))
],
),
),
);
}
.
class MySliverAppBar extends SliverPersistentHeaderDelegate {
final double expandedHeight;
final Widget title;
MySliverAppBar({#required this.expandedHeight, this.title});
final _avatarMarginTween = EdgeInsetsTween(
begin: EdgeInsets.only(bottom: 20),
end: EdgeInsets.only(
bottom: 0.0,
));
final _searchMarginTween = EdgeInsetsTween(
begin: EdgeInsets.only(bottom: 0),
end: EdgeInsets.only(bottom: 8,));
final _avatarAlignTween =
AlignmentTween(begin: Alignment.bottomCenter, end: Alignment.center);
#override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
double tempVal = 75 * maxExtent / 100;
final progress = shrinkOffset > tempVal ? 1.0 : shrinkOffset / tempVal;
final avatarMargin = _avatarMarginTween.lerp(progress);
final searchMargin = _searchMarginTween.lerp(progress);
final searchAlignment = progress > 0.8 ? _avatarAlignTween.lerp(progress) : _avatarAlignTween.lerp(0);
return Stack(
fit: StackFit.expand,
overflow: Overflow.visible,
children: <Widget>[
Padding(
padding: avatarMargin,
child: Image.network(
"https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
fit: BoxFit.cover,
),
),
Center(
child: Opacity(
opacity: shrinkOffset / expandedHeight > 0.7 ? shrinkOffset / expandedHeight : 0.0,
child: Container(
color: Colors.red,
)
),
),
Padding(
padding: searchMargin,
child: Align(
alignment: Alignment.bottomCenter,
child: title,
),
)
],
);
}
#override
double get maxExtent => expandedHeight;
#override
double get minExtent => kToolbarHeight;
#override
bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true;
}