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

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

FloatyNavBar 是一个用于 Flutter 应用程序的可定制浮动导航栏。它提供了一种时尚且交互的方式来在标签之间导航，并提供了可选的操作按钮以增加额外的功能。

FloatyNavBar

特性

  • 可自定义标签外观和行为
  • 每个标签可以有一个浮动操作按钮
  • 平滑的动画和过渡效果
  • 支持多种形状（圆形、矩形、圆角矩形）
  • 易于集成到现有的 Flutter 项目中

安装

在你的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  floaty_nav_bar: ^latest_version

然后运行：

flutter pub get

使用

下面是一个基本的使用示例：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Floaty Nav Bar',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blueAccent),
        useMaterial3: true,
      ),
      themeMode: ThemeMode.light,
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Selected tab: $_selectedIndex'),
      ),
      bottomNavigationBar: FloatyNavBar(
        selectedTab: _selectedIndex,
        tabs: [
          FloatyTab(
            isSelected: _selectedIndex == 0,
            title: 'Home',
            icon: Icon(Icons.home),
            onTap: () => setState(() => _selectedIndex = 0),
          ),
          FloatyTab(
            isSelected: _selectedIndex == 1,
            title: 'Search',
            icon: Icon(Icons.search),
            onTap: () => setState(() => _selectedIndex = 1),
            floatyActionButton: FloatyActionButton(
              icon: Icon(Icons.add),
              onTap: () {
                // Add action for search tab
              },
            ),
          ),
          FloatyTab(
            isSelected: _selectedIndex == 2,
            title: 'Profile',
            icon: Icon(Icons.person),
            onTap: () => setState(() => _selectedIndex = 2),
          ),
        ],
      ),
    );
  }
}

自定义

标签定制

你可以通过 FloatyTab 类来自定义每个标签：

FloatyTab(
  isSelected: bool,
  title: String,
  icon: Widget,
  onTap: VoidCallback,
  titleStyle: TextStyle?,
  floatyActionButton: FloatyActionButton?,
  margin: EdgeInsetsGeometry,
  selectedColor: Color?,
  unselectedColor: Color?,
)
浮动操作按钮

每个标签可以有一个相关的浮动操作按钮：

FloatyActionButton(
  icon: Widget,
  onTap: VoidCallback,
  size: double?,
  backgroundColor: Color?,
  foregroundColor: Color?,
  elevation: double?,
)
导航栏形状

你可以选择不同的形状来构建导航栏：

FloatyNavBar(
  // ...
  shape: CircleShape(), // 或者 RectangleShape() 或者 SquircleShape()
)

更多关于Flutter浮动导航栏插件floaty_nav_bar的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter浮动导航栏插件floaty_nav_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter应用中使用floaty_nav_bar插件来创建一个浮动导航栏的示例代码。

首先，确保你已经在pubspec.yaml文件中添加了floaty_nav_bar依赖：

dependencies:
  flutter:
    sdk: flutter
  floaty_nav_bar: ^latest_version  # 请替换为最新版本号

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

接下来，你可以在你的Flutter应用中按照以下步骤使用floaty_nav_bar。

示例代码

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Floaty Nav 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 List<Widget> _widgetOptions = <Widget>[
    Text('Home Page'),
    Text('Search Page'),
    Text('Settings Page'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Floaty Nav Bar Demo'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(selectedIndex),
      ),
      floatingActionButton: FloatyNavBar(
        data: [
          FloatyItem(
            iconData: Icons.home,
            title: 'Home',
            onTap: () {
              setState(() {
                selectedIndex = 0;
              });
            },
          ),
          FloatyItem(
            iconData: Icons.search,
            title: 'Search',
            onTap: () {
              setState(() {
                selectedIndex = 1;
              });
            },
          ),
          FloatyItem(
            iconData: Icons.settings,
            title: 'Settings',
            onTap: () {
              setState(() {
                selectedIndex = 2;
              });
            },
          ),
        ],
        menuButton: FloatyCustomButton(
          iconData: Icons.menu,
          backgroundColor: Colors.blue,
          iconColor: Colors.white,
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
        autoHide: false,
        color: Colors.blue,
        title: Text('Floaty'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
        ],
        currentIndex: selectedIndex,
        selectedItemColor: Colors.blue,
        onTap: (index) {
          setState(() {
            selectedIndex = index;
          });
        },
      ),
    );
  }
}

解释

  1. 依赖添加：在pubspec.yaml中添加floaty_nav_bar依赖。
  2. 主应用：MyApp类是一个无状态小部件，定义了应用的主题和主页。
  3. 主页：MyHomePage类是一个有状态小部件，用于管理页面的状态。
  4. 浮动导航栏：
    • 使用FloatyNavBar小部件创建浮动导航栏。
    • data属性包含多个FloatyItem，每个FloatyItem代表一个导航项。
    • menuButton属性用于定义菜单按钮的样式和图标。
    • floatingActionButtonLocation属性定义浮动按钮的位置。
    • floatingActionButtonAnimator属性定义动画效果。
    • autoHide属性定义是否自动隐藏。
    • color属性定义浮动导航栏的颜色。
    • title属性定义浮动导航栏的标题。
  5. 页面切换：通过点击浮动导航栏中的项目，更新selectedIndex来切换页面内容。

这样，你就可以在你的Flutter应用中实现一个带有浮动导航栏的功能了。

回到顶部