Skip to content

FlutterPack/frosty_float_navigation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Frosty Float Navigation 🧊🚀

A sleek and modern frosted glass-style floating bottom navigation bar for Flutter applications.

✨ Features

  • 🌟 Frosted Glass Effect: Blurred background with transparent navigation bar
  • 🧩 Customizable Items: Add dynamic navigation items with icons and screens
  • 🎯 Smooth Navigation: Seamless transitions between screens
  • 🛠️ Easy Integration: Minimal setup required
  • 🎨 Custom Styling: Easily customize the navigation bar's appearance, including padding, colors, and opacity.

📲 Installation

Add the following dependency in your pubspec.yaml:

dependencies:
  frosty_float_navigation: ^1.0.2

Then, run:

flutter pub get

🛠️ Usage

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

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

class MyApp extends StatelessWidget {
  @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(),
          ),
        ],
        // Custom Styling
        style: FrostyFloatNavigationStyle(
          blurAmount: 8.0,
          borderRadius: 50.0,
          containerOpacity: 0.5,
          borderOpacity: 0.3,
          navigationPadding: EdgeInsets.all(20.0),  // Outer padding for the navigation bar
          itemPadding: EdgeInsets.all(12.0),  // Padding for each navigation item
          selectedIconColor: Colors.white,  // Color for selected icon
          selectedContainerColor: Colors.blueAccent,  // Color for the selected item container
          unselectedIconColor: Colors.grey,  // Color for unselected icon
        ),
      ),
    );
  }
}

📝 API Reference

FrostyFloatNavigation

Property Type Description
items List<ForstyFloatItem> List of navigation items
style FrostyFloatNavigationStyle Custom styling for the navigation bar (optional)

ForstyFloatItem

Property Type Description
icon IconData Icon for the navigation item
screen Widget Screen to display on tap

FrostyFloatNavigationStyle

Property Type Description
blurAmount double Amount of blur for the background (default: 10.0)
borderRadius double Border radius for the navigation bar (default: 100.0)
containerOpacity double Opacity of the container (default: 0.3)
borderOpacity double Opacity of the border (default: 0.2)
navigationPadding EdgeInsets Padding for the outer navigation container (default: EdgeInsets.all(16.0))
itemPadding EdgeInsets Padding for each navigation item (default: EdgeInsets.all(8.0))
selectedIconColor Color Color of the selected icon (default: white)
selectedContainerColor Color Color of the selected item container (default: 0xFF2A4D69)
unselectedIconColor Color Color of the unselected icon (default: 0xFFBDBDBD)

🎨 Customization

You can customize colors, icon sizes, and navigation logic directly in the FrostyFloatNavigation widget.

🤝 Contributing

Feel free to submit issues or pull requests. Contributions are always welcome!

📜 License

This project is licensed under the MIT License.

About

A sleek and modern frosted glass-style floating bottom navigation bar for Flutter applications.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages