title: How create rounded Tab Bar in flutter?
body: <p>I would like to create this tab bar.
  <a href="https://i.stack.imgur.com/rwYMt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rwYMt.png" alt="enter image description here" /></a></p>
  <p>I try to rounded whole container, but I don't know how rounding indicator depending on the selected tab.
  This tab bar i have now.</p>
  <pre><code>import 'package:flutter/material.dart';
  
  class AppTabBar extends StatefulWidget {
    final TabController? tabController;
    const AppTabBar({Key? key, required this.tabController}) : super(key: key);
  
    @override
    _AppTabBarState createState() =&gt; _AppTabBarState();
  }
  
  class _AppTabBarState extends State&lt;AppTabBar&gt; {
    @override
    Widget build(BuildContext context) {
      return Container(
        height: 40,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.vertical(bottom: Radius.circular(10.0)),
            border: Border.all(color: Color.fromRGBO(27, 189, 198, 1))),
        child: TabBar(
          controller: widget.tabController,
          indicator: BoxDecoration(
            color: Color.fromRGBO(27, 189, 198, 1),
          ),
          labelColor: Color.fromRGBO(238, 248, 254, 1),
          unselectedLabelColor: Color.fromRGBO(238, 248, 254, 1),
          tabs: [
            Tab(
              text: 'first',
            ),
            Tab(
              text: 'second',
            ),
          ],
        ),
      );
    }
  }
  </code></pre>
  <p>but this is how it looks
  <a href="https://i.stack.imgur.com/NmpDx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NmpDx.png" alt="enter image description here" /></a></p>