awesome_floating_bottom_navigation

Description:

awesome floating bottom navigation

AwesomeFloatingBottomNavigation #




A Flutter package that provides a customizable floating bottom navigation bar with different options for item positions, including extend and center.
https://github.com/Bomsamdi/awesome_floating_bottom_navigation/assets/94292009/8d476c59-5ed9-4df5-88c3-d3a18f92003b
Installation #
Add this to your pubspec.yaml:
dependencies:
awesome_floating_bottom_navigation: ^0.0.1
copied to clipboard
Usage #
Use the AwesomeFloatingBottomNavigation widget in your app. Customize the appearance and behavior according to your needs.
import 'package:awesome_floating_bottom_navigation/awesome_floating_bottom_navigation.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: 'AwesomeFloatingBottomNavigation Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'AwesomeFloatingBottomNavigation Demo'),
);
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});

final String title;

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

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
final iconList = <IconData>[
Icons.dashboard,
Icons.search,
Icons.shopping_bag,
Icons.qr_code,
Icons.account_circle
];

PageController pageController = PageController();

@override
void initState() {
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
extendBody: true,
appBar: AppBar(
backgroundColor: Colors.black87,
title: Text(
widget.title,
style: const TextStyle(color: Colors.white),
),
),
body: PageView(
controller: pageController,
onPageChanged: (index) {
setState(() {
pageController.jumpToPage(index);
});
},
children: const [
NavigationScreen(Icons.dashboard),
NavigationScreen(Icons.search),
NavigationScreen(Icons.shopping_bag),
NavigationScreen(Icons.qr_code),
NavigationScreen(Icons.account_circle),
],
),
bottomNavigationBar: AwesomeFloatingBottomNavigation.builder(
itemCount: iconList.length,
tabBuilder: (int index, bool isActive) {
final color = isActive ? Colors.green : Colors.grey;
return Center(
child: Icon(
iconList[index],
size: 24,
color: color,
),
);
},
backgroundColor: Colors.black87,
activeIndex:
pageController.hasClients ? pageController.page?.round() ?? 0 : 0,
splashColor: Colors.green.shade400,
splashSpeedInMilliseconds: 300,
cornerRadius: 32,
onTap: (index) => setState(() {
pageController.jumpToPage(index);
}),
padding: const EdgeInsets.all(16),
leftAndRightBonusPadding: 48,
shadow: const BoxShadow(
offset: Offset(0, 1),
blurRadius: 12,
spreadRadius: 0.5,
color: Colors.grey,
),
navigationBarType: NavigationBarType.center,
),
);
}
}

class NavigationScreen extends StatefulWidget {
final IconData iconData;

const NavigationScreen(this.iconData, {super.key});

@override
State<NavigationScreen> createState() => _NavigationScreenState();
}

class _NavigationScreenState extends State<NavigationScreen>
with TickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> animation;

@override
void didUpdateWidget(NavigationScreen oldWidget) {
super.didUpdateWidget(oldWidget);
if (oldWidget.iconData != widget.iconData) {
_startAnimation();
}
}

@override
void initState() {
_controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 1000),
);
animation = CurvedAnimation(
parent: _controller,
curve: Curves.easeIn,
);
_controller.forward();
super.initState();
}

_startAnimation() {
_controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 1000),
);
animation = CurvedAnimation(
parent: _controller,
curve: Curves.easeIn,
);
_controller.forward();
}

@override
void dispose() {
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Container(
color: Theme.of(context).colorScheme.background,
child: ListView(
children: [
const SizedBox(height: 64),
Center(
child: Icon(
widget.iconData,
color: Colors.green,
size: 160,
),
),
],
),
);
}
}
copied to clipboard
Features #

Customizable floating bottom navigation bar.
Different options for item positions, including extend and center.

Configuration #
Customize the appearance and behavior of the AwesomeFloatingBottomNavigation widget through various configuration options.
Issues and Bugs #
Report any issues or bugs on the GitHub issues page.
License #
This package is licensed under the MIT License.