hidding_bottom_navigation_bar 1.0.3
hidding_bottom_navigation_bar: ^1.0.3 copied to clipboard
A light weight solution for managing a hidding bottom navigation bar
HiddingBottomNavigationBar is a lightweight library to create and control a hidding bottom navigation bar. When scrolling down, the BottomNavigationBar disappears. On the contrary, when scrolling up, the BottomNavigationBar appears. Effortlessly.
Features #
Simple and functional HiddingBottomNavigationBar. The implementation is the same as the Flutter BottomNavigationBar, with a extended functionality to make the bar dissapear or appear. Also, an onHide and onAppear callbacks are provided in the case you need them.
Getting started #
Install the dependency with the following command line:
flutter pub add hidding_bottom_navigation_bar
Usage #
import 'package:hidding_bottom_navigation_bar/hidding_bottom_navigation_bar.dart';
/**
* Three simple steps:
* 1. Create a ScrollController
* 2. Pass the ScrollController to the ScrollableView (ListView, SingleChildScrollView, etc).
* 3. Pass the same ScrollController to the HiddingBottomNavigationBar
*
*/
class HiddingBottomNavBarWidgetExample extends StatefulWidget {
const HiddingBottomNavBarWidgetExample({super.key});
@override
State<HiddingBottomNavBarWidgetExample> createState() =>
_HiddingBottomNavBarWidgetExampleState();
}
class _HiddingBottomNavBarWidgetExampleState
extends State<HiddingBottomNavBarWidgetTest> {
//You need to create a ScrollController
final controller = ScrollController();
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Scaffold(
appBar: null,
body: SizedBox(
height: size.height * 2,
child: SingleChildScrollView(
//pass the scroll controller to the SingleChildScrollView
controller: controller,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: size.width,
height: size.height,
child: const Center(child: Text('Test hidding bottom navigation bar')))
],
),
),
),
bottomNavigationBar: HiddingBottomNavigationBar(
type: FlexibleBottomNavigationBarType.fixed,
items: const [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(
icon: Icon(Icons.calendar_today), label: 'Tasks'),
BottomNavigationBarItem(
icon: Icon(Icons.settings), label: 'Settings'),
],
onTap: (index) {},
//Then pass the scroll controller to the HiddingBototmNavigationBar in order to listen to Scroll changes in the screen
scrollController: controller),
);
}
}