Flutter自定义底部导航栏插件fancy_bar的使用

Flutter自定义底部导航栏插件fancy_bar的使用

插件简介

FancyBar 是一个用于Flutter应用的漂亮且动画丰富的底部导航栏插件。以下是该插件的一些功能预览图：

预览版本1

预览版本2

自定义选项（可选）

FancyBar

• items - 导航项，必须多于一个且少于六个。
• selectedIndex - 当前选中的项索引，默认为0。
• onItemSelected - 必须监听项被点击时的事件，提供选中项的索引。
• type - 可以传递所需的Fancy Bar类型，可用的类型有 FancyV1, FancyV2。

FancyItem

• icon - 该项的图标，可以传入任何小部件。
• title - 当该项被选中时出现在图标旁边的文本。
• textColor - 激活项的文本颜色。

开始使用

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

dependencies:
  fancy_bar: ^1.2.0

基本用法

添加该组件到您的应用程序中：

bottomNavigationBar: FancyBottomBar(
        type: FancyType.FancyV2,   // Fancy Bar 类型
        items: [
          FancyItem(
            textColor: Colors.orange,
            title: 'Home',           // 标题
            icon: Icon(Icons.home),  // 图标
          ),
          FancyItem(
            textColor: Colors.red,
            title: 'Trending',
            icon: Icon(Icons.trending_up),
          ),
          FancyItem(
            textColor: Colors.green,
            title: 'Search',
            icon: Icon(Icons.search),
          ),
          FancyItem(
            textColor: Colors.brown,
            title: 'Settings',
            icon: Icon(Icons.settings),
          ),
        ],
        onItemSelected: (index) {
          print(index);             // 打印选中项的索引
        },
      ),

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 fancy_bar 插件创建自定义底部导航栏。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      bottomNavigationBar: FancyBottomBar(
        type: FancyType.FancyV2,   // 设置Fancy Bar类型
        items: [
          FancyItem(
            textColor: Colors.orange,
            title: 'Home',
            icon: Icon(Icons.home),
          ),
          FancyItem(
            textColor: Colors.red,
            title: 'Trending',
            icon: Icon(Icons.trending_up),
          ),
          FancyItem(
            textColor: Colors.green,
            title: 'Search',
            icon: Icon(Icons.search),
          ),
          FancyItem(
            textColor: Colors.brown,
            title: 'Settings',
            icon: Icon(Icons.settings),
          ),
        ],
        onItemSelected: (index) {
          print('Selected index: $index');  // 打印选中项的索引
        },
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}