DartPad -如何为切换标签时移动的TabBar创建自定义指示器-我有一个Flutter示例

基础概念

DartPad 是一个在线的 Dart 和 Flutter 编辑器，允许开发者快速编写、运行和分享 Dart 和 Flutter 代码。Flutter 是 Google 开发的一个 UI 工具包，用于构建跨平台的应用程序。

TabBar 是 Flutter 中的一个小部件，用于在应用程序的顶部或底部显示标签页。自定义指示器是指在标签页切换时，显示一个自定义的视觉指示器，以增强用户体验。

类型

自定义指示器可以通过多种方式实现，包括但不限于：

简单指示器：如简单的线条或点。
动画指示器：如滑动动画或渐变动画。
复杂指示器：如自定义形状或带有文本的指示器。

应用场景

自定义指示器适用于需要突出显示当前标签页的应用，例如：

导航应用中的不同页面。
社交媒体应用中的不同功能模块。
设置应用中的不同选项卡。

示例代码

以下是一个简单的 Flutter 示例，展示如何为 TabBar 创建一个自定义指示器：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
              indicator: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(5.0),
              ),
              indicatorSize: IndicatorSize.tab,
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('Cars')),
              Center(child: Text('Transit')),
              Center(child: Text('Bikes')),
            ],
          ),
        ),
      ),
    );
  }
}