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

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'),
    ),
  ),
);