simple_sidebar

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个轻量级且易于使用的 Flutter 应用侧边栏组件，支持图标、文本标签、标题和流畅的动画效果。专为快速集成到需要导航功能但设置简单的应用而设计。适用于仪表板、管理面板或任何需要简洁、响应式侧边栏的界面。该包支持所有主要平台，包括移动设备、网页和桌面端，确保在各种设备上行为一致。

适合场景

仪表板导航
管理面板界面
移动和桌面应用程序导航
响应式UI布局
快速侧边栏实现

主要特点

流畅的动画
图标和文本支持
标题部分
最小配置
跨平台兼容性

适合对象

初学者Flutter开发者
简单的导航需求
快速原型设计
干净的用户界面设计
跨平台应用

使用建议

有限的自定义选项
无内置深色模式
不适合复杂的导航结构
需要手动样式设置以实现高级设计
依赖外部仓库进行更新

原始 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

搜索插件、代码仓与 APP 分类

安装插件