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

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