搜尋套件、儲存庫與 APP 分類

flutter_inner_drawer 封面
套件詳情v1.0.0+1

flutter_inner_drawer

內部抽屜是一種輕鬆建立內部側邊欄(左/右)的方式,您可以在其中插入清單選單或其他內容。

近 30 天下載
163
喜歡數
482
Pub 分數
70

安裝套件

flutter pub add flutter_inner_drawer

套件介紹

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

Flutter Inner Drawer 是一個輕量級套件,讓開發者能在 Flutter 應用中實現內部側邊抽屜(左或右)。它提供了一種簡單且可自訂的方式,用於新增導航菜單或額外內容區域,而不會干擾主要 UI 流程。抽屜從螢幕邊緣滑入,提供乾淨現代的使用者體驗。支援水平與垂直手勢來開啟和關閉,並能與現有元件無縫整合。非常適合需要緊湊、易存取導航面板的應用。

適用情境

  • 新增可摺疊的導航選單
  • 建立上下文操作面板
  • 實施基於側面的過濾器或設定
  • 透過隱藏內容增強行動應用程式版面
  • 使用嵌套抽屜設計響應式介面

主要特色

  • 與現有小部件的輕鬆整合
  • 支援左側和右側抽屜位置
  • 手勢驅動的開啟/關閉互動
  • 可自訂的動畫和樣式
  • 輕量且高效
  • 可設定的抽屜寬度與對齊方式

適合對象

  • 尋求直覺導航的行動應用開發者
  • 想要簡潔側面板的設計人員
  • 需要極簡但功能齊全的使用者介面的應用程式
  • 使用材質設計原則的專案
  • 致力於流暢手勢互動的開發者

使用建議

  • 可能需要小心處理重疊內容
  • 對複雜嵌套抽屜的內建支援有限
  • 不適合全螢幕疊加場景
  • 需要關注觸控手勢的可訪問性
  • 最適合單層導航結構

原始 README

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

flutter_inner_drawer

pub package Awesome Flutter Donate

Inner Drawer is an easy way to create an internal side section (left/right) where you can insert a list menu or other.

Installing

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_inner_drawer: "^1.0.0+1"

Demo

Simple usage
import 'package:flutter_inner_drawer/inner_drawer.dart';
.
.
.
   
    @override
    Widget build(BuildContext context)
    {
        return InnerDrawer(
            key: _innerDrawerKey,
            onTapClose: true, // default false
            swipe: true, // default true            
            colorTransitionChild: Color.red, // default Color.black54
            colorTransitionScaffold: Color.black54, // default Color.black54
            
            //When setting the vertical offset, be sure to use only top or bottom
            offset: IDOffset.only(bottom: 0.05, right: 0.0, left: 0.0),
            
            scale: IDOffset.horizontal( 0.8 ), // set the offset in both directions
            
            proportionalChildArea : true, // default true
            borderRadius: 50, // default 0
            leftAnimationType: InnerDrawerAnimation.static, // default static
            rightAnimationType: InnerDrawerAnimation.quadratic,
            backgroundDecoration: BoxDecoration(color: Colors.red ), // default  Theme.of(context).backgroundColor
            
            //when a pointer that is in contact with the screen and moves to the right or left            
            onDragUpdate: (double val, InnerDrawerDirection direction) {
                // return values between 1 and 0
                print(val);
                // check if the swipe is to the right or to the left
                print(direction==InnerDrawerDirection.start);
            },
            
            innerDrawerCallback: (a) => print(a), // return  true (open) or false (close)
            leftChild: Container(), // required if rightChild is not set
            rightChild: Container(), // required if leftChild is not set
            
            //  A Scaffold is generally used but you are free to use other widgets
            // Note: use "automaticallyImplyLeading: false" if you do not personalize "leading" of Bar
            scaffold: Scaffold(
                appBar: AppBar(
                    automaticallyImplyLeading: false
                ),
            ) 
            /* OR
            CupertinoPageScaffold(                
                navigationBar: CupertinoNavigationBar(
                    automaticallyImplyLeading: false
                ),
            ), 
            */
        )
    }
    
    //  Current State of InnerDrawerState
    final GlobalKey<InnerDrawerState> _innerDrawerKey = GlobalKey<InnerDrawerState>();    

    void _toggle()
    {
       _innerDrawerKey.currentState.toggle(
       // direction is optional 
       // if not set, the last direction will be used
       //InnerDrawerDirection.start OR InnerDrawerDirection.end                        
        direction: InnerDrawerDirection.end 
       );
    }
    
InnerDrawer Parameters
PropName Description default value
scaffold A Scaffold is generally used but you are free to use other widgets required
leftChild Inner Widget required if rightChild is not set
rightChild Inner Widget required if leftChild is not set
leftOffset(deprecated) Offset drawer width 0.4
rightOffset(deprecated) Offset drawer width 0.4
leftScale(deprecated) Left scaffold scaling 1
rightScale(deprecated) Right scaffold scaling 1
offset Offset InnerDrawer width IDOffset.horizontal(0.4)
scale Scaffold scaling IDOffset.horizontal(1)
proportionalChildArea If true, dynamically sets the width based on the selected offset, otherwise it leaves the width at 100% of the screen. true
borderRadius For scaffold border 0
onTapClose Tap on the Scaffold closes it false
swipe activate or deactivate the swipe true
swipeChild activate or deactivate the swipeChild false
duration Animation Controller duration Duration(milliseconds: 246)
velocity Allows you to set the opening and closing velocity when using the open/close methods 1
tapScaffoldEnabled Possibility to tap the scaffold even when open false
boxShadow BoxShadow of scaffold opened [BoxShadow(color: Colors.black.withOpacity(0.5),blurRadius: 5)]
colorTransitionChild Change background color while swiping Colors.black54
colorTransitionScaffold Change background color while swiping Colors.black54
leftAnimationType static / linear / quadratic static
rightAnimationType static / linear / quadratic static
backgroundDecoration possibility to manage the main background Decoration BoxDecoration(color: Theme.of(context).backgroundColor)
innerDrawerCallback Optional callback that is called when a InnerDrawer is opened or closed
onDragUpdate When a pointer that is in contact with the screen and moves to the right or left
_innerDrawerKey.currentState.open Current State of GlobalKey(check example) - OPEN
_innerDrawerKey.currentState.close Current State of GlobalKey(check example) - CLOSE
_innerDrawerKey.currentState.toggle Current State of GlobalKey(check example) - OPEN or CLOSE

Donate

It takes time to carry on this project. If you found it useful or learned something from the source code please consider the idea of donating 5, 20, 50 € or whatever you can to support the project.

  • Donate

Issues

If you encounter problems, open an issue. Pull request are also welcome.

所屬分類

原始碼儲存庫

使用此套件的專案