Flutter多彩标签页插件flutter_colorful

Flutter多彩标签页插件flutter_colorful_tab的使用

在Flutter应用中，flutter_colorful_tab 是一个非常实用的插件，可以让你轻松创建具有多种颜色的标签栏。每个标签都有不同的颜色，这使得你的应用界面更加丰富多彩。

演示

开始使用

首先，在项目的 pubspec.yaml 文件中添加 flutter_colorful_tab 依赖：

dependencies:
  flutter_colorful_tab: {current_version}

然后，导入库文件：

import 'package:flutter_colorful_tab/flutter_colorful_tab.dart';

接下来，你可以像这样使用 ColorfulTabBar 组件：

ColorfulTabBar(
  tabs: [
    TabItem(color: Colors.red, title: Text('Home')),
    TabItem(color: Colors.green, title: Text('Favorite')),
    TabItem(color: Colors.orange, title: Text('Search')),
    TabItem(color: Colors.green, title: Text('Settings')),
  ],
  controller: _tabController,
)

TabItem 的所有可用参数如下：

TabItem(
  color: Colors.orange,
  unselectedColor: Colors.orange.shade600,
  title: const Text('Search'),
  labelColor: Colors.black,
  unselectedLabelColor: Colors.yellow,
  labelStyle: const TextStyle(fontWeight: FontWeight.bold),
  unselectedLabelStyle: const TextStyle(fontWeight: FontWeight.normal),
)

完整示例

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

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Colorful Tab Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(title: 'Colorful Tab Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

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

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

  [@override](/user/override)
  void initState() {
    _tabController = TabController(vsync: this, length: 5);
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  Widget _pageView(int index) {
    return ListView.builder(
      itemCount: 30,
      itemBuilder: (context, i) => Card(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Center(child: Text('Tab ${index + 1} - item no $i')),
        ),
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ColorfulTabBar(
              tabs: [
                TabItem(
                    title: const Row(children: [
                      Icon(Icons.home_outlined),
                      SizedBox(width: 8),
                      Text('Home')
                    ]),
                    color: Colors.red.shade600),
                TabItem(
                    title: const Row(children: [
                      Icon(Icons.favorite_outline),
                      SizedBox(width: 8),
                      Text('Favorite')
                    ]),
                    color: Colors.orange.shade600),
                TabItem(
                    title: const Row(children: [
                      Icon(Icons.search_outlined),
                      SizedBox(width: 8),
                      Text('Search')
                    ]),
                    color: Colors.lime.shade600),
                TabItem(
                    title: const Row(children: [
                      Icon(Icons.settings_outlined),
                      SizedBox(width: 8),
                      Text('Settings')
                    ]),
                    color: Colors.blue.shade600),
                TabItem(
                    title: const Row(children: [
                      Icon(Icons.devices_other_outlined),
                      SizedBox(width: 8),
                      Text('Others')
                    ]),
                    color: Colors.purple.shade600),
              ],
              controller: _tabController,
            ),
            ColorfulTabBar(
              indicatorHeight: 6,
              verticalTabPadding: 0.0,
              labelStyle:
                  const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              selectedHeight: 48,
              unselectedHeight: 40,
              tabs: [
                TabItem(
                  color: Colors.red,
                  title: const Text('Tab 1 - Home'),
                  labelColor: Colors.black,
                  unselectedLabelColor: Colors.yellow.shade600,
                ),
                TabItem(
                    color: Colors.green, title: const Text('Tab 2 - Favorite')),
                TabItem(
                  color: Colors.orange,
                  title: const Text('Tab 3 - Search'),
                  labelColor: Colors.black,
                  unselectedLabelColor: Colors.yellow.shade600,
                  labelStyle: const TextStyle(
                      fontSize: 20, fontWeight: FontWeight.bold),
                  unselectedLabelStyle: const TextStyle(
                      fontSize: 20, fontWeight: FontWeight.normal),
                ),
                TabItem(
                    color: Colors.blue, title: const Text('Tab 4 - Settings')),
                TabItem(
                    color: Colors.purple, title: const Text('Tab 5 - Others')),
              ],
              controller: _tabController,
            ),
            ColorfulTabBar(
              selectedHeight: 64,
              unselectedHeight: 48,
              tabs: [
                TabItem(
                    title: const Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Icon(Icons.home_outlined),
                          SizedBox(width: 8),
                          Text('Home')
                        ]),
                    color: Colors.red.shade600),
                TabItem(
                    title: const Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Icon(Icons.favorite_outline),
                          SizedBox(width: 8),
                          Text('Favorite')
                        ]),
                    color: Colors.red.shade600),
                TabItem(
                    title: const Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Icon(Icons.search_outlined),
                          SizedBox(width: 8),
                          Text('Search')
                        ]),
                    color: Colors.lime.shade600),
                TabItem(
                    title: const Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Icon(Icons.settings_outlined),
                          SizedBox(width: 8),
                          Text('Settings')
                        ]),
                    color: Colors.blue.shade600),
                TabItem(
                    title: const Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Icon(Icons.devices_other_outlined),
                          SizedBox(width: 8),
                          Text('Others')
                        ]),
                    color: Colors.purple.shade600),
              ],
              controller: _tabController,
            ),
            ColorfulTabBar(
              alignment: TabAxisAlignment.start,
              tabs: [
                TabItem(
                    title: const Icon(Icons.home_outlined),
                    color: Colors.red.shade600),
                TabItem(
                    title: const Icon(Icons.favorite_outline),
                    color: Colors.orange.shade600),
                TabItem(
                    title: const Icon(Icons.search_outlined),
                    color: Colors.lime.shade600),
                TabItem(
                    title: const Icon(Icons.settings_outlined),
                    color: Colors.blue.shade600),
                TabItem(
                    title: const Icon(Icons.devices_other_outlined),
                    color: Colors.purple.shade600),
              ],
              controller: _tabController,
            ),
            ColorfulTabBar(
              alignment: TabAxisAlignment.end,
              labelColor: Colors.white,
              unselectedLabelColor: Colors.white30,
              tabs: [
                TabItem(
                    title: const Icon(Icons.home_outlined),
                    color: Colors.blue.shade600,
                    unselectedColor: Colors.blue.shade400),
                TabItem(
                    title: const Icon(Icons.favorite_outline),
                    color: Colors.blue.shade600,
                    unselectedColor: Colors.blue.shade300),
                TabItem(
                    title: const Icon(Icons.search_outlined),
                    color: Colors.blue.shade600,
                    unselectedColor: Colors.blue.shade300),
                TabItem(
                    title: const Icon(Icons.settings_outlined),
                    color: Colors.blue.shade600,
                    unselectedColor: Colors.blue.shade300),
                TabItem(
                    title: const Icon(Icons.devices_other_outlined),
                    color: Colors.blue.shade600,
                    unselectedColor: Colors.blue.shade300),
              ],
              controller: _tabController,
            ),
            Expanded(
              child: TabBarView(
                  controller: _tabController,
                  children: List.generate(5, (index) => _pageView(index))),
            ),
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

更多关于Flutter多彩标签页插件flutter_colorful_tab的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

zlyuanteng 1楼

更多关于Flutter多彩标签页插件flutter_colorful_tab的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用flutter_colorful_tab插件的一个示例代码案例。flutter_colorful_tab是一个用于创建多彩标签页的Flutter插件，它可以让你的应用界面更加生动和吸引人。

首先，确保你已经在pubspec.yaml文件中添加了flutter_colorful_tab依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_colorful_tab: ^最新版本号  # 请替换为实际可用的最新版本号

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

接下来，你可以在你的Flutter项目中按照以下方式使用flutter_colorful_tab：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> 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('Flutter Colorful Tab Example'),
        bottom: ColorfulTabBar(
          controller: _tabController,
          tabs: [
            Tab(icon: Icon(Icons.directions_car), text: 'Tab 1'),
            Tab(icon: Icon(Icons.directions_transit), text: 'Tab 2'),
            Tab(icon: Icon(Icons.directions_bike), text: 'Tab 3'),
          ],
          indicatorColor: Colors.blue,
          indicatorSize: TabBarIndicatorSize.label,
          labelColor: Colors.blue,
          unselectedLabelColor: Colors.grey,
        ),
      ),
      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')),
        ],
      ),
    );
  }
}

在这个示例中：

我们导入了flutter_colorful_tab包。
创建了一个简单的Flutter应用，其中包含一个带有三个标签页的底部导航栏。
使用ColorfulTabBar替换了标准的TabBar，以便使用多彩标签页。
配置了ColorfulTabBar的一些属性，如indicatorColor、indicatorSize、labelColor和unselectedLabelColor，以自定义标签的外观。
使用TabBarView来显示与每个标签页相关联的内容。

请确保你已经按照插件的文档正确安装了所有依赖，并根据需要调整代码以适应你的具体需求。