如何在顫動中創建圓形標簽欄？

Question

我想創建這個標簽欄。

我嘗試對整個容器進行四舍五入，但我不知道如何根據所選選項卡對指示器進行四舍五入。 我現在擁有的這個標簽欄。

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',
          ),
        ],
      ),
    );
  }
}

但這就是它的樣子

Answer 1

您應該只將底部兩側（右側，左側）倒圓，並將標簽倒圓。

 @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',
            ),
          ],
        ),
      ),
    );
  }