How to add a widget between SliverAppBar and Tabbar? - flutter

Question

is there anyway to add a widget like a search bar to be between SliverAppbar and the toolbar?
so that it disppers with the two bars when scroll down?
for instance in the attached pic I want the ad, the button and the tabbar to hide with the appbar while scrolling
I can't see any widgets options in SliverAppbar except Leading, FlexiableSpace and Actions. and I guess they do not provide what I want.
any ideas?

Answer 1

class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
leading: IconButton(
icon: const Icon(Icons.menu),
onPressed: () {},
),
title: const Text('Sample'),
pinned: false,
floating: true,
forceElevated: true,
),
];
},
body: ListView(
padding: const EdgeInsets.all(0),
children: [
banner(),
askButton(context),
search(),
tabController(),
],
),
),
);
}
Widget banner() {
return Container(
margin: const EdgeInsets.fromLTRB(12, 12, 12, 5),
height: 150,
width: double.infinity,
alignment: Alignment.center,
color: Colors.orange,
child: const Text('Banner'),
);
}
Widget askButton(context) {
return Container(
margin: EdgeInsets.fromLTRB(12, 0, MediaQuery.of(context).size.width *.7, 5),
child: ElevatedButton(
onPressed: () {},
child: const Text('+ Ask'),
),
);
}
Widget search() {
return Container(
margin: const EdgeInsets.fromLTRB(12, 0, 12, 5),
child: const TextField(
decoration: InputDecoration(
hintText: 'Search',
prefixIcon: Icon(Icons.search),
border: OutlineInputBorder(),
),
),
);
}
Widget tabController() {
return Container(
margin: const EdgeInsets.fromLTRB(12, 0, 12, 12),
child: DefaultTabController(
length: 3,
initialIndex: 0,
child: ListView(
padding: const EdgeInsets.all(0),
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
children: <Widget>[
const TabBar(
labelColor: Colors.green,
unselectedLabelColor: Colors.black,
tabs: [
Tab(text: 'Questions'),
Tab(text: 'Pinned Questions'),
Tab(text: 'My Quest'),
],
),
tabView(),
],
),
),
);
}
Widget tabView() {
return Container(
height: 800,
alignment: Alignment.topCenter,
margin: const EdgeInsets.fromLTRB(12, 0, 12, 0),
decoration: const BoxDecoration(
border: Border(top: BorderSide(color: Colors.grey, width: 0.5)),
),
child: Padding(
padding: const EdgeInsets.only(top: 30),
child: TabBarView(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('Questions'),
Expanded(
child: Container(),
),
const Text('End of Questions'),
],
),
const Text('Pinned Questions'),
const Text('My Quest'),
],
),
),
);
}
}
See result here.