Flutter浮动导航插件frosty_float_navigation的使用

Frosty Float Navigation 🧊🚀

一个为Flutter应用程序设计的现代风格的磨砂玻璃样式浮动底部导航栏。

✨ 特性

• 🌟 磨砂玻璃效果：带有透明导航栏的模糊背景。
• 🧩 可定制项：添加具有图标和屏幕的动态导航项。
• 🎯 平滑导航：无缝切换屏幕。
• 🛠️ 易于集成：最小化设置。
• 🎨 自定义样式：轻松自定义导航栏的外观，包括填充、颜色和不透明度。

📲 安装

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

dependencies:
  frosty_float_navigation: ^1.0.2

然后运行：

flutter pub get

🛠️ 使用

以下是一个完整的示例，展示如何使用frosty_float_navigation插件。

import 'package:flutter/material.dart';
import 'package:frosty_float_navigation/frosty_float_navigation.dart';
import 'package:iconsax/iconsax.dart';

// 主应用类
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FrostyFloatNavigation(
        items: [
          ForstyFloatItem(
            icon: Iconsax.home,
            screen: HomeScreen(),
          ),
          ForstyFloatItem(
            icon: Iconsax.search,
            screen: SearchScreen(),
          ),
          ForstyFloatItem(
            icon: Iconsax.settings,
            screen: SettingsScreen(),
          ),
        ],
        // 自定义样式
        style: FrostyFloatNavigationStyle(
          blurAmount: 8.0, // 背景模糊程度
          borderRadius: 50.0, // 导航栏圆角半径
          containerOpacity: 0.5, // 容器不透明度
          borderOpacity: 0.3, // 边框不透明度
          navigationPadding: EdgeInsets.all(20.0), // 导航栏外部填充
          itemPadding: EdgeInsets.all(12.0), // 每个导航项的填充
          selectedIconColor: Colors.white, // 选中图标的颜色
          selectedContainerColor: Colors.blueAccent, // 选中项目的容器颜色
          unselectedIconColor: Colors.grey, // 未选中图标的颜色
        ),
      ),
    );
  }
}

// 示例屏幕
class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text('这是首页'),
      ),
    );
  }
}

class SearchScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('搜索'),
      ),
      body: Center(
        child: Text('这是搜索页'),
      ),
    );
  }
}

class SettingsScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('设置'),
      ),
      body: Center(
        child: Text('这是设置页'),
      ),
    );
  }
}