An easy to use side menu in flutter and can used for navigations

Overview

Easy Sidemenu

logo
GitHub Pub Version GitHub repo size

Easy sidemenu is An easy to use side menu (bar) for flutter that you can use for navigations in your application.

Sidemenu is a menu that is usually located on the left or right of the page and can used for navigations or other things. Sidemenu is similar to bottom navigation bar but in the side of screen and usually used for larger screens.

Screenshots

Open Compact
Open Compact
Auto
Auto

Demo

You can see web demo here: https://jamalianpour.github.io/easy_sidemenu

Usage

1. add dependencies into you project pubspec.yaml file
dependencies:
  easy_sidemenu: ^0.1.1+1

Run flutter packages get in the root directory of your app.

2. import easy sidemenu lib
import 'package:easy_sidemenu/easy_sidemenu.dart';

Now you can use SideMenu as a widget in your code.

3. use SideMenu

At first you should defind a list of item that will displayed on SideMenu:

List<SideMenuItem> items = [
  SideMenuItem(
    // Priority of item to show on SideMenu, lower value is displayed at the top
    priority: 0,
    title: 'Dashboard',
    onTap: () => page.jumpToPage(0),
    icon: Icons.home,
  ),
  SideMenuItem(
    priority: 1,
    title: 'Settings',
    onTap: () => page.jumpToPage(1),
    icon: Icons.settings,
  ),
  SideMenuItem(
    priority: 2,
    title: 'Exit',
    onTap: () {},
    icon: Icons.exit_to_app,
  ),
];
priority rule:
  • Priority should start from 0
  • Priority value should be unique

After that you need to warp your main page to a row and then add SideMenu as first child of that, like below:

PageController page = PageController();
Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    SideMenu(
      // page controller to manage a PageView
      controller: page,
      // will shows on top of all items, it can be a logo or a Title text
      title: Image.asset('assets/images/easy_sidemenu.png'),
      // will show on bottom of SideMenu when displayMode was SideMenuDisplayMode.open
      footer: Text('demo'),
      // List of SideMenuItem to show them on SideMenu
      items: items,
    ),
    Expanded(
      child: PageView(
        controller: page,
        children: [
          Container(
            child: Center(
              child: Text('Dashboard'),
            ),
          ),
          Container(
            child: Center(
              child: Text('Settings'),
            ),
          ),
        ],
      ),
    ),
  ],
),

Style

you can change style of side menu with SideMenuStyle :

style: SideMenuStyle(
  displayMode: SideMenuDisplayMode.auto,
  openSideMenuWidth: 200,
  compactSideMenuWidth: 40,
  hoverColor: Colors.blue[100],
  selectedColor: Colors.lightBlue,
  selectedIconColor: Colors.white,
  unselectedIconColor: Colors.black54,
  backgroundColor: Colors.grey
  selectedTitleTextStyle: TextStyle(color: Colors.white),
  unselectedTitleTextStyle: TextStyle(color: Colors.black54),
  iconSize: 20,
),

Style Props

props types description
displayMode SideMenuDisplayMode? SideMenuDisplayMode.auto, SideMenuDisplayMode.open, SideMenuDisplayMode.compact
openSideMenuWidth double? Width of SideMenu when displayMode was SideMenuDisplayMode.open
compactSideMenuWidth double? Width of SideMenu when displayMode was SideMenuDisplayMode.compact
hoverColor Color? Color of SideMenuItem when mouse hover on that
selectedColor Color? Background color of SideMenuItem when item is selected
selectedIconColor Color? Color of icon when item is selected
unselectedIconColor Color? Color of icon when item is unselected
backgroundColor Color? Background color of SideMenu
selectedTitleTextStyle TextStyle? Style of title text when item is selected
unselectedTitleTextStyle TextStyle? Style of title text when item is unselected
iconSize double? Size of icon on SideMenuItem

Feel free to fork this repository and send pull request 🏁 πŸ‘

Releases(0.1.1+1)
Let's create a Flutter Collapsible Sidebar Menu that can collapse and expand the Navigation Drawer in Flutter.

Flutter Tutorial - Collapsible Sidebar Menu & Navigation Drawer Let's create a Flutter Collapsible Sidebar Menu that can collapse and expand the Navig

Johannes Milke 10 Oct 30, 2021
An application built using Flutter that can be used while playing board games if actual or physical dice is missing . This is a dual dice application.

diceee_utter A new Flutter application. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

dev_allauddin 4 Nov 17, 2021
Wired Elements is a series of basic UI Elements that have a hand drawn look. These can be used for wireframes, mockups, or just the fun hand-drawn look.

wired_elements Wired Elements is a series of basic UI Elements that have a hand drawn look. These can be used for wireframes, mockups, or just the fun

Kevin Zhang 13 Nov 6, 2021
Let's create a selectable Flutter Navigation Drawer with routing that highlights the current item within the Flutter Sidebar Menu.

Flutter Tutorial - Sidebar Menu & Selectable Navigation Drawer Let's create a selectable Flutter Navigation Drawer with routing that highlights the cu

Johannes Milke 8 Oct 31, 2021
🍝 restaurant menu app made with flutter inspired by this design https://goo.gl/jChLBV

Menu Flutter Todo Make background colors that changes with PageView Add custom tab indicators Change food prices Make cart animation Customize card sh

Braulio Cassule 551 Nov 30, 2021
Create a Flutter User Profile Page UI where you can access and edit your user's information within your Flutter app.

Flutter Tutorial - User Profile Page UI 1/2 Create a Flutter User Profile Page UI where you can access and edit your user's information within your Fl

Johannes Milke 17 Nov 21, 2021
Create a Flutter User Profile Page UI where you can access and edit your user's information within your Flutter app.

Flutter Tutorial - User Profile Page UI #2 Create a Flutter User Profile Page UI where you can access and edit your user's information within your Flu

Johannes Milke 13 Nov 9, 2021
Today we will show you how you can create your developer portfolio website and app using flutter.

Responsive and Animated Portfolio Website & App - Flutter UI Live Preview Watch it on YouTube Packages we are using: flutter_svg: link goole_fonts: li

Abu Anwar 138 Nov 25, 2021
Easy form building in Flutter with a fluent schema API.

former - Easy form building in Flutter Motivation Formik is one of my favorite React libraries. It is a form library that drastically reduces boilerpl

Kenneth 17 Sep 23, 2021
Flutter Easy Getx Implementations .

Flutter Easy GetX Description People ask me how I manage state,dependency,routes etc when I work with flutter,Here is the Simple Brief About GetX whic

Tasnuva Tabassum oshin 12 Nov 19, 2021
A weather app built to learn how to use Canvas and Animation in Flutter.

Weather Quick Disclaimer I removed my private OpenWeather API key from the repo, if you want to get the weather forecast use your own in the openweath

Alessandro Aime 141 Oct 28, 2021
Making Appwrite Authentication Easy

FlAppwrite Account Kit A Flutter wrapper for Appwrite's Accounts service, makes it easy to use manage authentication and account features. Under devel

Damodar Lohani 14 Oct 26, 2021
A wrapper around Navigator 2.0 and Router/Pages to make their use a easier.

APS Navigator - App Pagination System This library is just a wrapper around Navigator 2.0 and Router/Pages API that tries to make their use easier: ??

Guilherme Silva 13 Oct 17, 2021
Readky is a Free Flutter News App Starter Template that can help you develop a News application much faster.

Readky. Introduction Readky is a Free Flutter News App Starter Template that can help you develop a News application much faster. You just need to add

Muhammad Rezky Sulihin 36 Oct 26, 2021
πŸš— Apple CarPlay for Flutter Apps. Aims to make it safe to use apps made with Flutter in the car by integrating with CarPlay.

CarPlay with Flutter ?? Flutter Apps now on Apple CarPlay! flutter_carplay aims to make it safe to use iPhone apps made with Flutter in the car by int

Oğuzhan Atalay 82 Nov 20, 2021
A set of real world timelines to showcase the use of timeline_tile package, built with Flutter.

beatiful_timelines Beautiful timelines built with Flutter and timeline_tile. Current examples: Timeline Showcase Football Timeline Activity Timeline S

null 184 Nov 22, 2021
Flutter application to demonstrate use of mPin Animation with custom widget.

Flutter mPin Animation | Custom Widget mPin Widget to accept user input with nice animation. Tutorial ???????????? Flutter mPin Animation Tutorial ||

Afzal Ali 10 Jul 28, 2021
Codeflow 17 Oct 16, 2021