responsive_navigation 1.0.0

Get your awesome app to work on all devices with this responsive navigation library.

Responsive Navigation

Get your awesome app to work on all devices with this responsive navigation library.

---

Normal Responsive Navigation	Navigation Under AppBar

For Very large Screens	Slim Navigation all the Time

Crowded Navigation	Scrollable Vertical Navigation

Getting started

Add to Dependencies

responsive_navigation: ^1.0.0

Import the package

import 'package:responsive_navigation/responsive_navigation.dart';

Usage

Simple Responsive Navigation

ResponsiveNav(
  items: [
    NavItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    NavItem(
      icon: Icon(Icons.search),
      label: 'Search',
    ),
    NavItem(
      icon: Icon(Icons.settings),
      label: 'Settings',
    ),
  ],
  child: Scaffold(
    body: Center(
      child: Text('Hello World'),
    ),
  ),
);

Customized Responsive Navigation

ResponsiveNav(
  items: [
    NavItem(icon: const Icon(Icons.home), label: 'Home'),
    NavItem(icon: const Icon(Icons.search), label: 'Search'),
    NavItem(icon: const Icon(Icons.person), label: 'Account'),
    NavItem(icon: const Icon(Icons.shopping_cart), label: 'Cart'),
    NavItem(icon: const Icon(Icons.settings), label: 'Settings'),
    NavItem(icon: const Icon(Icons.logout), label: 'Logout'),
    NavItem(icon: const Icon(Icons.help), label: 'Help'),
  ],
  navStyle: NavStyle(
    elevation: 5,
    verticalDivider: VerticalDivider(
      color: Colors.grey.shade300,
      width: 1,
      thickness: 1,
    ),
    indicatorColor: Colors.yellow,
    labelType: NavigationLabelType.showAll,
    backgroundColor: Colors.deepPurple,
  ),
  child: Scaffold(
    body: Center(
      child: Text('Hello World'),
    ),
  ),
);