flutter_side_menu 0.5.41
SDKflutter
Platformandroidioswindowslinuxmacosweb
Flutter's full customizable side menu has been used as a directory for Related Pages, Navigation Items, Filter side and more
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}
Add the following imports to your Dart code
import 'package:flutter_side_menu/flutter_side_menu.dart';
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'),
),
),
],
),
),
),
),
);