패키지, 저장소 및 앱 카테고리 검색

flutter_side_menu 표지
패키지 상세v0.5.41

flutter_side_menu

Flutter의 완전히 사용자 정의 가능한 사이드 메뉴는 관련 페이지, 탐색 항목, 필터 사이드 등에 대한 디렉토리로 사용되었습니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
2만
좋아요
184
Pub 점수
130

패키지 설치

flutter pub add flutter_side_menu

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

Flutter 사이드 메뉴는 Flutter 애플리케이션을 위한 완전히 사용자 정의 가능한 사이드 네비게이션 컴포넌트입니다. 탐색 메뉴, 필터 패널 및 관련 페이지 디렉토리와 같은 다양한 용도를 지원합니다. 유연성을 고려하여 제작되었으며 Android, iOS, Web, macOS, Windows, Linux 플랫폼에서 원활하게 통합됩니다. 개발자는 앱의 특정 요구 사항에 맞게 메뉴의 외관과 동작을 조정할 수 있으며 직관적인 탐색을 통해 사용자 경험을 향상시킬 수 있습니다. 가벼운 설계와 반응형 레이아웃으로 구조적이고 접근성 있는 사이드 기반 인터페이스가 필요한 앱에 이상적입니다.

사용 사례

  • 내비게이션 메뉴
  • 필터 패널
  • 관련 페이지 디렉터리
  • 대시보드 레이아웃
  • 설정 탐색
  • 콘텐츠 분류

주요 기능

  • 완전히 사용자 정의 가능한 디자인
  • 크로스 플랫폼 지원
  • 반응형 레이아웃
  • 간편한 통합
  • 사용자 정의 애니메이션
  • 확장 가능한 구조

적합한 대상

  • 복잡한 탐색을 가진 앱
  • 대시보드 인터페이스
  • 모바일 및 웹 앱
  • 관리 패널
  • 사용자 설정 섹션

고려 사항

  • 고급 사용자 정의를 위해 수동 스타일링이 필요합니다
  • 제한된 내장 테마
  • 추가 상태 관리가 필요할 수 있습니다
  • 매우 큰 항목 목록에 최적화되지 않음
  • 부모 위젯 컨텍스트에 의존

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

Flutter Side Menu

logo
GitHub Pub Version GitHub repo size

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

카테고리

의존성

의존성 목록 1 개

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.