Flutter自定义Tab指示器插件md2_tab_indicator的使用

Flutter自定义Tab指示器插件md2_tab_indicator的使用

md2_tab_indicator / MD2 Tab Indicator

MD2TabIndicator 是一个受 Google Material Design 2 风格标签指示器启发并由 westdabestdb 开发的标签指示器插件。

示例图

动画演示

Getting Started

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

dependencies:
  md2_tab_indicator: ^1.0.2

然后在 Dart 代码中导入：

import 'package:md2_tab_indicator/md2_tab_indicator.dart';

Usage

以下是使用 MD2TabIndicator 的示例代码：

TabBar(
  labelStyle: TextStyle(
    fontWeight: FontWeight.w700, // 设置标签字体加粗
  ),
  indicatorSize: TabBarIndicatorSize.label, // 设置指示器大小与标签一致
  labelColor: Color(0xff1a73e8), // 设置选中标签颜色为蓝色
  unselectedLabelColor: Color(0xff5f6368), // 设置未选中标签颜色为灰色
  isScrollable: true, // 设置标签是否可以滚动
  indicator: MD2Indicator( // 自定义指示器
    indicatorHeight: 3, // 指示器高度
    indicatorColor: Color(0xff1a73e8), // 指示器颜色
    indicatorSize: MD2IndicatorSize.normal, // 指示器模式（tiny-normal-full）
  ),
  tabs: [
    Tab(text: "Home"), // 第一个标签
    Tab(text: "Personal info"), // 第二个标签
    Tab(text: "Data & personalization"), // 第三个标签
    Tab(text: "Security"), // 第四个标签
  ],
),

完整示例代码

以下是完整的示例代码，展示了如何使用 MD2TabIndicator：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'MD2 Tab Indicator Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4, // 设置 Tab 数量
      child: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text("MD2 Tab Indicator", style: TextStyle(color: Colors.black87)),
          backgroundColor: Colors.white,
          bottom: TabBar(
            labelStyle: TextStyle(fontWeight: FontWeight.w700),
            indicatorSize: TabBarIndicatorSize.label,
            labelColor: Color(0xff1967d2),
            unselectedLabelColor: Color(0xff5f6368),
            isScrollable: true,
            indicator: MD2Indicator(
              indicatorHeight: 3, // 指示器高度
              indicatorColor: Color(0xff1967d2), // 指示器颜色
            ),
            tabs: [
              Tab(text: "Home"),
              Tab(text: "Personal info"),
              Tab(text: "Data & personalization"),
              Tab(text: "Security"),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


md2_tab_indicator 是一个用于 Flutter 的自定义 Tab 指示器插件，它可以帮助你实现 Material Design 2 风格的 Tab 指示器。这个插件提供了多种自定义选项，可以让你轻松地调整 Tab 指示器的外观和行为。

安装

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

dependencies:
  flutter:
    sdk: flutter
  md2_tab_indicator: ^2.0.0

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

使用

以下是一个简单的示例，展示了如何使用 md2_tab_indicator 插件来创建一个带有自定义 Tab 指示器的 TabBar。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text('MD2 Tab Indicator Example'),
            bottom: TabBar(
              indicatorSize: TabBarIndicatorSize.label,
              indicator: MD2Indicator(
                indicatorHeight: 3,
                indicatorColor: Colors.blue,
                indicatorSize: MD2IndicatorSize.normal,
              ),
              tabs: [
                Tab(text: 'Tab 1'),
                Tab(text: 'Tab 2'),
                Tab(text: 'Tab 3'),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('Content of Tab 1')),
              Center(child: Text('Content of Tab 2')),
              Center(child: Text('Content of Tab 3')),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部