How to make this tab bar in flutter - flutter

Question

How to make adjust the size of tabba rto 40 in flutter ,how to make 2 tabbar in one screen in flutter please any one colud help with this

Answer 1

Here is the code it might help you.
import 'package:flutter/material.dart';
class StackOverFlowUI extends StatefulWidget {
#override
State<StackOverFlowUI> createState() => _StackOverFlowUIState();
}
class _StackOverFlowUIState extends State<StackOverFlowUI>
with SingleTickerProviderStateMixin {
late TabController _tabController;
#override
void initState() {
_tabController = TabController(length: 3, vsync: this);
super.initState();
}
#override
void dispose() {
super.dispose();
_tabController.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
toolbarHeight: 200,
backgroundColor: Colors.transparent,
elevation: 0,
centerTitle: true,
flexibleSpace: Container(
padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 15),
height: 300,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.topLeft,
colors: [
Color(0xFFd1539d),
Color(0xFF36a4e2),
],
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(50),
bottomRight: Radius.circular(50),
),
),
child: Column(
children: [
Expanded(
child: Center(
child: RichText(
text: const TextSpan(
children: [
WidgetSpan(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 2.0),
child: Icon(
Icons.bookmark_border,
color: Colors.white,
size: 25,
),
),
),
TextSpan(
text: " Tik Save+",
style: TextStyle(
fontSize: 23,
),
),
],
),
),
)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Icon(
Icons.settings,
color: Colors.white,
),
Icon(
Icons.tiktok,
color: Colors.white,
),
],
)
],
),
),
),
body: DefaultTabController(
length: 3,
child: Scaffold(
bottomNavigationBar: bottomMenu(),
body: TabBarView(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Container(
height: 45,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(
10.0,
),
),
child: TabBar(
controller: _tabController,
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(
10.0,
),
color: Colors.grey[800],
),
labelColor: Colors.white,
unselectedLabelColor: Colors.black,
tabs: const [
Tab(
text: 'Videos',
),
Tab(
text: 'Collections',
),
Tab(
text: 'Users',
),
],
),
),
Expanded(
child: TabBarView(
controller: _tabController,
children: const [
Center(
child: Text(
'Videos',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w600,
),
),
),
Center(
child: Text(
'Collections',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w600,
),
),
),
Center(
child: Text(
'Users',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w600,
),
),
),
],
),
),
],
),
),
const Icon(Icons.directions_transit),
const Icon(Icons.directions_bike),
],
),
),
),
);
}
Widget bottomMenu() {
return Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.topLeft,
colors: [
Color(0xFFd1539d),
Color(0xFF36a4e2),
],
),
),
child: const TabBar(
labelColor: Colors.white,
unselectedLabelColor: Colors.white70,
indicatorSize: TabBarIndicatorSize.tab,
indicatorPadding: EdgeInsets.all(5.0),
indicatorColor: Colors.black,
tabs: [
Tab(
text: "Home",
icon: Icon(Icons.home_outlined),
),
Tab(
text: "Pro",
icon: Icon(Icons.workspace_premium),
),
Tab(
text: "More",
icon: Icon(Icons.more_rounded),
),
],
),
);
}
}