gradient_bottom_navigation_bar

套件介紹

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

一個增強標準底部導航列的 Flutter 套件，支援自訂線性漸變背景。它提供了一個視覺上更吸引人的替代方案，取代平面顏色的導航列，非常適合現代應用設計。此套件與 Material Design 無縫整合，讓開發者能輕鬆定義漸變顏色與方向。專為簡潔性與效能打造，支援順暢過渡與響應式版面。適合希望以動態、多彩介面脫穎而出的應用。

適用情境

建立視覺上引人注目的底導航列
透過漸變效果增強應用介面
現代化現有導航組件
設計具有生動主題的移動應用
實現動畫漸變過渡

主要特色

線性漸變背景支援
與 Material Design 的輕鬆整合
可自訂的漸變顏色和方向
輕量且高效
響應式佈局相容性
漸變配置的簡單 API

適合對象

尋求美觀導航欄的Flutter開發者
注重視覺設計的應用程式
需要動態UI元素的專案
面向年輕受眾的行動應用
設計師使用鮮豔的配色方案

使用建議

僅限漸變樣式
無內建動畫控制
需要手動處理狀態管理
未針對複雜漸變圖案進行優化
可能不適合極簡或暗色主題的應用

原始 README

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

Gradient Bottom Navigation Bar

This package allows you to add a gradient to the standard Material Bottom Navigation Bar.

Getting Started

First, add this line in your project's pubspec.yaml

dependencies:
  ...
  gradient_bottom_navigation_bar: ^1.0.0+4

For help getting started with Flutter, view the online documentation.

Usage examples

Import gradient_bottom_navigation_bar.dart in your desired class

import 'package:gradient_bottom_navigation_bar/gradient_bottom_navigation_bar.dart';

...

Basic implementation

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Example'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: GradientBottomNavigationBar(
        backgroundColorStart: Colors.purple,
        backgroundColorEnd: Colors.deepOrange,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
          BottomNavigationBarItem(icon: Icon(Icons.business), title: Text('Business')),
          BottomNavigationBarItem(icon: Icon(Icons.school), title: Text('School')),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }

You can also check the example for additional information.

Screenshots

Example

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

安裝套件