Widget build(BuildContext context) {
return SafeArea(
child: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: const Text(
'My Merchants',
style: TextStyle(
color: Colors.black,
fontSize: 22,
fontWeight: FontWeight.w600,
fontFamily: '.SF UI Text'),
),
actions: [
TextButton(
onPressed: () {},
child: const Text(
'Invite',
style: TextStyle(fontSize: 18),
))
],
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
// give the tab bar a height [can change hheight to preferred height]
Container(
height: 50,
decoration: BoxDecoration(
gradient: const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0XFFD1E5D2),
Color(0XFFD2FBD4),
Color(0XFFD2FBD4),
Color(0XFFD2FCD4),
]),
color: Colors.grey[300],
borderRadius: BorderRadius.circular(
10.0,
),
),
child: TabBar(
dividerColor: Colors.white,
padding: const EdgeInsets.all(0),
// give the indicator a decoration (color and border radius)
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(
10,
),
color: Colors.green,
),
labelColor: Colors.white,
unselectedLabelColor: Colors.black,
tabAlignment: TabAlignment.fill,
indicatorSize: TabBarIndicatorSize.tab,
tabs: const [
// first tab [you can add an icon using the icon property]
Text(
'Merchants',
style: TextStyle(),
),
// second tab [you can add an icon using the icon property]
Tab(
text: 'Merchnats Invitations',
),
Tab(
text: 'My Inviations',
),
],
),
),
// tab bar view here
const Expanded(
child: TabBarView(
children: [
// first tab bar view widget
Center(
child: Text(
'Merchants',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w600,
),
),
),
// second tab bar view widget
Center(
child: Text(
'Merchnats Invitations',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w600,
),
),
),
Center(
child: Text(
'My Inviations',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w600,
),
),
),
],
),
),
],
),
),
)));
Tab bar with buttons as selected and unselected
2
Answers
The solution below using custom tab
No way than you have to custom your own tab
You can refer to this example below
Listen to tab body change to update UI tab header, and vice versa, handle click header to switch tab body
I’m using StreamBuilder instead of setState to rebuild only the necessary widgets