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

我是Flutter新手，对各类组件的交互逻辑了解有限。已查阅并尝试多个教程，但无法将自定义Tab指示器集成到现有代码中实现预期效果。

效果对比：

• 当前视图：
• 目标视图：

如图所示，需要为最顶部的TabBar创建自定义指示器，恳请帮助！

HomePage代码 #

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

Plans Tab代码 #

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>[
            Container(
              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如何制作自定义TabBar？
• 如何在Flutter中实现自定义形状的TabBar指示器？
• 如何在Flutter中自定义TabBar指示器样式？
• Flutter自定义TabBar指示器教程

内容的提问来源于stack exchange，提问作者Lia