hope you have good day. I wanna achieve something like this below => gif image 1
for whom gif is not clear.it is screenshot from app called Yelp
. it is sliver app bar with expanding and collapsing. when it collapse search bar goes fixed to title.
anyway i have done by far this => gif image 2
my search bar is shrinking when i collapse sliver app bar. i want that search wont shrink when i collapse sliver app bar and fix search bar in title above. this is my code
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
double changingHeight;
double appBarHeight;
bool appBarSearchShow = false;
final TextEditingController _filter = new TextEditingController();
List<String> itemList = [];
@override
void initState() {
for (int count = 0; count < 50; count++) {
itemList.add("Item $count");
}
changingHeight = 300;
}
@override
Widget build(BuildContext context) {
appBarHeight = MediaQuery.of(context).padding.top + kToolbarHeight;
return Scaffold(
backgroundColor: Colors.white,
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxScrolled) {
return <Widget>[createSilverAppBar()];
},
body: ListView.builder(
itemCount: itemList.length,
itemBuilder: (context, index) {
return Card(
child: ListTile(
title: Text(itemList[index]),
),
);
})),
);
}
SliverAppBar createSilverAppBar() {
return SliverAppBar(
backgroundColor: Colors.white,
expandedHeight: 300,
floating: false,
pinned: true,
// title: appBarSearchShow == true
// ? CupertinoTextField(
// controller: _filter,
// keyboardType: TextInputType.text,
// placeholder: "Search..",
// placeholderStyle: TextStyle(
// color: Color(0xffC4C6CC),
// fontSize: 14.0,
// fontFamily: 'Brutal',
// ),
// prefix: Padding(
// padding: const EdgeInsets.fromLTRB(9.0, 6.0, 9.0, 6.0),
// child: Icon(
// Icons.search,
// ),
// ),
// decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(8.0),
// color: Colors.white,
// ),
// )
// : Container(),
flexibleSpace: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
if (constraints.biggest.height == appBarHeight) {
appBarSearchShow = true;
} else {
appBarSearchShow = false;
}
return FlexibleSpaceBar(
collapseMode: CollapseMode.parallax,
titlePadding: EdgeInsets.only(bottom: 10),
centerTitle: true,
title: constraints.biggest.height != appBarHeight
? Container(
//margin: EdgeInsets.symmetric(horizontal: 10),
constraints: BoxConstraints(minHeight: 30, maxHeight: 30),
width: 220,
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey.withOpacity(0.6),
offset: const Offset(1.1, 1.1),
blurRadius: 5.0),
],
),
child: CupertinoTextField(
controller: _filter,
keyboardType: TextInputType.text,
placeholder: 'Search',
placeholderStyle: TextStyle(
color: Color(0xffC4C6CC),
fontSize: 14.0,
fontFamily: 'Brutal',
),
prefix: Padding(
padding: const EdgeInsets.fromLTRB(5.0, 5.0, 0.0, 5.0),
child: Icon(
Icons.search,
size: 18,
),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
color: Colors.white,
),
),
)
: Container(),
background: Container(
//height: constraints.maxHeight - 15,
color: Colors.white,
margin: EdgeInsets.only(bottom: 30),
child: Image.asset(
'assets/mainBackImage.jpg',
fit: BoxFit.cover,
),
),
);
}),
);
}
}
any help would be appreciated.