套件詳情v3.0.2

flutter_slider_drawer

一個帶有自訂滑動抽屜選單實作的 Flutter 套件

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文件原始碼

近 30 天下載: 7860
喜歡數: 597
Pub 分數: 160

安裝套件

flutter pub add flutter_slider_drawer

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

一個 Flutter 套件，提供可自訂的滑動抽屜選單，具備獨特且順暢的滑動動畫。專為行動與 Web 應用中的直覺導航設計，是標準導航抽屜的現代替代方案。此套件支援 Android、iOS、Web、macOS、Windows 與 Linux 多個平台，確保跨裝置行為一致。輕量級實作，透過 pub 可輕鬆整合，開發者能快速為應用程式加入互動式側邊選單。自訂選項包含滑動手勢、動畫速度與外觀樣式。非常適合需要簡潔、以手勢驅動導航體驗的應用。

適用情境

移動應用導航
Web 儀表板側邊欄
基於手勢的菜單互動
跨平台 UI 一致性
可自定義的滑入選單

主要特色

平滑的滑動動畫
手勢支援
跨平台相容性
可自定外觀
輕鬆整合公眾發佈

適合對象

尋求現代導航的開發者
需要可滑動側邊面板的應用
面向多個平台的專案
以使用者介面為重點的 Flutter 應用程式
想要動畫抽屜的設計者

使用建議

限制為抽屜式佈局
需要手動處理嵌套導航
可能需要額外的狀態管理
不適用於複雜的多層級選單
動畫性能取決於設備功能

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

Flutter Slider Drawer

A Flutter package with custom implementation of the Slider Drawer Menu

To start using this package, add flutter_slider_drawer dependency to your pubspec.yaml

dependencies:
  flutter_slider_drawer: '<latest_release>'

Features

Slider with custom animation time
Provide Basic Appbar with customization of color and title
Dynamic slider open and close offset
Provide drawer icon animation
Provide shadow of Main screen with customization of shadow colors,blurRadius and spreadRadius
Provide RTL(RightToLeft),LTR(LeftToRight) and TTB(TopToBottom) slider open selection
Provide Custom Appbar support and you can also use plugin appBar with use of SliderAppBar widget
If you are using CupertinoApp then pass isCupertino: true

Code

  Widget build(BuildContext context) {
    return Scaffold(
      body: SliderDrawer(
        key: _sliderDrawerKey,
        appBar: SliderAppBar(
          config: SliderAppBarConfig(
            title: Text(
              title,
              textAlign: TextAlign.center,
              style: const TextStyle(
                fontSize: 22,
                fontWeight: FontWeight.w700,
              ),
            ),
          ),
        ),
        sliderOpenSize: 179,
        slider: Container(color: Colors.red),
        child: Container(color: Colors.amber),
      ),
    );
  }

Slider open

SliderOpen.LEFT_TO_RIGHT	SliderOpen.RIGHT_TO_LEFT	SliderOpen.TOP_TO_BOTTOM

Controlling the drawer

class _MyAppState extends State<MyApp> {
   GlobalKey<SliderDrawerState> _sliderDrawerKey =
      GlobalKey<SliderDrawerState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SliderDrawer(
        key: _sliderDrawerKey,
        appBar: SliderAppBar(
          config: SliderAppBarConfig(
            title: Text(
              title,
              textAlign: TextAlign.center,
              style: const TextStyle(
                fontSize: 22,
                fontWeight: FontWeight.w700,
              ),
            ),
          ),
        ),
        sliderOpenSize: 179,
        slider: Container(color: Colors.red),
        child: Container(color: Colors.amber),
      ),
    );
  }
}

Using the below methods to control drawer .

 _sliderDrawerKey.currentState.closeDrawer();
 _sliderDrawerKey.currentState.openDrawer();
 _sliderDrawerKey.currentState.toggle();
 _sliderDrawerKey.currentState.isDrawerOpen();