0 purchases
Description:
simple floating bottom nav bar
✨ Simple Floating Bottom Navigation Bar #
Fully customizable Simple floating bottom navigation bar package for flutter.
🎮 How To Use #
import 'package:flutter/material.dart';
import 'package:simple_floating_bottom_nav_bar/floating_bottom_nav_bar.dart';
import 'package:simple_floating_bottom_nav_bar/floating_item.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Simple Floating NavBar Demo',
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<FloatingBottomNavItem> bottomNavItems = const [
FloatingBottomNavItem(
inactiveIcon: Icon(Icons.home_outlined),
activeIcon: Icon(Icons.home),
label: "Home",
),
FloatingBottomNavItem(
inactiveIcon: Icon(Icons.search_outlined),
activeIcon: Icon(Icons.search),
label: "Search",
),
FloatingBottomNavItem(
inactiveIcon: Icon(Icons.add_circle_outline),
activeIcon: Icon(Icons.add_circle),
label: "Add",
),
FloatingBottomNavItem(
inactiveIcon: Icon(Icons.person_outline),
activeIcon: Icon(Icons.person),
label: "Profile",
),
];
List<Widget> pages = [
Container(
color: Colors.red,
),
Container(
color: Colors.purple,
),
Container(
color: Colors.blue,
),
Container(
color: Colors.yellow,
),
];
@override
Widget build(BuildContext context) {
return FloatingBottomNavBar(
pages: pages,
items: bottomNavItems,
initialPageIndex: 0,
backgroundColor: Colors.green,
bottomPadding: 10,
elevation: 0,
radius: 20,
width: 300,
height: 65,
);
}
}
copied to clipboard
❗️ Note #
Pull requests are welcomed, especially the animations 🙂
⭐️ License #
MIT License
License
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
Files:
Customer Reviews
There are no reviews.
