Responsive Navigation

A HOLISTIC approach to get your Bleeding Edge flutter app to work on all devices.

---

Normal Responsive Navigation	Navigation Under AppBar

For Very large Screens	Slim Navigation all the Time

Crowded Navigation	Scrollable Side Navigation

Getting started

Add to Dependencies

responsive_navigation: ^1.1.0

Import the package

import 'package:responsive_navigation/responsive_navigation.dart';

Usage

Normal 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(
    appBar: AppBar(
      title: Text('Normal Responsive Navigation'),
    ),
    body: Center(
      child: Text('Hello World'),
    ),
  ),
);

Navigation Under AppBar

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

Slim Navigation all the Time

ResponsiveNav(
  items: [
    NavItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    NavItem(
      icon: Icon(Icons.search),
      label: 'Search',
    ),
    NavItem(
      icon: Icon(Icons.settings),
      label: 'Settings',
    ),
  ],
  shouldExtend: false,
  child: Scaffold(
    appBar: AppBar(
      title: Text('Slim Navigation all the Time'),
    ),
    body: Center(
      child: Text('Hello World'),
    ),
  ),
);

Crowded 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'),
  ],
  child: Scaffold(
    appBar: AppBar(
      title: Text('Crowded Navigation'),
    ),
    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'),
    ),
  ),
);

If you liked the package, then please give it a Like 👍🏼 and Star ⭐

Libraries

responsive_navigation

A library to make your app's navigation responsive and easy.