Flutter自定义下划线Tab指示器插件custom_underline_tab_indicator的使用

Flutter自定义下划线Tab指示器插件custom_underline_tab_indicator的使用

要使用此插件，只需像这样使用CustomUnderlineTabIndicator：

TabBar(
  isScrollable: true,
  labelColor: AppColors.textWhite,
  unselectedLabelColor: AppColors.textWhite.withOpacity(0.4),
  indicatorColor: AppColors.textWhite,
  indicatorWeight: 2.0,
  indicator: const CustomUnderlineTabIndicator(
    gradient: LinearGradient(
      colors: [
        Color(0xff292828),
        Color(0xff373737),
        Color(0xff404040),
        Color(0xffAAAAAA),
        Color(0xff404040),
        Color(0xff373737),
        Color(0xff292828),
      ],
    ),
  ),
  tabs: const [
    Tab(
      text: "Rewards",
    ),
    Tab(
      text: "Offers",
    ),
  ],
)

完整示例Demo

以下是一个完整的示例，展示了如何在Flutter应用中使用CustomUnderlineTabIndicator。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: Text('自定义下划线Tab指示器'),
            bottom: PreferredSize(
              preferredSize: Size.fromHeight(48.0),
              child: Container(
                color: Colors.grey[800],
                child: const TabBar(
                  isScrollable: true,
                  labelColor: Colors.white,
                  unselectedLabelColor: Colors.grey,
                  indicatorColor: Colors.white,
                  indicatorWeight: 2.0,
                  indicator: CustomUnderlineTabIndicator(
                    gradient: LinearGradient(
                      colors: [
                        Color(0xff292828),
                        Color(0xff373737),
                        Color(0xff404040),
                        Color(0xffAAAAAA),
                        Color(0xff404040),
                        Color(0xff373737),
                        Color(0xff292828),
                      ],
                    ),
                  ),
                  tabs: [
                    Tab(text: "奖励"),
                    Tab(text: "优惠"),
                  ],
                ),
              ),
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text("这是奖励页面")),
              Center(child: Text("这是优惠页面")),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter自定义下划线Tab指示器插件custom_underline_tab_indicator的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义下划线Tab指示器插件custom_underline_tab_indicator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，如果你想自定义 TabBar 的下划线指示器，可以使用 custom_underline_tab_indicator 插件。这个插件允许你自定义下划线的样式，比如颜色、高度、宽度、边距等。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 custom_underline_tab_indicator 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  custom_underline_tab_indicator: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

使用插件

在代码中，你可以通过 CustomUnderlineTabIndicator 来自定义 TabBar 的下划线指示器。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Underline Tab Indicator Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Underline Tab Indicator'),
        bottom: TabBar(
          controller: _tabController,
          indicator: CustomUnderlineTabIndicator(
            borderSide: BorderSide(
              width: 3.0,
              color: Colors.red,
            ),
            insets: EdgeInsets.only(bottom: 10.0),
          ),
          tabs: [
            Tab(text: 'Tab 1'),
            Tab(text: 'Tab 2'),
            Tab(text: 'Tab 3'),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          Center(child: Text('Content of Tab 1')),
          Center(child: Text('Content of Tab 2')),
          Center(child: Text('Content of Tab 3')),
        ],
      ),
    );
  }
}

参数说明

CustomUnderlineTabIndicator 提供了以下参数来定制下划线指示器：

  • borderSide: 定义下划线的样式，比如颜色、宽度等。
  • insets: 定义下划线与 Tab 的间距，可以通过 EdgeInsets 来设置上下左右的边距。
  • width: 定义下划线的宽度，如果不设置，默认与 Tab 的宽度相同。

自定义示例

你可以根据需要调整这些参数来自定义下划线指示器的样式。例如，你可以将下划线的颜色改为蓝色，宽度改为 2.0，并且增加下划线与 Tab 的间距：

indicator: CustomUnderlineTabIndicator(
  borderSide: BorderSide(
    width: 2.0,
    color: Colors.blue,
  ),
  insets: EdgeInsets.only(bottom: 15.0),
),
回到顶部