GitLocker: The Coding Marketplace

Description:

flutter side menu

Flutter Side Menu

Flutter's full customizable side menu has been used as a directory for Related Pages, Navigation Items, Filter side and more.
Flutter Side Menu Screenshots

Navigation Side

Filter Side

Usage #
Add dependency #
Please check the latest version before installation.
If there is any problem with the new version, please use the previous version
dependencies:
flutter:
sdk: flutter
# add flutter_side_menu
flutter_side_menu: ^{latest version}
copied to clipboard
Add the following imports to your Dart code #
import 'package:flutter_side_menu/flutter_side_menu.dart';
copied to clipboard
Property #

Property
Type
Default Value
Description

builder
SideMenuBuilder
null
Return 'SideMenuData' that includes headers, footers, items, or custom child

controller
SideMenuController
null
The 'controller' that can be used to open, close, or toggle side menu.

mode
SideMenuMode
SideMenuMode.auto
The 'SideMenuMode' which is auto, open or compact and can determine the menu state

priority
SideMenuPriority
SideMenuPriority.mode
The 'SideMenuPriority' which is mode or sizer. in sizer mode the side menu width not change if user set custom size with 'Resizer'

position
SideMenuPosition
SideMenuPosition.left
The 'SideMenuPosition' which is left or right.

minWidth
double
50.0
The 'minWidth' value is used to determine the side menu width in the smallest case.

maxWidth
double
250.0
The 'maxWidth' value is used to determine the side menu width in the largest case.

hasResizer
bool
true
The 'hasResizer' enable 'Resizer' widget for side menu. With 'Resizer' the side menu width can be customized by the user.

resizerData
ResizerData
ResizerData()
The 'ResizerData' that can set custom style for a 'Resizer'.

hasResizerToggle
bool
true
The 'hasResizerToggle' enable 'ResizerToggle' widget for side menu. With 'ResizerToggle' button you can toggle the width of the side menu between 'minWidth' or 'maxWidth'.

resizerToggleData
ResizerToggleData
ResizerToggleData()
The 'resizerToggleData' that can set custom style for a 'ResizerToggle'.

backgroundColor
Color
Color(0xffffffff)
The 'backgroundColor' it's used to determine the side menu background color

Example #
import 'package:flutter/material.dart';
import 'package:flutter_side_menu/flutter_side_menu.dart';

void main() => runApp(
MaterialApp(
home: Material(
child: Scaffold(
body: Row(
children: [
SideMenu(
builder: (data) => SideMenuData(
header: const Text('Header'),
items: [
SideMenuItemDataTile(
isSelected: true,
onTap: () {},
title: 'Item 1',
icon: const Icon(Icons.home),
),
],
footer: const Text('Footer'),
),
),
Expanded(
child: Container(
color: Colors.white,
child: const Center(
child: Text(
'body',
),
),
),
),
SideMenu(
position: SideMenuPosition.right,
builder: (data) => const SideMenuData(
customChild: Text('Custom view'),
),
),
],
),
),
),
),
);
copied to clipboard