Flutter渐变指示器TabBar插件tabbar_gradient_indicator_plus的使用

Flutter渐变指示器TabBar插件tabbar_gradient_indicator_plus的使用

tabbar_gradient_indicator_plus 是一个用于 Flutter 的自定义渐变指示器 TabBar 插件，支持 iOS 和 Android 平台。

截图

更新内容

  1. 支持设置渐变方向。
  2. 支持设置指示器的圆角半径。
  3. 支持设置固定宽度的指示器。

开始使用

步骤 1: 添加依赖

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  tabbar_gradient_indicator_plus: ^1.0.0

步骤 2: 导入库

在你的 Dart 文件中导入库：

import 'package:tabbar_gradient_indicator_plus/tabbar_gradient_indicator_plus.dart';

步骤 3: 设置指示器

将 indicator 属性设置为 TabBarGradientIndicator，并传入所需的参数。例如：

TabBar(
  indicator: TabBarGradientIndicator(
    gradientColor: [Color(0xff579CFA), Color(0xff2FDEE7)], // 渐变颜色
    indicatorWidth: 2, // 指示器宽度
  ),
)

完整示例代码

以下是一个完整的示例代码，展示了如何使用 tabbar_gradient_indicator_plus 插件来创建一个带有渐变指示器的 TabBar。

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    List<String> list = ["标题 - 1 - 1", "标题 - 1 - 2"];

    return DefaultTabController(
      length: list.length,
      child: MaterialApp(
        home: Builder(
          builder: (context) => Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.white,
              elevation: 0,
              title: const Text("渐变指示器 TabBar"),
              bottom: PreferredSize(
                preferredSize: const Size(double.infinity, 40),
                child: TabBar(
                  enableFeedback: true,
                  tabs: list.map((e) => Tab(text: e)).toList(),
                  labelColor: Colors.black,
                  indicator: const TabBarGradientIndicator(
                      gradientColor: [Color(0xff579CFA), Color(0xff2FDEE7)],
                      indicatorWidth: 4),
                  indicatorSize: TabBarIndicatorSize.label,
                  isScrollable: true,
                ),
              ),
            ),
            body: TabBarView(
              children: list.map((e) {
                return Center(child: Text(e));
              }).toList(),
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter渐变指示器TabBar插件tabbar_gradient_indicator_plus的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter渐变指示器TabBar插件tabbar_gradient_indicator_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


tabbar_gradient_indicator_plus 是一个用于 Flutter 的自定义 TabBar 插件，它允许你在 TabBar 的指示器上应用渐变效果。这个插件可以帮助你创建更美观的 TabBar 界面。以下是使用 tabbar_gradient_indicator_plus 插件的基本步骤。

1. 添加依赖

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

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

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

2. 导入包

在你的 Dart 文件中导入 tabbar_gradient_indicator_plus：

import 'package:tabbar_gradient_indicator_plus/tabbar_gradient_indicator_plus.dart';

3. 创建 TabBar

你可以像使用普通的 TabBar 一样使用 TabBarGradientIndicatorPlus。以下是一个简单的示例：

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

class MyTabBar extends StatefulWidget {
  @override
  _MyTabBarState createState() => _MyTabBarState();
}

class _MyTabBarState extends State<MyTabBar> with SingleTickerProviderStateMixin {
  late 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('Gradient TabBar Example'),
        bottom: TabBar(
          controller: _tabController,
          indicator: GradientIndicator(
            gradient: LinearGradient(
              colors: [Colors.red, Colors.blue],
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
            ),
          ),
          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')),
        ],
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: MyTabBar(),
  ));
}

4. 自定义渐变效果

你可以通过调整 GradientIndicator 的 gradient 属性来自定义渐变色。例如：

indicator: GradientIndicator(
  gradient: LinearGradient(
    colors: [Colors.purple, Colors.orange],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
),
回到顶部