Flutter自定义TabBar插件flexi_tab_bar的使用

Flexi Tab Bar

一个为Flutter应用程序设计的灵活且可定制的标签栏小部件。

概述

Flexi Tab Bar 为Flutter应用提供了多功能的标签栏解决方案，允许开发者轻松创建具有自定义样式和功能的标签界面。

特性

• 支持动态的标签标题和视图。
• 可以自定义标签栏装饰，包括高度、边距和文本样式。
• 平滑的标签切换动画，可以自定义动画持续时间。
• 简单易用的API，方便在Flutter应用中集成标签栏功能。

安装

要将Flexi Tab Bar集成到你的Flutter项目中，在pubspec.yaml文件中添加以下依赖：

dependencies:
  flexi_tab_bar: ^0.0.1

然后运行flutter pub get来获取该依赖。

使用

import 'package:flexi_tab_bar/flexi_tab_bar.dart';

// 示例使用
FlexiTabBar(
  flexiTabBarConfig: FlexiTabBarConfig(
    titles: ['Tab 1', 'Tab 2', 'Tab 3'], // 标签标题列表
    views: [Container(color:Colors.red), Container(color:Colors.yellow),Container(color:Colors.blue),], // 对应的视图
    initialPage: 0, // 初始页码
    pageController: PageController(), // 页面控制器
  ),
);

示例代码

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

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

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

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

  // 这个小部件是你的应用的根组件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 应用的主题
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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> {
  PageController tabBarController = PageController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: [
            FlexiTabBar(
              flexiTabBarConfig: FlexiTabBarConfig(
                titles: ["Tab1", "Tab2"], // 标签标题列表
                views: [
                  Container(
                    color: Colors.red,
                  ),
                  Container(
                    color: Colors.green,
                  ),
                ],
                initialPage: 0, // 初始页码
                pageController: tabBarController, // 页面控制器
              ),
            ),
          ],
        ),
      ),
    );
  }
}