ruki_nav_bar 0.0.10-dev ruki_nav_bar: ^0.0.10-dev copied to clipboard
A Responsive navigation bar for web applications. This Pakage let's dynamically changes from a navbar to a side drawer depending on the dimensions of the screen. Very custumisable Please look at the e [...]
This Package makes it easy for you to create a responsive web app by handling the navigation bar for you, There's a tonne of customization options, and we'll continue to support improvements and more features.
desktop nav_bar
mobile nav_bar
mobile drawer menu (full mode)
Usage #
Find an example for package usage inside the /example
folder.
import 'package:flutter/material.dart';
import 'package:ruki_nav_bar/ruki_nav_bar.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Demo',
debugShowCheckedModeBanner: false,
home: LayoutBuilder(
builder: (_,constraints){
return SiteNavBar.get(
body: Container(
color: Colors.grey[100],
),
indicatorLineThickness: 4,
drawerMode: NavDrawerMode.full,
pageIndicator: PageIndicator.outlined,
itemPosition: NavItemPosition.right,
drawerHeader: Container(),
drawerFooter: Container(height: 50,color: Colors.grey[200],),
leading: const Text("Logo",style: TextStyle(color: Colors.red,fontSize: 30),),
navItemSpacing: 8,
navItems: [
NavItem(relativeIndex: 0, label: "Home", activeColor: Colors.blue, onTap: (){}),
NavItem(relativeIndex: 1, label: "About us",activeColor: Colors.blue, onTap: (){}),
NavItem(relativeIndex: 2, label: "Contact us",activeColor: Colors.blue, onTap: (){}),
]
).getNavBar(DeviceType.desktop.currentDevice(constraints.maxWidth));
},
)
);
}
}
API Reference #
Name | Object-type |
---|---|
type | DeviceType |
height | double |
title | Widget |
itemsPosition | NavItemPosition |
enableDrawer | bool |
MAX_PAGE_WIDTH | double |
titleText | String |
backgroundColor | Color |
leading | Widget |
items | List |
actions | List |
fab | Widget |
showFab | bool |
navItemSpacing | double |
pageIndicator | double |
indicatorLineThickness | double |
customDecoration | ShapeDecoration |
drawerHeader | Widget |
drawerBody | Widget |
drawerFooter | Widget |