fluttertabbarsearchbar
Create SearchBar top of TabBar Flutter
I want to create some page like this in flutter:
Base on picture, the widget must be contain SearchBar at top of TabBar. But I don't know how to put the SearchBar with the code.
I was tried code like this :
return DefaultTabController(
length: 9,
child: Scaffold(
appBar: AppBar(
bottom: const TabBar(
isScrollable: true,
tabs: [
Tab(
text: 'Semua',
),
Tab(
text: 'Project Manager',
),
Tab(
text: 'Project Director',
),
Tab(
text: 'Manager',
),
Tab(
text: 'Officer 1',
),
Tab(
text: 'Officer 2',
),
Tab(
text: 'Officer 1',
),
Tab(
text: 'Officer 2',
),
Tab(
text: 'Officer 1',
)
]),
),
body: TabBarView(
children: [
Container(
color: Colors.white,
child: Column(
children: [
Card(
margin: EdgeInsets.all(13.0),
elevation: 10,
child: Row(
children: <Widget>[
Padding(
padding: EdgeInsets.all(13.0),
child: GestureDetector(
onTap: () {
},
child: Container(
width: 46.0,
height: 46.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.all(Radius.circular(75.0)),
boxShadow: [
BoxShadow(blurRadius: 7.0, color: Colors.black)
]),
),
),
),
GestureDetector(
onTap: () {
showDialog<void>(
context: context,
barrierDismissible: false,
builder: (BuildContext conext) {
return AlertDialog(
title: Text('Not in stock'),
content:
const Text('This item is no longer available'),
actions: <Widget>[
FlatButton(
child: Text('Ok'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
},
child: Container(
padding: EdgeInsets.all(30.0),
child: Chip(
label: Text('Angela Smith'),
)),
),
],
),
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
ElevatedButton(
onPressed: () {},
child: Text('+ Tambah Pengguna Baru')
)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
ElevatedButton(
onPressed: () {},
child: Text('+ Tambah Pengguna Baru')
)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
ElevatedButton(
onPressed: () {},
child: Text('+ Tambah Pengguna Baru')
)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
ElevatedButton(
onPressed: () {},
child: Text('+ Tambah Pengguna Baru')
)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
ElevatedButton(
onPressed: () {},
child: Text('+ Tambah Pengguna Baru')
)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
ElevatedButton(
onPressed: () {},
child: Text('+ Tambah Pengguna Baru')
)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
ElevatedButton(
onPressed: () {},
child: Text('+ Tambah Pengguna Baru')
)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
ElevatedButton(
onPressed: () {},
child: Text('+ Tambah Pengguna Baru')
)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
ElevatedButton(
onPressed: () {},
child: Text('+ Tambah Pengguna Baru')
)
],
),
),
],
),
),
);
Full code here : https://pastebin.com/ESrDUu2C
My question is, how to add the SearchBar Widget on top of TabBar. I was tried but the result just getting blank page. Thanks!
Solution
You can extend PreferredSize for bottom that child will be Column,
bottom: PreferredSize(
child: Column(
mainAxisSize: MainAxisSize.min,
children: const [
CupertinoSearchTextField(),
TabBar(
tabs: <Widget>[
//...
],
),
],
),
preferredSize: const Size.fromHeight(
kToolbarHeight * 1.5), //based on searchBar height
),