flutter_side_menu

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

Flutter サイドメニューは、Flutter アプリケーション向けに設計された完全にカスタマイズ可能なサイドナビゲーションコンポーネントです。ナビゲーションメニュー、フィルターパネル、関連ページディレクトリなど、さまざまな用途に対応しています。柔軟性を重視して構築されており、Android、iOS、Web、macOS、Windows、Linux プラットフォームすべてにシームレスに統合可能です。このパッケージでは、開発者がアプリ固有のニーズに合わせてメニューの外観や動作をカスタマイズでき、直感的なナビゲーションによりユーザー体験を向上させます。軽量な設計とレスポンシブレイアウトにより、構造的でアクセスしやすいサイドベースインターフェースを必要とするアプリに最適です。

用途

ナビゲーションメニュー
フィルターパネル
関連ページディレクトリ
ダッシュボードレイアウト
設定ナビゲーション
コンテンツの分類

主な機能

完全にカスタマイズ可能なデザイン
クロスプラットフォーム対応
レスポンシブレイアウト
簡単な統合
カスタマイズ可能なアニメーション
拡張可能な構造

適している対象

複雑なナビゲーションを持つアプリ
ダッシュボードインターフェース
モバイルおよびウェブアプリ
管理パネル
ユーザー設定セクション

注意事項

高度なカスタマイズには手動のスタイル設定が必要です
限定された組み込みテーマ
追加の状態管理が必要になる可能性があります
非常に大きなアイテムリストには最適化されていません
親ウィジェットコンテキストに依存する

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

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'),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );

パッケージ、リポジトリ、アプリカテゴリを検索

パッケージをインストール