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 分类

安装插件