如何创建如下图所示的标签栏？

目前我只能做到这样

class RecurringItemsAndInvoiceTabScreen extends HookWidget {
  final String id;

  final List<Widget> list = [
    Padding(
        padding: const EdgeInsets.all(10), child: Text("depositItems".tr())),
    Padding(
        padding: const EdgeInsets.all(10), child: Text("recurringItems".tr())),
    Padding(padding: const EdgeInsets.all(10), child: Text("invoice".tr())),
  ];

  RecurringItemsAndInvoiceTabScreen(this.id, {super.key});

  @override
  Widget build(BuildContext context) {
    final controller = useTabController(initialLength: list.length);
    final index = useState(0);

    controller.addListener(() {
      index.value = controller.index;
    });

    return DefaultTabController(
        length: list.length,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: AppTheme.light.colorScheme.primary,
            iconTheme: const IconThemeData(color: Colors.white),
            title: Text('viewTenancy'.tr(),
                style: const TextStyle(
                  color: Colors.white,
                )),
            bottom: TabBar(
              indicator: BoxDecoration(
                  borderRadius: BorderRadius.circular(50),
                  color: Colors.green.shade200),
              indicatorColor: AppTheme.light.colorScheme.primary,
              unselectedLabelColor: Colors.white,
              labelColor: Colors.green,
              isScrollable: false,
              onTap: (index) {},
              controller: controller,
              tabs: list,
            ),
            bottomOpacity: 1,
          ),
          body: TabBarView(
            controller: controller,
            children: [
             const Text("first page")
             const Text("second page")
             const Text("third page")
            ],
          ),
        ));
  }
}