Flutter自定义TabBar插件flashy_tab_bar的使用

Flutter自定义TabBar插件flashy_tab_bar的使用

flashy_tab_bar

GitHub license

另一个不错的动画TabBar（受Cuberto启发）

Preview

Android iOS

Getting Started

在 pubspec.yaml 中添加依赖：

dependencies:
  ...
  flashy_tab_bar: ^0.0.3

Basic Usage

bottomNavigationBar: FlashyTabBar(
     selectedIndex: _selectedIndex,
     showElevation: true,
     onItemSelected: (index) => setState(() {
       _selectedIndex = index;
     }),
     items: [
        FlashyTabBarItem(
          icon: Icon(Icons.event),
          title: Text('Events'),
        ),
        FlashyTabBarItem(
          icon: Icon(Icons.search),
          title: Text('Search'),
        ),
        FlashyTabBarItem(
          icon: Icon(Icons.highlight),
          title: Text('Highlights'),
        ),
        FlashyTabBarItem(
          icon: Icon(Icons.settings),
          title: Text('Settings'),
        ),
        FlashyTabBarItem(
          icon: Icon(Icons.settings),
          title: Text('한국어'),
        ),
      ],
),

完整示例代码

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

示例代码

import 'package:flutter/material.dart';

import 'package:flashy_tab_bar/flashy_tab_bar.dart'; // 导入插件

void main() => runApp(MyApp()); // 主函数

// 定义主应用类
class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState(); // 创建状态类
}

// 状态类
class _MyAppState extends State<MyApp> {

  int _selectedIndex = 0; // 当前选中的Tab索引

  [@override](/user/override)
  void initState() {
    super.initState(); // 初始化状态
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('FlashyTabBar 示例'), // 设置AppBar标题
        ),
        body: Center(
          child: Text('当前页面：$_selectedIndex'), // 显示当前选中的Tab索引
        ),
        bottomNavigationBar: FlashyTabBar( // 使用FlashyTabBar作为底部导航栏
          animationCurve: Curves.linear, // 动画曲线
          selectedIndex: _selectedIndex, // 当前选中的Tab索引
          showElevation: true, // 是否显示阴影
          onItemSelected: (index) => setState(() { // Tab切换时更新状态
            _selectedIndex = index;
          }),
          items: [ // 定义TabBar中的各个项
            FlashyTabBarItem(
              icon: Icon(Icons.event), // 图标
              title: Text('Events'), // 标题
            ),
            FlashyTabBarItem(
              icon: Icon(Icons.search),
              title: Text('Search'),
            ),
            FlashyTabBarItem(
              icon: Icon(Icons.highlight),
              title: Text('Highlights'),
            ),
            FlashyTabBarItem(
              icon: Icon(Icons.settings),
              title: Text('Settings'),
            ),
            FlashyTabBarItem(
              icon: Icon(Icons.settings),
              title: Text('한국어'),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


flashy_tab_bar 是一个用于 Flutter 的自定义 TabBar 插件，它提供了丰富的动画效果和自定义选项，可以帮助你创建更加动态和吸引人的底部导航栏。以下是如何在 Flutter 项目中使用 flashy_tab_bar 的步骤。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flashy_tab_bar: ^1.0.0  # 请检查最新版本

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

2. 导入包

在你的 Dart 文件中导入 flashy_tab_bar 包：

import 'package:flashy_tab_bar/flashy_tab_bar.dart';

3. 创建 TabBar

接下来，你可以在你的 Scaffold 中使用 FlashyTabBar 来创建底部导航栏。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  [@override](/user/override)
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;

  final List<Widget> _pages = [
    Center(child: Text('Home Page')),
    Center(child: Text('Search Page')),
    Center(child: Text('Profile Page')),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flashy Tab Bar Example'),
      ),
      body: _pages[_selectedIndex],
      bottomNavigationBar: FlashyTabBar(
        selectedIndex: _selectedIndex,
        showElevation: true,
        onItemSelected: (index) => setState(() {
          _selectedIndex = index;
        }),
        items: [
          FlashyTabBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          FlashyTabBarItem(
            icon: Icon(Icons.search),
            title: Text('Search'),
          ),
          FlashyTabBarItem(
            icon: Icon(Icons.person),
            title: Text('Profile'),
          ),
        ],
      ),
    );
  }
}
回到顶部