如何在颤动中创建圆形标签栏？

Question

I would like to create this tab bar.

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.

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() => _AppTabBarState();
}

class _AppTabBarState extends State<AppTabBar> {
  @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',
          ),
        ],
      ),
    );
  }
}

but this is how it looks

Answer 1

You should round only bottoms both sides(right, left) and round the tabs.

 @override
  Widget build(BuildContext context) {
    return Container(
      height: 40,
      decoration: BoxDecoration(
        borderRadius:  BorderRadius.only(
          bottomLeft: Radius.circular(10.0),
          bottomRight: Radius.circular(10.0),
        ),
        border: Border.all(
          color:  Color.fromRGBO(27, 189, 198, 1),
        ),
      ),
      child: ClipRRect(
        borderRadius:  BorderRadius.only(
          bottomLeft: Radius.circular(10.0),
          bottomRight: Radius.circular(10.0),
        ),
        child: TabBar(
          controller: 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',
            ),
          ],
        ),
      ),
    );
  }