Flutter底部导航栏美化插件stylish_bottom_bar的使用

Flutter开发者经常需要为应用添加美观且功能丰富的底部导航栏，stylish_bottom_bar插件正好满足了这一需求。它提供了多种样式的底部导航栏，如动画底部栏和气泡底部栏，并且可以通过简单的配置实现复杂的交互效果。

Table of contents

• Installing
• How To Use
• Showcase
• Migrate to 1.0.0
• Example

⭐ Installing

在pubspec.yaml文件中添加依赖：

dependencies:
  stylish_bottom_bar: ^1.1.0

然后执行flutter pub get命令来安装这个包。

⚡ Import

在Dart文件中导入stylish_bottom_bar库：

import 'package:stylish_bottom_bar/stylish_bottom_bar.dart';

📙 How To Use

StylishBottomBar组件支持多种属性来自定义样式和行为，下面是一些常用的属性：

items: List<BottomBarItem>, // 底部导航项列表
option: AnimatedBarOptions | BubbleBarOptions | DotBarOptions, // 样式选项
backgroundColor: Color, // 背景颜色
elevation: double, // 阴影高度
currentIndex: int, // 当前选中的索引
iconSize: double, // 图标大小
padding: EdgeInsets, // 内边距
inkEffect: bool, // 是否启用点击涟漪效果
inkColor: Color, // 涟漪颜色
onTap: Function(int), // 点击事件回调
opacity: double, // 不透明度
borderRadius: BorderRadius, // 圆角半径
fabLocation: StylishBarFabLocation, // FAB位置
hasNotch: bool, // 是否有凹槽
barAnimation: BarAnimation, // 动画类型
barStyle: BubbleBarStyle, // 气泡样式
unselectedIconColor: Color, // 未选中图标颜色
bubbleFillStyle: BubbleFillStyle, // 气泡填充样式
iconStyle: IconStyle, // 图标样式
selectedIcon: Widget, // 选中时显示的图标
dotStyle: DotStyle, // 点样式

属性详解

• BarStyle: BubbleBarStyle.vertical, BubbleBarStyle.horizontal
• BubbleFillStyle: BubbleFillStyle.fill, BubbleFillStyle.outlined
• FabLocation: StylishBarFabLocation.center, StylishBarFabLocation.end
• BarAnimation: BarAnimation.fade, BarAnimation.blink, BarAnimation.transform3D, BarAnimation.liquid, BarAnimation.drop
• IconStyle: IconStyle.Default, IconStyle.simple, IconStyle.animated
• DotStyle: DotStyle.circle, DotStyle.tile
• NotchStyle: NotchStyle.circle, NotchStyle.square, NotchStyle.themeDefault

Showcase

Migrate to 1.0.0

从版本1.0.0开始，items属性的数据类型由List<dynamic>变更为List<BottomBarItem>，并且通过option属性下的AnimatedBarOptions或BubbleBarOptions来设置条目类型及其属性。

Example

以下是一个完整的示例代码，展示了如何使用stylish_bottom_bar创建一个带有动画效果的底部导航栏，并结合PageView实现页面切换：

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

void main() {
  runApp(MyApp());
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  int selectedIndex = 0;
  final PageController _pageController = PageController();

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  void onItemTapped(int index) {
    setState(() {
      selectedIndex = index;
      _pageController.jumpToPage(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _pageController,
        children: <Widget>[
          Center(child: Text('Home')),
          Center(child: Text('Star')),
          Center(child: Text('Style')),
          Center(child: Text('Profile')),
        ],
      ),
      bottomNavigationBar: StylishBottomBar(
        option: DotBarOptions(
          dotStyle: DotStyle.tile,
          gradient: LinearGradient(
            colors: [Colors.deepPurple, Colors.pink],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
        ),
        items: [
          BottomBarItem(
            icon: Icon(Icons.home_outlined),
            selectedIcon: Icon(Icons.home_rounded),
            selectedColor: Colors.teal,
            unSelectedColor: Colors.grey,
            title: Text('Home'),
            badge: Text('9+'),
            showBadge: true,
            badgeColor: Colors.purple,
            badgePadding: EdgeInsets.only(left: 4, right: 4),
          ),
          BottomBarItem(
            icon: Icon(Icons.star_border_rounded),
            selectedIcon: Icon(Icons.star_rounded),
            selectedColor: Colors.red,
            title: Text('Star'),
          ),
          BottomBarItem(
            icon: Icon(Icons.style_outlined),
            selectedIcon: Icon(Icons.style),
            selectedColor: Colors.deepOrangeAccent,
            title: Text('Style'),
          ),
          BottomBarItem(
            icon: Icon(Icons.person_outline),
            selectedIcon: Icon(Icons.person),
            selectedColor: Colors.deepPurple,
            title: Text('Profile'),
          ),
        ],
        hasNotch: true,
        fabLocation: StylishBarFabLocation.end,
        currentIndex: selectedIndex,
        onTap: onItemTapped,
      ),
    );
  }
}

这段代码创建了一个包含四个标签页的应用程序，每个标签页对应不同的内容区域。用户点击底部导航栏上的按钮即可切换到相应的页面。同时，该例子还演示了如何为底部导航栏添加渐变色、徽章等装饰性元素，以增强用户体验。