simple_sidebar

패키지 개요

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

플러터 애플리케이션용 가볍고 사용하기 쉬운 사이드바 컴포넌트로 아이콘, 텍스트 레이블, 헤더 및 부드러운 애니메이션을 지원합니다. 최소한의 설정으로 네비게이션 기능이 필요한 앱에 빠르게 통합할 수 있도록 설계되었습니다. 대시보드, 관리 패널 또는 깔끔하고 반응형 사이드바가 필요한 모든 인터페이스에 적합합니다. 이 패키지는 모바일, 웹, 데스크톱을 포함한 모든 주요 플랫폼을 지원하여 장치 간 일관된 동작을 보장합니다.

사용 사례

대시보드 탐색
관리자 패널 인터페이스
모바일 및 데스크톱 앱 탐색
반응형 UI 레이아웃
빠른 사이드바 구현

주요 기능

부드러운 애니메이션
아이콘 및 텍스트 지원
헤더 섹션
최소 구성
크로스 플랫폼 호환성

적합한 대상

초보자 플러터 개발자
간단한 탐색 요구 사항
빠른 프로토타이핑
클린한 UI 디자인
다중 플랫폼 앱

고려 사항

제한된 사용자 지정 옵션
내장된 다크 모드 없음
복잡한 탐색 구조에 적합하지 않습니다
고급 디자인을 위해서는 수동 스타일링이 필요합니다
업데이트를 위해 외부 저장소에 의존합니다

원본 README

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

Simple and quick to set up sidebar. Soft animations

Features

Getting started

Just add the package to pubspec.yaml and start using it.

Usage

Create Theme & Controller and List of the Item you want to have in the Sidebar

final SimpleSidebarTheme theme = SimpleSidebarTheme()
    ..expandedShape = const BorderRadius.all(Radius.circular(8))
    ..collapsedShape = const BorderRadius.all(Radius.circular(8));
  final List<SimpleSidebarItem> sidebarItems = [
    SimpleSidebarItem(onTap: () {}, title: "Home", leading: Icons.home_outlined),
    SimpleSidebarItem(onTap: () {}, title: "Gallery", leading: Icons.image_outlined),
    SimpleSidebarItem(onTap: () {}, title: "Users", leading: Icons.group_outlined),
    SimpleSidebarItem(onTap: () {}, title: "Extra long name for a menu item", leading: Icons.list),
  ];
  final List<SimpleSidebarItem> footerItems = [
    SimpleSidebarItem(onTap: () {}, title: "Settings", leading: Icons.settings),
    SimpleSidebarItem(onTap: () {}, title: "Logout", leading: Icons.close),
  ];

After this create the Scaffold with the lists

Scaffold(
  backgroundColor: kcBackground,
  body: Row(
    children: [
      SimpleSidebar(
        theme: widget.theme,
        initialExpanded: true,
        initialIndex: 1,
        childrens: widget.sidebarItems,
        footerItems: widget.footerItems,
        onTap: (value) {
          setState(() {
            selected = value;
          });
          log("selected value $value");
        },
      ),
      Expanded(
        child: AnimatedOpacity(
          opacity: isVisible ? 1 : 0,
          duration: const Duration(milliseconds: 300),
          child: Container(
              margin: const EdgeInsets.all(8),
              child: const <Widget>[
                Text("hallo"),
                Text("hallo2"),
                Text("hallo3"),
                Text("hallo4"),
                Text("hallo5"),
                Text("hallo6"),
              ][selected]),
        ),
      ),
    ],
  ),
);

Additional information

Should there be any questions, wishes mail me: [Contact](mailto:support@glocknerstudios.at)

create an issue on GitHub for bugs. And now have fun with the sidebar

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

패키지 설치