title: TabBar indicator custom shape
body: <p>I tried to create <code>TabBar</code> indicator according to this shape. </p>
  
  <p><a href="https://i.stack.imgur.com/IMlpk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IMlpk.png" alt="enter image description here"></a></p>
  
  <p>My current code looks like this</p>
  
  <pre class="lang-dart prettyprint-override"><code>TabBar(
    isScrollable: true,
    controller: _tabController,
    tabs: _tabList,
    labelColor: Colors.black,
    labelStyle: _generalTitleStyle,
    // indicatorColor: Colors.black,
    indicatorSize: TabBarIndicatorSize.tab,
    indicatorWeight: 4.0,
    indicatorPadding: EdgeInsets.symmetric(horizontal: 8.0),
    indicator: ShapeDecoration(
      shape: UnderlineInputBorder(
        borderSide: BorderSide(width: 8.0),
        borderRadius: BorderRadius.only(
          topLeft: Radius.elliptical(50, 360),
          topRight: Radius.elliptical(50, 360),
        ),
      ),
    ),
  ),
  </code></pre>
  
  <p>Which resulting it to be like this</p>
  
  <p><a href="https://i.stack.imgur.com/oCOrx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oCOrx.png" alt=""></a></p>
  
  <p>But when I changed the <code>borderRadius</code> bits to </p>
  
  <pre class="lang-dart prettyprint-override"><code>borderRadius: BorderRadius.only(
    bottomLeft: Radius.elliptical(50, 360),
    bottomRight: Radius.elliptical(50, 360),
  ),
  </code></pre>
  
  <p>It's actually work, but not in the form that I wanted</p>
  
  <p><a href="https://i.stack.imgur.com/CSjgR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CSjgR.png" alt="enter image description here"></a></p>
  
  <p>How do I actually make it so it will shape like the image on top?</p>
  
  <p>Thanks!</p>