Rounded Tab Bar in Flutter

Question

I am new to flutter and creating a project where the design contains rounded top navigation. In flutter we have tab bars. So I searched around but could not find the solution. There were solution for rounded tabs but not the tab bar as whole. Is it even possible or is there a work around it.

Answer 1

You can create custom tab bar using Container and Stack to positioned Container on top.

Something like this.

Container(
    width: MediaQuery.of(context).size.width,
    height: MediaQuery.of(context).size.height,
    child: Stack(
      children: <Widget>[
          Positioned(
             top: 0,
             child: Container(
                width: MediaQuery.of(context).size.width,
                height: 80,
                decoration: BoxDecoration(
                   color: Colors.blue,
                   borderRadius: BorderRadius.all(Radius.circular(25.0))
              ),
              child: Row(
                children: <Widget>[
                  //icons buttons
                ],
               ),
             ),
           )            
       ],
    )
  ),