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

A Responsive navigation bar for web applications. This Pakage dynamically changes from a navbar to a side drawer depending on the dimensions of the screen.

example/lib/main.dart

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.red[100],
                ),
                indicatorLineThickness: 4,
               backgroundColor: Colors.transparent,
                extendBodyBehindAppBar: true,
                drawerMode: NavDrawerMode.full,
                pageIndicator: PageIndicator.line,
                itemPosition: NavItemPosition.right,
                drawerHeader: Container(),
                navTextStyle: const TextStyle(fontSize: 13, color: Colors.grey),
                drawerFooter: Container(
                  height: 20,
                  color: Colors.grey[200],
                ),
                leading: const Text(
                  "Logo",
                  style: TextStyle(color: Colors.red, fontSize: 30),
                ),
                navItemSpacing: 8,
                navItems: [
                  NavItem(
                      icon: Icons.home,
                      relativeIndex: 0,
                      label: "Home",
                      activeColor: Colors.blue,
                      onTap: () {}),
                  NavItem(
                      relativeIndex: 1,
                      //minimized: true,
                      iconSize: 19,
                      icon: Icons.extension,
                      label: "About us asdhgasjda sdasdh asdsajh",
                      activeColor: Colors.blue,
                      onTap: () {}),
                  NavItem(
                      relativeIndex: 2,
                      label: "Contact us",
                      activeColor: Colors.blue,
                      onTap: () {}),
                ]).getNavBar(
                DeviceType.desktop.currentDevice(constraints.maxWidth));
          },
        ));
  }
}
6
likes
80
pub points
32%
popularity

Publisher

unverified uploader

A Responsive navigation bar for web applications. This Pakage dynamically changes from a navbar to a side drawer depending on the dimensions of the screen.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

auto_size_text, flutter

More

Packages that depend on ruki_nav_bar