如何在Flutter中实现指定的自定义Tab指示器？

Question

这里是新的 Flutter 编码器，所以我现有的关于各种组件如何交互的知识是有限的。我已经阅读/尝试了各种教程（包括此处发布的一些教程），但在使用现有代码实现以达到所需结果时遇到困难。

我现有的代码显示以下内容：

我想要实现的目标如下：

如图所示，我想为最顶部的 TabBar 创建一个自定义指示器。任何帮助将不胜感激。谢谢！

首页代码：

import 'package:fallout/plans.dart';
import 'package:fallout/recipes.dart';
import 'package:flutter/material.dart';
import 'package:flutter_glow/flutter_glow.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});
  @override
  _HomePageState createState() => _HomePageState();
}

const myColor = Color(0xFFF8EA00);

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 5,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.black,
          title: const Center(
            child: TabBar(
              indicatorColor: Colors.black,
              indicatorWeight: 2,
              dividerColor: myColor,
              isScrollable: true,
              tabs: <Widget>[
                Tab(
                  child: GlowText(
                    blurRadius: 3,
                    'HOME',
                    style: TextStyle(color: myColor, fontSize: 18.0),
                  ),
                ),
                Tab(
                  child: GlowText(
                    blurRadius: 3,
                    'PLANS',
                    style: TextStyle(color: myColor, fontSize: 18.0),
                  ),
                ),
                Tab(
                  child: GlowText(
                    blurRadius: 3,
                    'RECIPES',
                    style: TextStyle(color: myColor, fontSize: 18.0),
                  ),
                ),
                Tab(
                  child: GlowText(
                    blurRadius: 3,
                    'CREATURES',
                    style: TextStyle(color: myColor, fontSize: 18.0),
                  ),
                ),
                Tab(
                  child: GlowText(
                    blurRadius: 3,
                    'PLANTS',
                    style: TextStyle(color: myColor, fontSize: 18.0),
                  ),
                ),
              ],
            ),
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            const Text('Home'),
            PlansTabs(0xffff5722),
            RecipesTabs(0xffff5722),
            const Text('Creatures'),
            const Text('Plants'),
          ],
        ),
      ),
    );
  }
}

计划选项卡代码：

import 'package:flutter/material.dart';
import 'package:flutter_glow/flutter_glow.dart';

class PlansTabs extends StatefulWidget {
  PlansTabs(this.colorVal);
  int colorVal;

  _PlansTabsState createState() => _PlansTabsState();
}

class _PlansTabsState extends State<PlansTabs>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(vsync: this, length: 4);
    _tabController.addListener(_handleTabSelection);
  }

  void _handleTabSelection() {
    setState(() {
      widget.colorVal = 0xffff5722;
    });
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.black,
          toolbarHeight: double.minPositive,
          bottom: TabBar(
            controller: _tabController,
            isScrollable: true,
            indicatorColor: Color(0xFFF8EA00),
            indicatorWeight: 1,
            dividerColor: Colors.black,
            tabs: const <Widget>[
              Tab(
                child: GlowText(
                  blurRadius: 3,
                  'ARMOR',
                  style: TextStyle(color: Color(0xFFF8EA00), fontSize: 18.0),
                ),
              ),
              Tab(
                child: GlowText(
                  blurRadius: 3,
                  'C.A.M.P.',
                  style: TextStyle(color: Color(0xFFF8EA00), fontSize: 18.0),
                ),
              ),
              Tab(
                child: GlowText(
                  blurRadius: 3,
                  'MODS',
                  style: TextStyle(color: Color(0xFFF8EA00), fontSize: 18.0),
                ),
              ),
              Tab(
                child: GlowText(
                  blurRadius: 3,
                  'WEAPONS',
                  style: TextStyle(color: Color(0xFFF8EA00), fontSize: 18.0),
                ),
              ),
            ],
          ),
        ),
        body: TabBarView(
          controller: _tabController,
          children: <Widget>[
            //PlansTabs(0xffff5722),
            Container(1
              height: 200.0,
              child: Center(child: Text('Armor Text')),
            ),
            Container(
              height: 200.0,
              child: Center(child: Text('C.A.M.P. Text')),
            ),
            Container(
              height: 200.0,
              child: Center(child: Text('Mods Text')),
            ),
            Container(
              height: 200.0,
              child: Center(child: Text('Weapons Text')),
            ),
          ],
        ),
      ),
    );
  }
}

我尝试引用以下解决方案，但似乎无法将其与我的代码正确集成：

• Flutter 如何制作自定义Tab Bar？
• 如何在flutter中实现自定义形状标签栏指示器
• 如何自定义TabBar指示器设计Flutter
• https://medium.com/swlh/flutter-custom-tab-indicator-for-tabbar-d72bbc6c9d0c

Answer 1

我认为在 Flutter 内置

TabBar

小部件中不可能实现所需的样式。您必须制作自己的自定义 TabBar 小部件。我之前尝试过很多方法来设置标签栏的样式。希望您能从中得到提示。

class CustomTabBar extends StatelessWidget implements PreferredSizeWidget {
  final List<String> tabTitles;
  final TabController controller;

  const CustomTabBar(
      {super.key, required this.tabTitles, required this.controller});

  @override
  Size get preferredSize => const Size.fromHeight(52);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: preferredSize.height,
      child: TabBar(
        indicatorSize: TabBarIndicatorSize.label,
        indicatorPadding: const EdgeInsets.only(right: -24, left: -24),
        indicator: const BoxDecoration(
          border: Border(
            top: BorderSide(color: Color(0xFFF8EA00), width: 2),
            right: BorderSide(color: Color(0xFFF8EA00), width: 2),
            left: BorderSide(color: Color(0xFFF8EA00), width: 2),
            bottom: BorderSide(color: Colors.black, width: 4),
          ),
        ),
        // indicatorColor: Colors.black,
        controller: controller,
        tabs: [
          for (int i = 0; i < tabTitles.length; i++)
            Tab(
              child: Text(
                tabTitles[i],
                maxLines: null,
                overflow: TextOverflow.ellipsis,
                textAlign: TextAlign.center,
                style: const TextStyle(color: Colors.white),
              ),
            ),
        ],
      ),
    );
  }
}