SliverAppBar contains textfield search box, but it scrolls up when scrolls. How to show the searchbox while scrolling. I did my own works, but didn't work. If there is any resource about Sliverappbar and Slivergrid, It also useful. But now How to pin appbar textfield?
SliverAppBar(
//snap: true,
stretch: true,
//floating: true,
title: Text('Home'),
centerTitle: true,
expandedHeight: 100.0,
backgroundColor: Colors.red,
leading: IconButton(
icon: Icon(
Icons.menu,
color: Colors.white,
),
onPressed: () {},
),
actions: [
IconButton(
icon: Icon(
Icons.notifications,
color: Colors.white,
),
onPressed: () {},
),
],
//floating: false,
pinned: true,
flexibleSpace: ListView(
children: [
SizedBox(
height: 40.0,
),
Padding(
padding: const EdgeInsets.only(
top: 12.0,
bottom: 12.0,
left: 8.0,
right: 8.0,
),
child: Container(
height: 40,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5.0)),
child: TextField(
decoration: InputDecoration(
labelText: "Search products...",
border: InputBorder.none,
icon: IconButton(onPressed: () {}, icon: Icon(Icons.search)),
),
),
),
),
],
),
);
flexibleSpace
has been design for this scrolling effect purpose, it will shrink based on scroll. However, you can get your desire UI using title
here is the demo
SliverAppBar(
//snap: true,
stretch: true,
//floating: true,
toolbarHeight: 100.0 + kToolbarHeight,
/// based on your desing
title: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: Icon(
Icons.menu,
color: Colors.white,
),
onPressed: () {},
),
Text('Home'),
IconButton(
icon: Icon(
Icons.notifications,
color: Colors.white,
),
onPressed: () {},
),
],
),
Padding(
padding: const EdgeInsets.only(
top: 12.0,
bottom: 12.0,
left: 8.0,
right: 8.0,
),
child: Container(
height: 40,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5.0)),
child: TextField(
decoration: InputDecoration(
labelText: "Search products...",
border: InputBorder.none,
icon: IconButton(
onPressed: () {}, icon: Icon(Icons.search)),
),
),
),
),
],
),
centerTitle: true,
// expandedHeight: 100.0,
backgroundColor: Colors.red,
// leading: IconButton(
// icon: Icon(
// Icons.menu,
// color: Colors.white,
// ),
// onPressed: () {},
// ),
// actions: [
// ],
//floating: false,
pinned: true,
),
Does it solve your question?