Flutter浮动导航栏插件floating_navbar的使用

floating_navbar 是一个简单且可自定义的浮动底部导航栏插件，它可以帮助您快速构建具有吸引力和功能性的应用程序界面。下面将详细介绍如何在Flutter项目中使用该插件。

Usage

Add Dependency

首先，在您的pubspec.yaml文件中添加依赖：

dependencies:
  floating_navbar: ^2.0.2

然后运行 flutter pub get 来安装依赖。

Import Package

在需要使用浮动导航栏的Dart文件顶部导入包：

import 'package:floating_navbar/floating_navbar.dart';

Use in Code as Follows

接下来是具体的使用方法，我们将创建一个简单的Flutter应用来展示如何使用floating_navbar。此示例包括两个页面：HomePage 和 MyPage，以及一个带有两个图标的浮动导航栏。

完整示例代码

import 'package:floating_navbar/floating_navbar.dart';
import 'package:floating_navbar/floating_navbar_item.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: FloatingNavBarScreen(),
    );
  }
}

class FloatingNavBarScreen extends StatefulWidget {
  @override
  _FloatingNavBarScreenState createState() => _FloatingNavBarScreenState();
}

class _FloatingNavBarScreenState extends State<FloatingNavBarScreen> {
  int currentIndex = 0;

  final List<Widget> _pages = [
    HomePage(),
    MyPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[currentIndex],
      bottomNavigationBar: FloatingNavbar(
        currentIndex: currentIndex,
        onTap: (index) {
          setState(() {
            currentIndex = index;
          });
        },
        items: [
          FloatingNavbarItem(
            iconData: Icons.home,
            title: 'Home',
          ),
          FloatingNavbarItem(
            iconData: Icons.account_circle,
            title: 'Account',
          ),
        ],
        color: Colors.green,
        selectedIconColor: Colors.white,
        unselectedIconColor: Colors.white.withOpacity(0.6),
        hapticFeedback: true,
        horizontalPadding: 40,
        showTitle: true,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            "Welcome to Home Page",
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 18,
            ),
          ),
          SizedBox(height: 20),
          TextField(
            decoration: InputDecoration(
              hintText: "Type something...",
            ),
          ),
        ],
      ),
    );
  }
}

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text(
          "This is My Page",
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 18,
          ),
        ),
      ),
    );
  }
}

Explanation

• FloatingNavbar: 创建了一个浮动导航栏，通过设置currentIndex和onTap回调函数来管理当前选中的页面。
• FloatingNavbarItem: 定义了导航栏上的每个条目，包含图标和标题。
• _pages: 包含所有页面的列表，根据currentIndex显示相应的页面。

这样就完成了一个基本的浮动导航栏实现。您可以根据自己的需求调整样式、颜色和其他属性，以适应您的应用设计。