sidenavbar 0.0.10

An easy to use web styled sidebar for navigation

SideNavBar

This flutter package helps you create web styled side navigation. Its short and easy to use.

How to use

1) Installation

1. Depend on it Add this to your package's pubspec.yaml file:

dependencies:
  sidenavbar: ^0.0.2

2. Install it You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it Now in your Dart code, you can use:

import 'package:sidenavbar/sidenavbar.dart';

2) Usage

Recommend to use directly under home property of your MaterialApp(). Here are some properties it takes: * marked are required property

1. * (bool) isCollapsed : Accepts boolean to make the Side navigation bar aware when to collapse and when to expand.
2. (Color) backgroundColor : Sets background color for side navigation bar. Default is set to Colors.blueGrey
3. (CrossAxisAlignment) crossAxisAlignment : Aligns the navigator elements horizontally. Default is set to CrossAxisAlignment.center
4. (MainAxisAlignment) mainAxisAlignment : Aligns the navigator elements vertically. Default is set to MainAxisAlignment.start
5. * (Widget) currentItem : Accepts a widget and lets the Side nav bar know about current performing widget.
6. * (List) navItems : Accepts a List of widgets that act as items for Side nav bar.
7. * (CollapseIcon) collapseIcon : Accepts a CollapseIcon widget that sets the icon for collapse indicator

Code:

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Widget currentItem = Examplepage1();
  bool isCollapsed = false;

  void show(Widget widget) {
    setState(() {
      currentItem = widget;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SideBar(
        backgroundColor: Colors.blueGrey.shade900,
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        isCollapsed: isCollapsed,
        collapseIcon: CollapseIcon(
          isCollapsed: isCollapsed,
          icon: Icon(
            Icons.arrow_back,
            color: Colors.white,
          ),
          onPressed: () {
            setState(() {
              isCollapsed = !isCollapsed;
            });
          },
        ),
        currentItem: currentItem,
        navItems: [
          NavItem(
            hoverColor: Colors.red,
            title: Text(
              "Tab 1",
              style: TextStyle(color: Colors.white),
            ),
            icon: Icon(
              Icons.call,
              color: Colors.white,
            ),
            isCollapsed: isCollapsed,
            onPressed: () {
              show(Examplepage1());
            },
          ),
          NavItem(
            hoverColor: Colors.blueAccent,
            title: Text("Tab 2", style: TextStyle(color: Colors.white)),
            icon: Icon(
              Icons.person,
              color: Colors.white,
            ),
            isCollapsed: isCollapsed,
            onPressed: () {
              show(Examplepage2());
            },
          ),
        ],
      ),
    );
  }
}

* Important: Yes navItems can have any type of widget, but for collapsing to work properly try to use NavItem() widget or if you still want to go with your choice of widget try to use boolean isCollapsed to let the navigator know what to collapse and what to keep. example:

ListTile(
leading: Icon(Icons.call),
title: isCollapsed ? null : Text("When not Collapsed"),
)

License

MIT