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 分類

安裝套件