I tried different options but unable to add the shadow like in the image:
TabBar(
indicatorColor: Colors.transparent,
indicatorSize: TabBarIndicatorSize.tab,
unselectedLabelColor: inActiveColor,
// Using BoxDecoration there is PADDING issue in Tabs
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: hexToColor(primaryColorDark),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 10,
blurRadius: 10,
offset: Offset(0, 10), // changes position of shadow
),
],
),
tabs: <Tab>[
Tab(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.create,
size: 20,
),
Text(' ' + 'Form'),
],
),
),
Tab(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.remove_red_eye,
size: 20,
),
Text(' ' + 'Preview'),
],
),
),
],
),
The best and easy solution, Just wrap the TabBar with Container with fix height like:
Container(
height: 35,
child: TabBar(
indicatorColor: Colors.transparent,
indicatorSize: TabBarIndicatorSize.tab,
unselectedLabelColor: inActiveColor,
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.blueAccent,
boxShadow: [
BoxShadow(
color: Colors.blueAccent.withOpacity(0.3),
blurRadius: 25,
offset: Offset(0, 20), // changes position of shadow
),
],
),
tabs: <Tab>[
Tab(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.create,
size: 20,
),
Text(' ' + 'Form'),
],
),
),
Tab(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.remove_red_eye,
size: 20,
),
Text(' ' + 'Preview'),
],
),
),
],
),
)