How to implement custom tab in flutter - flutter

Question

I want something like this.
Im able to implement something similar with SwitchTab,but not able to use gradient color for selected tab.
Please help
SwitchTab(
text: const [ "Personal",
"Group",
],
selectedTextColor: Colors.black,
unselectedTextColor:Colors.white,
shape: SwitchTabShape.rounded,
thumbColor: Colors.white,
backgroundColour:
Color.fromARGB(255, 31, 89, 169),
onValueChanged: (index) {
setState(() {
selected = index;
});
},
),

Answer 1

You can use a combination of a normal TabBar, BoxDecoration and LinearGradient for this:
Code Example:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatefulWidget {
#override
MyWidgetState createState() => MyWidgetState();
}
class MyWidgetState extends State<MyWidget>
with SingleTickerProviderStateMixin {
late TabController _tabController;
#override
void initState() {
_tabController = TabController(length: 2, vsync: this);
super.initState();
}
#override
void dispose() {
super.dispose();
_tabController.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Stack Overflow Example'),
),
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
Container(
height: 45,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(
25.0,
),
),
child: TabBar(
controller: _tabController,
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(
25.0,
),
color: Colors.green,
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Colors.pink,
Colors.deepPurple,
],
),
),
labelColor: Colors.white,
unselectedLabelColor: Colors.black,
tabs: [
const Tab(text: 'Personal'),
const Tab(text: 'Group'),
],
),
),
Expanded(
child: TabBarView(
controller: _tabController,
children: [
Center(child: Text('Personal Content')),
Center(child: Text('Group Content')),
],
),
),
],
),
),
);
}
}