Customize flutter Tab bar - flutter

Question

I am using a TabBar widget and I'd like to customize the TabBar view like this image. I tried lot of times bus there are some spaces between two tabs.
this is the code I used to customize the tab view.
TabBar(
controller: _tabController,
labelColor: Colors.black12,
unselectedLabelColor: Colors.black12,
indicatorSize: TabBarIndicatorSize.label,
tabs: [
Tab(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.horizontal(
left: Radius.circular(50), right: Radius.zero),
border: _tabController.index == 1
? Border.all(color: Colors.black12, width: 2)
: Border.all(color: Colors.transparent, width: 2),
color: _tabController.index == 0
? Colors.indigo
: Colors.white,
),
child: Align(
alignment: Alignment.center,
child: Text("Income"),
),
),
),
Tab(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.horizontal(
left: Radius.zero, right: Radius.circular(50)),
border: _tabController.index == 1
? Border.all(color: Colors.transparent, width: 2)
: Border.all(color: Colors.black12, width: 2),
color: _tabController.index == 1
? Colors.indigo
: Colors.white,
),
child: Align(
alignment: Alignment.center,
child: Text("Expense"),
),
),
),
],
),
output

Answer 1

if you need to customize your tabs,my beautiful tabs source code may be help you,this is not relevent to this post
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class StudentScreen extends StatefulWidget {
#override
_StudentScreenState createState() => _StudentScreenState();
}
class _StudentScreenState extends State<StudentScreen> with SingleTickerProviderStateMixin {
TabController controller;
int activeTabIndex = 1;
#override
void initState() {
super.initState();
controller = TabController(
length: 2,
initialIndex: 1,
vsync: this,
);
controller.addListener(() {
setState(() {
activeTabIndex = controller.index;
});
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
children: <Widget>[
TabBar(
indicatorColor: Colors.transparent,
tabs: [
Tab(
child: Container(
width: 100,
height: 36,
decoration: activeTabIndex == 0
? BoxDecoration(
border: Border.all(color: Colors.blue, width: 2),
borderRadius: BorderRadius.all(Radius.circular(16)),
)
: null,
child: Padding(
padding: EdgeInsets.fromLTRB(8, 4, 8, 0),
child: Center(child: Text("Tab one", style: TextStyle(color: Colors.black))),
)),
),
Tab(
child: Container(
width: 100,
height: 36,
decoration: activeTabIndex == 1
? BoxDecoration(
border: Border.all(color: Colors.blue, width: 2),
borderRadius: BorderRadius.all(Radius.circular(16)),
)
: null,
child: Padding(
padding: EdgeInsets.fromLTRB(8, 4, 8, 0),
child: Center(child: Text("Tab two", style: TextStyle(color: Colors.black))),
)),
),
],
controller: controller,
),
Container(
child: Row(
children: <Widget>[],
),
),
Expanded(
child: Container(
child: TabBarView(
controller: controller,
children: <Widget>[
Center(child: Text("Tab one")),
Center(child: Text("Tab two")),
],
),
),
)
],
),
),
);
}
}

Answer 2

you can give radius to whole bottom not only the two tabs
you can do something like this
just give radius to all sides I need to give only top right and top left in my case
PreferredSize(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
child: TabBar(
// indicatorPadding: EdgeInsets.all(30),
tabs: [
Tab(
child: Text(
"Expnanse",
style: TextStyle(color: Colors.black),
),
),
Tab(
child: Text(
"Income",
style: TextStyle(color: Colors.black),
),
),
],
),
),
preferredSize: const Size.fromHeight(70.0),
),
),

Answer 3

You neee to add:
labelPadding: EdgeInsets.all(0),
to your TabBar!