navbar_router 0.5.0 navbar_router: ^0.5.0 copied to clipboard
A flutter package to build advanced bottomnavbar with minimal code and hassle
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:navbar_router/navbar_router.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
MyApp({Key? key}) : super(key: key);
final List<Color> colors = [mediumPurple, Colors.orange, Colors.teal];
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'BottomNavbar Demo',
theme: ThemeData(
primarySwatch: Colors.indigo,
),
home: const HomePage());
// home: const NavbarSample(title: 'BottomNavbar Demo'));
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List<NavbarItem> items = [
NavbarItem(Icons.home, 'Home', backgroundColor: colors[0]),
NavbarItem(Icons.shopping_bag, 'Products', backgroundColor: colors[1]),
NavbarItem(Icons.person, 'Me', backgroundColor: colors[2]),
NavbarItem(Icons.settings, 'Settings', backgroundColor: colors[0]),
];
final Map<int, Map<String, Widget>> _routes = const {
0: {
'/': HomeFeeds(),
FeedDetail.route: FeedDetail(),
},
1: {
'/': ProductList(),
ProductDetail.route: ProductDetail(),
ProductComments.route: ProductComments(),
},
2: {
'/': UserProfile(),
ProfileEdit.route: ProfileEdit(),
},
3: {
'/': Settings(),
},
};
void showSnackBar() {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
behavior: SnackBarBehavior.floating,
duration: Duration(milliseconds: 600),
margin: EdgeInsets.only(
bottom: kBottomNavigationBarHeight, right: 2, left: 2),
content: Text('Tap back button again to exit'),
),
);
}
void hideSnackBar() {
ScaffoldMessenger.of(context).hideCurrentSnackBar();
}
DateTime oldTime = DateTime.now();
DateTime newTime = DateTime.now();
/// This is only for demo purposes
void simulateTabChange() {
WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
for (int i = 0; i < items.length * 2; i++) {
NavbarNotifier.index = i % items.length;
await Future.delayed(const Duration(milliseconds: 1000));
}
});
}
@override
void initState() {
super.initState();
// simulateTabChange();
NavbarNotifier.addIndexChangeListener((x) {
print('NavbarNotifier.indexChangeListener: $x');
});
}
@override
void dispose() {
NavbarNotifier.clear();
super.dispose();
}
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Scaffold(
resizeToAvoidBottomInset: false,
floatingActionButton: Padding(
padding: const EdgeInsets.only(bottom: 60.0),
child: FloatingActionButton(
child: Icon(NavbarNotifier.isNavbarHidden
? Icons.toggle_off
: Icons.toggle_on),
onPressed: () {
// Programmatically toggle the Navbar visibility
if (NavbarNotifier.isNavbarHidden) {
NavbarNotifier.hideBottomNavBar = false;
} else {
NavbarNotifier.hideBottomNavBar = true;
}
setState(() {});
},
),
),
body: NavbarRouter(
errorBuilder: (context) {
return const Center(child: Text('Error 404'));
},
isDesktop: size.width > 600 ? true : false,
onBackButtonPressed: (isExitingApp) {
if (isExitingApp) {
newTime = DateTime.now();
int difference = newTime.difference(oldTime).inMilliseconds;
oldTime = newTime;
if (difference < 1000) {
hideSnackBar();
return isExitingApp;
} else {
showSnackBar();
return false;
}
} else {
return isExitingApp;
}
},
initialIndex: 2,
type: NavbarType.material3,
destinationAnimationCurve: Curves.fastOutSlowIn,
destinationAnimationDuration: 600,
decoration: M3NavbarDecoration(
labelTextStyle: const TextStyle(
color: Color.fromARGB(255, 176, 207, 233), fontSize: 14),
elevation: 3.0,
backgroundColor: Colors.indigo,
indicatorShape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20)),
),
indicatorColor: const Color.fromARGB(255, 176, 207, 233),
// iconTheme: const IconThemeData(color: Colors.indigo),
/// labelTextStyle: const TextStyle(color: Colors.white, fontSize: 14),
labelBehavior: NavigationDestinationLabelBehavior.alwaysShow),
onChanged: (x) {},
backButtonBehavior: BackButtonBehavior.rememberHistory,
destinations: [
for (int i = 0; i < items.length; i++)
DestinationRouter(
navbarItem: items[i],
destinations: [
for (int j = 0; j < _routes[i]!.keys.length; j++)
Destination(
route: _routes[i]!.keys.elementAt(j),
widget: _routes[i]!.values.elementAt(j),
),
],
initialRoute: _routes[i]!.keys.first,
),
],
),
);
}
}
Future<void> navigate(BuildContext context, String route,
{bool isDialog = false,
bool isRootNavigator = true,
Map<String, dynamic>? arguments}) =>
Navigator.of(context, rootNavigator: isRootNavigator)
.pushNamed(route, arguments: arguments);
const Color mediumPurple = Color.fromRGBO(79, 0, 241, 1.0);
const String placeHolderText =
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
class HomeFeeds extends StatefulWidget {
const HomeFeeds({Key? key}) : super(key: key);
static const String route = '/';
@override
State<HomeFeeds> createState() => _HomeFeedsState();
}
class _HomeFeedsState extends State<HomeFeeds> {
final _scrollController = ScrollController();
@override
void didChangeDependencies() {
super.didChangeDependencies();
size = MediaQuery.of(context).size;
if (size.width < 600) {
_addScrollListener();
}
}
void handleScroll() {
if (size.width > 600) return;
if (_scrollController.position.userScrollDirection ==
ScrollDirection.forward) {
if (NavbarNotifier.isNavbarHidden) {
NavbarNotifier.hideBottomNavBar = false;
}
} else {
if (!NavbarNotifier.isNavbarHidden) {
NavbarNotifier.hideBottomNavBar = true;
}
}
}
void _addScrollListener() {
_scrollController.addListener(handleScroll);
}
Size size = Size.zero;
@override
void dispose() {
_scrollController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Feeds'),
),
body: ListView.builder(
controller: _scrollController,
itemCount: 30,
itemBuilder: (context, index) {
return InkWell(
onTap: () {
NavbarNotifier.hideBottomNavBar = false;
Navigator.of(context).push(MaterialPageRoute(
builder: (contex) => FeedDetail(
feedId: index.toString(),
)));
},
child: FeedTile(
index: index,
));
},
),
);
}
}
class FeedTile extends StatelessWidget {
final int index;
const FeedTile({Key? key, required this.index}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
height: 300,
padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 8),
margin: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8),
color: Colors.grey.withOpacity(0.4),
child: Stack(
children: [
Positioned(
top: 4,
right: 4,
left: 4,
child: Container(
color: Colors.grey,
height: 180,
alignment: Alignment.center,
child: Text('Feed $index card'),
),
),
Positioned(
bottom: 12,
right: 12,
left: 12,
child: Text(placeHolderText.substring(0, 200)))
],
),
);
}
}
class FeedDetail extends StatelessWidget {
final String feedId;
const FeedDetail({Key? key, this.feedId = '1'}) : super(key: key);
static const String route = '/feeds/detail';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Feed $feedId'),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: const [
Placeholder(
fallbackHeight: 200,
fallbackWidth: 300,
),
Text(placeHolderText),
],
),
),
),
);
}
}
class ProductList extends StatefulWidget {
const ProductList({Key? key}) : super(key: key);
static const String route = '/';
@override
State<ProductList> createState() => _ProductListState();
}
class _ProductListState extends State<ProductList> {
final _scrollController = ScrollController();
@override
void didChangeDependencies() {
super.didChangeDependencies();
size = MediaQuery.of(context).size;
if (size.width < 600) {
_addScrollListener();
}
}
void handleScroll() {
if (size.width > 600) return;
if (_scrollController.position.userScrollDirection ==
ScrollDirection.forward) {
if (NavbarNotifier.isNavbarHidden) {
NavbarNotifier.hideBottomNavBar = false;
}
} else {
if (!NavbarNotifier.isNavbarHidden) {
NavbarNotifier.hideBottomNavBar = true;
}
}
}
void _addScrollListener() {
_scrollController.addListener(handleScroll);
}
Size size = Size.zero;
@override
void dispose() {
_scrollController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Products'),
),
body: ListView.builder(
controller: _scrollController,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
onTap: () {
NavbarNotifier.hideBottomNavBar = false;
navigate(context, ProductDetail.route,
isRootNavigator: false,
arguments: {'id': index.toString()});
},
child: ProductTile(index: index)),
);
}),
);
}
}
class ProductTile extends StatelessWidget {
final int index;
const ProductTile({Key? key, required this.index}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 12),
color: Colors.grey.withOpacity(0.5),
height: 120,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
margin: const EdgeInsets.all(8),
height: 75,
width: 75,
color: Colors.grey,
),
Text('Product $index'),
],
));
}
}
class ProductDetail extends StatelessWidget {
final String id;
const ProductDetail({Key? key, this.id = '1'}) : super(key: key);
static const String route = '/products/detail';
@override
Widget build(BuildContext context) {
final args = ModalRoute.of(context)!.settings.arguments as Map;
final argsId = args['id'];
return Scaffold(
appBar: AppBar(
title: Text('Product $argsId'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('My AWESOME Product $argsId'),
const Center(
child: Placeholder(
fallbackHeight: 200,
fallbackWidth: 300,
),
),
TextButton(
onPressed: () {
NavbarNotifier.hideBottomNavBar = false;
navigate(context, ProductComments.route,
isRootNavigator: false,
arguments: {'id': argsId.toString()});
},
child: const Text('show comments'))
],
),
);
}
}
class ProductComments extends StatelessWidget {
final String id;
const ProductComments({Key? key, this.id = '1'}) : super(key: key);
static const String route = '/products/detail/comments';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Comments on Product $id'),
),
body: ListView.builder(itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
height: 60,
child: ListTile(
tileColor: Colors.grey.withOpacity(0.5),
title: Text('Comment $index'),
),
),
);
}),
);
}
}
class UserProfile extends StatelessWidget {
static const String route = '/';
const UserProfile({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: false,
actions: [
IconButton(
icon: const Icon(Icons.edit),
onPressed: () {
navigate(context, ProfileEdit.route, isRootNavigator: false);
},
)
],
title: const Text('Hi User')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text('Hi My Name is'),
SizedBox(
width: 10,
),
SizedBox(
width: 100,
child: TextField(
decoration: InputDecoration(),
),
),
],
),
const SizedBox(
height: 24,
),
ElevatedButton(
onPressed: () {
NavbarNotifier.popRoute(1);
},
child: const Text('Pop Product Route')),
],
),
),
);
}
}
class Settings extends StatefulWidget {
const Settings({super.key});
@override
State<Settings> createState() => _SettingsState();
}
class _SettingsState extends State<Settings> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Settings'),
),
body: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return ListTile(
title: Text('Setting $index'),
);
}),
);
}
}
class ProfileEdit extends StatelessWidget {
static const String route = '/profile/edit';
const ProfileEdit({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Profile Edit')),
body: const Center(
child: Text('Notice this page does not have bottom navigation bar'),
),
);
}
}