Flutter轻量级标签栏插件flutter_tabbar_lite的使用

发布于 1周前 作者 ionicwang 来自 Flutter

FlutterTabBarLite

A fully customizable and animated tab bar widget for Flutter applications. Designed to make navigation intuitive and visually appealing, this package is perfect for creating modern and dynamic tab interfaces.

FlutterTabBarLite

Features

  • Customizable Titles: Add unique titles to each tab.
  • Icon Support: Include prefix and suffix icons for enhanced aesthetics.
  • Scrollable & Fixed Layouts: Choose between scrollable and fixed tab bar layouts.
  • Gradient Backgrounds: Apply gradients for a modern look.
  • Responsive Design: Fully responsive for various screen sizes.
  • Tab Change Callback: Get notified when the user switches tabs.
  • Tab Axis Horizontal & Vertical: Horizontal and Vertical Tabs.

Installation

Add the following to your pubspec.yaml file:

dependencies:
  flutter_tabbar_lite: ^0.0.4

Run the command to fetch the package:

flutter pub get

Usage

FlutterTabBarLite Horizontal Example

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("FlutterTabBarLite Horizontal Example")),
        body: Column(
          children: [
            FlutterTabBarLite.horizontal(
              scrollable: true,
              titles: const [
                "Home",
                "Profile",
                "Settings",
                "More",
                "Help",
                "About",
                "Contact"
              ],
              gradient: const LinearGradient(
                colors: [Colors.teal, Colors.green],
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
              ),
              onTabChange: (index) {
                print("Scrollable TabBar - Selected Tab: $index");
              },
            ),
          ],
        ),
      ),
    );
  }
}

Flutter TabBarLite Vertical Example

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("FlutterTabBarLite Vertical Example")),
        body: Column(
          children: [
            FlutterTabBarLite.vertical(
              itemMargin: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
              titles: const [
                "Home",
                "Profile",
                "Settings",
                "More",
                "Help",
                "About",
                "Contact"
              ],
              gradient: const LinearGradient(
                colors: [Colors.purple, Colors.cyan],
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
              ),
              onTabChange: (index) {
                print("Selected Tab: $index");
              },
            ),
          ],
        ),
      ),
    );
  }
}

Properties

Property Type Default Value Description
scrollable bool false Enables horizontal scrolling for tabs.
titles List<String> ["Tab 1", "Tab 2"] Titles for each tab.
prefixIcons List<IconData>? null Icons before titles.
suffixIcons List<IconData>? null Icons after titles.
backgroundColor Color? Colors.blue Tab bar background color.
selectedTextColor Color Colors.black87 Color for the selected tab’s text.
unselectedItemTextColor Color Colors.white Color for unselected tab’s text.
gradient LinearGradient? null Gradient applied to the tab bar.
borderRadius double? 8.0 Border radius for TabBar.
itemBorderRadius double? 4.0 Border radius for TabBar Item.
itemMargin EdgeInsets? null Margin for TabBar Item.
onTabChange Function(int)? null Callback function invoked on tab change.
horizontal constructor null Constructor to use horizontal tab bar.
vertical constructor null Constructor to use vertical TabBar.

Contributions

Contributions are welcome! Please fork the repository, make changes, and submit a pull request. Refer to the CONTRIBUTING.md for more details.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Author

Developed with ❤️ by Khandakar Amir Hamza
GitHub Profile | Portfolio

Example App

Check the example directory for a fully functional implementation. Run it locally using:

cd example
flutter run

Feedback

If you encounter any issues or have suggestions, please create an issue in the GitHub repository.


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用flutter_tabbar_lite插件的一个示例。flutter_tabbar_lite是一个轻量级的标签栏插件，可以帮助你快速实现底部导航功能。

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

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

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

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

  1. 导入必要的包：
import 'package:flutter/material.dart';
import 'package:flutter_tabbar_lite/flutter_tabbar_lite.dart';
  1. 创建主页面和各个标签页的内容：
void main() {
  runApp(MyApp());
}

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

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

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late int _selectedIndex;

  @override
  void initState() {
    super.initState();
    _selectedIndex = 0;
  }

  void _onTabSelected(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter TabBar Lite Demo'),
      ),
      body: Center(
        child: _buildTabContent(_selectedIndex),
      ),
      bottomNavigationBar: FlutterTabBarLite(
        items: [
          TabBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          TabBarItem(
            icon: Icon(Icons.search),
            title: Text('Search'),
          ),
          TabBarItem(
            icon: Icon(Icons.favorite),
            title: Text('Favorites'),
          ),
          TabBarItem(
            icon: Icon(Icons.person),
            title: Text('Profile'),
          ),
        ],
        selectedIndex: _selectedIndex,
        onTabSelected: _onTabSelected,
      ),
    );
  }

  Widget _buildTabContent(int index) {
    switch (index) {
      case 0:
        return Center(child: Text('Home Page'));
      case 1:
        return Center(child: Text('Search Page'));
      case 2:
        return Center(child: Text('Favorites Page'));
      case 3:
        return Center(child: Text('Profile Page'));
      default:
        return Center(child: Text('Unknown Page'));
    }
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，它包含一个底部导航栏和四个标签页。每个标签页的内容都是简单的文本，但在实际应用中，你可以根据需要替换为更复杂的UI组件。

FlutterTabBarLite组件接受一个items列表，其中每个TabBarItem包含图标和标题。selectedIndex属性用于设置当前选中的标签索引，而onTabSelected回调用于处理标签切换事件。

这个示例展示了如何使用flutter_tabbar_lite来快速实现底部导航功能，希望对你有所帮助！

回到顶部