Flutter outside curved TabBar

43 views Asked by At

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!
0

There are 0 answers