ruki_nav_bar 0.0.10-dev copy "ruki_nav_bar: ^0.0.10-dev" to clipboard
ruki_nav_bar: ^0.0.10-dev copied to clipboard

outdated

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. img1

desktop nav_bar

img1

mobile nav_bar

img1

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
6
likes
0
pub points
26%
popularity

Publisher

unverified uploader

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 example to see usage.

Repository (GitHub)
View/report issues

License

unknown (license)

Dependencies

auto_size_text, flutter

More

Packages that depend on ruki_nav_bar