搜尋套件、儲存庫與 APP 分類

套件詳情v0.0.2

flexi_bottom_nav

FlexiBottomNavigation 是一個可自定義的 Flutter 底部導航組件。它讓您能輕鬆建立具有可配置圖示、標籤和顏色的底部導航列,讓您能靈活地根據應用程式需求客製化導航體驗。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
31
喜歡數
2
Pub 分數
140

安裝套件

flutter pub add flexi_bottom_nav

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

FlexiBottomNavigation 是一個高度可自訂的底部導航列小工具,適用於 Flutter,讓開發者能夠建立動態且視覺上客製化的導航體驗。它支援可設定的圖示、標籤、顏色與版面選項,方便適應各種應用設計。此套件相容於所有主要平台,包括 Android、iOS、Web、macOS、Windows 與 Linux,確保在各處行為一致。透過簡單的 API,它簡化了底部導航的實作,同時不犧牲彈性。

適用情境

  • 自定義應用導航欄
  • 跨平台 Flutter 應用
  • 品牌UI組件
  • 動態圖示和標籤樣式
  • 響應式底部導航

主要特色

  • 可設定的圖示和標籤
  • 可自訂的顏色和主題
  • 跨平台相容性
  • 與 Flutter 的輕鬆整合
  • 對動態內容的支援

適合對象

  • 尋求靈活導航的Flutter開發者
  • 需要品牌化或獨特底部導航欄的應用程式
  • 針對多個平台的專案
  • 注重設計的UI實現
  • 導航介面的快速原型設計

使用建議

  • 需要手動處理狀態管理
  • 有限的內建動畫
  • 可能需要額外的樣式來處理複雜的佈局
  • 依賴外部相依性以實現進階功能
  • 不太適合高度複雜的導航模式

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

FlexiBottomNavigation

FlexiBottomNavigation is a customizable bottom navigation widget for Flutter. It allows you to easily create a bottom navigation bar with configurable icons, labels, and colors, giving you the flexibility to tailor the navigation experience to your app's needs.

Features

  • Customizable Labels: Set the labels for each tab in the bottom navigation bar.
  • Adjustable Icons: Specify icons for each tab, with customizable icon sizes and colors.
  • Color Customization: Customize the selected and unselected item colors.
  • Text and Icon Sizes: Adjust the font size for labels and the size for icons.
  • Error Handling: Ensure consistent behavior with validation for input lengths.

Getting Started

To use FlexiBottomNavigation in your Flutter project, follow these steps:

  1. Add the Dependency:

    Add flexi_bottom_nav to your pubspec.yaml file:

      flexi_bottom_nav: 0.0.1
    
    dependencies:
      flutter:
        sdk: flutter
      flexi_bottom_nav: 0.0.1
    
    pub add flexi_bottom_nav
    
  2. Install the Package:

    Run flutter pub get to install the package.

Usage

Here’s a simple example of how to use FlexiBottomNavigation in your Flutter application:

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

void main() {
  runApp(MaterialApp(
    home: FlexiBottomNavigation(
      screens: [
        Scaffold(body: Center(child: Text('Screen 1'))),
        Scaffold(body: Center(child: Text('Screen 2'))),
        Scaffold(body: Center(child: Text('Screen 3'))),
      ],
      labels: ['Home', 'Search', 'Profile'],
      icons: [Icons.home, Icons.search, Icons.person],
      iconColors: [Colors.blue, Colors.green, Colors.red],
      textSize: 14.0,
      iconSize: 30.0,
      selectedItemColor: Colors.red,
      unselectedItemColor: Colors.blueGrey,
    ),
  ));
}

For more advanced usage and customization, check the example folder included in the package.

Additional Information

  • Documentation: For detailed documentation, refer to the package documentation.
  • Contributing: Contributions are welcome! Please check the CONTRIBUTING.md for guidelines on how to contribute.
  • Issues: If you encounter any issues, please file them on the issue tracker.
  • License: This package is licensed under the MIT License. See the LICENSE file for more details.

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。