要获得最好的解释和示例，请查看Flutter官方手册，了解如何使用选项卡和选项卡控制器。
https://docs.flutter.dev/cookbook/design/tabs

使用此页

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin{

  late TabController controller;

  @override
  void initState() {
    controller = TabController(
      initialIndex: 0,
      length: 2,
      vsync: this,
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.teal,
        ),
        body: Column(
          children: [
            TabBar(
              controller: controller,
              isScrollable: true,
              labelColor: Colors.white,
              unselectedLabelColor: Colors.grey,
              splashBorderRadius: BorderRadius.circular(50),
              padding: const EdgeInsets.all(8),
              labelStyle: const TextStyle(fontSize: 16,fontWeight: FontWeight.bold),
              indicator: const BoxDecoration(
                color: Colors.teal,
                borderRadius: BorderRadius.all(Radius.circular(50)),
              ),
              tabs: const [
                SizedBox(
                  width: 100,
                  child: Tab(
                    text: "Gainer",
                  ),
                ),
                SizedBox(
                  width: 100,
                  child: Tab(
                    text: "Loser",
                  ),
                ),
              ],
            ),
            Expanded(
              child: TabBarView(
                controller: controller,
                children: const[
                  Center(
                    child: Text("Gainer"),
                  ),
                  Center(
                    child: Text("Loser"),
                  ),
                ],
              ),
            ),
          ],
        ));
  }
}