可折叠侧边栏

一个用于实现 Material Design 的 Flutter 应用的可折叠侧边栏。

collapsible_sidebar

特点

  • Material Design
  • 预先构建的可自定义磁贴小部件（CollapsibleItems）
  • 流畅的动画

支持的平台

  • Flutter Android
  • Flutter iOS
  • Flutter Web
  • Flutter 桌面

实时预览

https://ryuukenshi.github.io/collapsible_sidebar

注意：此页面是用 flutter-web 构建的。为了获得更好的用户体验，请使用移动设备打开此链接。

安装

将 collapsible_sidebar: ^1.0.5 添加到您的 pubspec.yaml 依赖项中。然后导入它

import 'package:collapsible_sidebar/collapsible_sidebar.dart';

如何使用

只需创建一个 CollapsibleSidebar 小部件和一系列 CollapsibleItems，假设为 _items。最后，向 CollapsibleSidebar 添加必需的参数和一个 body 小部件，假设为 _body，它将占用剩余屏幕

CollapsibleSidebar(
  items: _items,
  avatarImg: _avatarImg,
  title: 'John Smith',
  body: _body,
)

参数


CollapsibleSidebar(
    items: _items,
    title: 'Lorem Ipsum',
    avatarImg: NetworkImage('https://w3schools.org.cn/howto/img_avatar.png'),
    body: _body,
    height: double.infinity,
    minWidth: 80,
    maxWidth: 270,
    borderRadius: 15,
    iconSize: 40,
    textSize: 20,
    toggleButtonIcon: Icons.chevron_right,
    backgroundColor: Color(0xff2B3138),
    selectedIconBox: Color(0xff2F4047),
    selectedIconColor: Color(0xff4AC6EA),
    selectedTextColor: Color(0xffF3F7F7),
    unselectedIconColor: Color(0xff6A7886),
    unselectedTextColor: Color(0xffC0C7D0),
    duration: Duration(milliseconds: 500),
    curve: Curves.fastLinearToSlowEaseIn,
    screenPadding: 4,
    showCollapseButton: true,
)

GitHub

https://github.com/RyuuKenshi/flutter_collapsible_sidebar