collapsible_sidebar

A collapsible sidebar for Flutter apps implementing the Material Design.

🌟 Version 2.0.5+1 ✨

Features

• Material Design
• Pre-built customizable tile widgets (CollapsibleItems)
• Smooth Animation
• Supports both LTR & RTL languages
• Supports MULTI-LEVEL Menu

Supported platforms

• Flutter Android
• Flutter iOS
• Flutter web
• Flutter desktop

Contributors

A big thank you to all the contributors without whom this project would be impossible to maintain and enhance. 👏👏👏

Live preview

https://drunkonbytes.github.io/flutter_collapsible_sidebar

Note: this page is built with flutter-web. For a better user experience, please use a mobile device to open this link.

Installation

Add collapsible_sidebar: ^2.0.5+1 to your pubspec.yaml dependencies. And import it:

import 'package:collapsible_sidebar/collapsible_sidebar.dart';

How to use

1. Create a list of CollapsibleItems named _items (or whatever fancy name you like)

For a collapsible item with sub-items to be the default selected item MARK ALL OF ITS SUB-ITEMS WITH THE isSelected: true property.

List<CollapsibleItem> get _items {
    return [
      CollapsibleItem(
          text: 'Shop',
          iconImage: AssetImage("assets/shop_icon.png"), //`iconImage` has priority over `icon` property
          icon: Icons.ac_unit,
          onPressed: () => setState(() => _headline = 'Shop'),
          onHold: () => ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: const Text("Shop"))
          ),
          isSelected: true,
          subItems: [
            CollapsibleItem(
              text: 'Cart',
              icon: Icons.shopping_cart,
              onPressed: () => setState(() => _headline = 'Cart'),
              onHold: () => ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: const Text("Cart"))
              ),
              isSelected: true,
            )
          ]
      ),
      CollapsibleItem(
        text: 'Dashboard',
        icon: Icons.assessment,
        onPressed: () => setState(() => _headline = 'DashBoard'),
        onHold: () => ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: const Text("DashBoard"))
        ),
      ),
      CollapsibleItem(
        text: 'Ice-Cream',
        icon: Icons.icecream,
        onPressed: () => setState(() => _headline = 'Ice-Cream'),
        onHold: () => ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: const Text("Ice-Cream"))
        ),
      ),
      CollapsibleItem(
        text: 'Search',
        icon: Icons.search,
        onPressed: () => setState(() => _headline = 'Search'),
        onHold: () => ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: const Text("Search"))
        ),
      ),
    ];
  }

2. Define the body of the app (the widget where the main working of the app will be) and name it say _body.

Widget _body(Size size, BuildContext context) {
    return Container(
      height: double.infinity,
      width: double.infinity,
      color: Colors.blueGrey[50],
      child: .........,
    );
  }

3. Finally completely define the CollapsibleSidebar widget by adding the list of CollapsibleItems named _items, the body of the app named _body and the customizable parameters as needed:

CollapsibleSidebar(
  items: _items,
  avatarImg: _avatarImg,
  title: 'John Smith',
  body: _body(size, context),
)

Also you can use the isCollapsed condition depending how you want the state of the sidebar to change (collapsed/expanded) for example [size.width]

CollapsibleSidebar(
  isCollapsed: MediaQuery.of(context).size.width <= 800,
  items: _items,
  avatarImg: _avatarImg,
  title: 'John Smith',
  body: _body(size, context),
)

Parameters (customizable attributes)

License

Apache 2.0