I have some troubles with the TabBar design in Flutter. One small step is missing to reach my design goal.
Currently I have the following design with curved top left and top right corner: Current state
But I would like to have additional outside curves at bottom left and bottom right corner: Target state
In the following you can find my code:
final List<Tab> _tabs = [
Tab(child: Container(width: 40,child: Icon(Icons.info_outline_rounded))),
Tab(child: Container(width: displayWidth/2-70, alignment: Alignment.center, child: Text("Ich bin", style: TextStyle(fontSize: 17)))),
Tab(child: Container(width: displayWidth/2-70, alignment: Alignment.center, child: Text("Ich suche", style: TextStyle(fontSize: 17)))),
];
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(0),
child: Column(
children: [
Container(
padding: EdgeInsets.only(
top: 5,
right: 20,
left: 20,
),
height: 40,
decoration: BoxDecoration(
color: colorone,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(0),
topRight: Radius.circular(0)
)
),
child: TabBar(
isScrollable: true,
controller: _tabController,
tabs: _tabs,
onTap:(value) {
currentProfilePage = value;
},
labelColor: colorone,
unselectedLabelColor: colorfive,
indicator: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15.0),
topRight: Radius.circular(15.0),
bottomLeft: Radius.circular(15.0),
),
color: colorthirty
),
indicatorSize: TabBarIndicatorSize.label,
labelPadding: EdgeInsets.symmetric(horizontal: 10.0),
)
), ```
I have no idea anymore how I can reach my target design.
Thank you very much!