CustomAnimatedBottomBar class

create_user: zhengzaihong email:[e-mail] create_date: 2024/1/4 create_time: 16:40 describe: 底部导航栏动画组件 - 流畅的切换动画效果 Enterprise-level animated bottom navigation bar component - Smooth switching animation

功能特性 / Features: • 流畅动画 - 选中项平滑展开/收缩动画 • 高度自定义 - 支持自定义图标、颜色、尺寸 • 响应式设计 - 自适应不同屏幕尺寸 • 灵活布局 - 支持多种对齐方式 • 状态管理 - 自动管理选中状态 • Material风格 - 支持阴影、圆角等Material属性 • 尺寸可控 - 支持自定义容器高度、图标大小 • 多彩主题 - 每个项可配置独立的激活颜色

使用示例 / Usage Examples:

// 示例1: 基础底部导航栏
// Example 1: Basic bottom navigation bar
int currentIndex = 0;

CustomAnimatedBottomBar(
  containerHeight: 56,
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  backgroundColor: Colors.white,
  selectedIndex: currentIndex,
  itemCornerRadius: 24,
  curve: Curves.easeInOut,
  showElevation: true,
  onItemSelected: (index) => setState(() => currentIndex = index),
  items: <MyBottomNavigationBarItem>[
    MyBottomNavigationBarItem(
      checkedIcon: Icon(Icons.home, color: Colors.blue),
      unCheckedIcon: Icon(Icons.home_outlined, color: Colors.grey),
      title: Text('首页'),
      activeColor: Colors.blue,
      textAlign: TextAlign.center,
    ),
    MyBottomNavigationBarItem(
      checkedIcon: Icon(Icons.person, color: Colors.green),
      unCheckedIcon: Icon(Icons.person_outline, color: Colors.grey),
      title: Text('我的'),
      activeColor: Colors.green,
      textAlign: TextAlign.center,
    ),
  ],
)

// 示例2: 自定义图标和颜色
// Example 2: Custom icons and colors
CustomAnimatedBottomBar(
  containerHeight: 60,
  backgroundColor: Color(0xFF1E1E1E),
  selectedIndex: currentIndex,
  iconSize: 28,
  onItemSelected: (index) => setState(() => currentIndex = index),
  items: [
    MyBottomNavigationBarItem(
      checkedIcon: Image.asset('assets/home_active.png', width: 28),
      unCheckedIcon: Image.asset('assets/home_inactive.png', width: 28),
      title: Text('首页', style: TextStyle(fontSize: 12)),
      activeColor: Color(0xFF8E93F9),
    ),
    MyBottomNavigationBarItem(
      checkedIcon: Image.asset('assets/discover_active.png', width: 28),
      unCheckedIcon: Image.asset('assets/discover_inactive.png', width: 28),
      title: Text('发现', style: TextStyle(fontSize: 12)),
      activeColor: Color(0xFFFF6B6B),
    ),
    MyBottomNavigationBarItem(
      checkedIcon: Image.asset('assets/profile_active.png', width: 28),
      unCheckedIcon: Image.asset('assets/profile_inactive.png', width: 28),
      title: Text('我的', style: TextStyle(fontSize: 12)),
      activeColor: Color(0xFF4ECDC4),
    ),
  ],
)

// 示例3: 无阴影扁平风格
// Example 3: Flat style without elevation
CustomAnimatedBottomBar(
  containerHeight: 56,
  backgroundColor: Colors.transparent,
  selectedIndex: currentIndex,
  showElevation: false,
  itemCornerRadius: 20,
  animationDuration: Duration(milliseconds: 300),
  onItemSelected: (index) => setState(() => currentIndex = index),
  items: [
    // ... items
  ],
)

// 示例4: 自定义动画曲线
// Example 4: Custom animation curve
CustomAnimatedBottomBar(
  containerHeight: 56,
  selectedIndex: currentIndex,
  curve: Curves.elasticOut,
  animationDuration: Duration(milliseconds: 500),
  onItemSelected: (index) => setState(() => currentIndex = index),
  items: [
    // ... items
  ],
)

// 示例5: 多项导航(最多5项)
// Example 5: Multiple items (max 5)
CustomAnimatedBottomBar(
  containerHeight: 56,
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  selectedIndex: currentIndex,
  onItemSelected: (index) => setState(() => currentIndex = index),
  items: [
    MyBottomNavigationBarItem(
      checkedIcon: Icon(Icons.home, color: Colors.blue),
      unCheckedIcon: Icon(Icons.home_outlined, color: Colors.grey),
      title: Text('首页'),
      activeColor: Colors.blue,
    ),
    MyBottomNavigationBarItem(
      checkedIcon: Icon(Icons.explore, color: Colors.orange),
      unCheckedIcon: Icon(Icons.explore_outlined, color: Colors.grey),
      title: Text('发现'),
      activeColor: Colors.orange,
    ),
    MyBottomNavigationBarItem(
      checkedIcon: Icon(Icons.message, color: Colors.green),
      unCheckedIcon: Icon(Icons.message_outlined, color: Colors.grey),
      title: Text('消息'),
      activeColor: Colors.green,
    ),
    MyBottomNavigationBarItem(
      checkedIcon: Icon(Icons.shopping_cart, color: Colors.red),
      unCheckedIcon: Icon(Icons.shopping_cart_outlined, color: Colors.grey),
      title: Text('购物车'),
      activeColor: Colors.red,
    ),
    MyBottomNavigationBarItem(
      checkedIcon: Icon(Icons.person, color: Colors.purple),
      unCheckedIcon: Icon(Icons.person_outline, color: Colors.grey),
      title: Text('我的'),
      activeColor: Colors.purple,
    ),
  ],
)

⚠️ 注意事项 / Notes: • 导航项数量必须在2-5之间 • checkedIcon和unCheckedIcon分别表示选中和未选中状态的图标 • activeColor会应用到选中项的背景和文本 • 建议使用状态管理(如Provider)管理currentIndex • 动画时长建议在200-500ms之间,过长会影响体验 • 容器高度建议在48-72之间,过高或过低都会影响美观

Inheritance

• Object
• DiagnosticableTree
• Widget
• StatelessWidget
• CustomAnimatedBottomBar

Available extensions

• BlurExtension
• FrostExtension

Constructors

CustomAnimatedBottomBar({Key? key, int selectedIndex = 0, bool showElevation = true, double iconSize = 24, Color? backgroundColor = Colors.white, double itemCornerRadius = 28, double containerHeight = 48, Duration animationDuration = const Duration(milliseconds: 200), MainAxisAlignment mainAxisAlignment = MainAxisAlignment.spaceBetween, required List<MyBottomNavigationBarItem> items, required ValueChanged<int> onItemSelected, Curve curve = Curves.easeInOut})

const

Properties

animationDuration → Duration

final

backgroundColor → Color?

final

containerHeight → double

final

curve → Curve

final

hashCode → int

The hash code for this object.

no setter, inherited

iconSize → double

final

itemCornerRadius → double

final

items → List<MyBottomNavigationBarItem>

final

key → Key?

Controls how one widget replaces another widget in the tree.

final, inherited

mainAxisAlignment → MainAxisAlignment

final

onItemSelected → ValueChanged<int>

final

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

selectedIndex → int

final

showElevation → bool

final

Methods

blurred({double blur = 5, Color blurColor = Colors.white, BorderRadius? borderRadius, double colorOpacity = 0.5, Widget? overlay, AlignmentGeometry alignment = Alignment.center}) → Blur

Available on Widget, provided by the BlurExtension extension

build(BuildContext context) → Widget

Describes the part of the user interface represented by this widget.

override

createElement() → StatelessElement

Creates a StatelessElement to manage this widget's location in the tree.

inherited

debugDescribeChildren() → List<DiagnosticsNode>

Returns a list of DiagnosticsNode objects describing this node's children.

inherited

debugFillProperties(DiagnosticPropertiesBuilder properties) → void

Add additional properties associated with the node.

inherited

frosted({double blur = 5, Color frostColor = Colors.white, AlignmentGeometry alignment = Alignment.center, double? height, double? width, double frostOpacity = 0.0, BorderRadius? borderRadius, EdgeInsetsGeometry padding = EdgeInsets.zero}) → Blur

Available on Widget, provided by the FrostExtension extension

noSuchMethod(Invocation invocation) → dynamic

Invoked when a nonexistent method or property is accessed.

inherited

toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode

Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.

inherited

toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String

A string representation of this object.

inherited

toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String

Returns a string representation of this node and its descendants.

inherited

toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String

Returns a one-line detailed description of the object.

inherited

toStringShort() → String

A short, textual description of this widget.

inherited

Operators

operator ==(Object other) → bool

The equality operator.

inherited