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

套件詳情v0.0.5

clickable_widget

此 Flutter 插件為一些 Flutter 小部件提供原生不具備的手勢處理程式。

AndroidiOSmacOSWindowsLinux
近 30 天下載
53
喜歡數
8
Pub 分數
140

安裝套件

flutter pub add clickable_widget

套件介紹

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

clickable_widget 套件透過為原本不支援手勢的元件新增手勢處理程式,擴展了 Flutter 的元件庫。它讓 Text、Icon 或 Container 等非互動式元件能支援點擊、長按及其他手勢,無需自訂包裝即可提升使用體驗。適合以最少的樣板程式碼建立互動式 UI 元件,跨平台提升使用者體驗。

適用情境

  • 向文字元素添加點擊操作
  • 建立互動式圖示
  • 從非互動式元件建構自訂按鈕
  • 透過觸控反饋增強表單輸入
  • 簡化複雜佈局中的手勢處理

主要特色

  • 對非互動式元件的手勢支援
  • 最小的代碼開銷
  • 跨平台相容性
  • 支援輕觸、長按等操作
  • 與現有小部件的輕鬆整合

適合對象

  • 尋求快速手勢新增的UI開發人員
  • 需要輕量級互動組件的項目
  • 避免使用自定義手勢檢測器的 Teams
  • 設計人員實現互動式原型
  • 針對多個平台的應用程式

使用建議

  • 限於基本手勢類型
  • 可能需要細心的版面管理
  • 不適合複雜的手勢鏈
  • 無內建動畫支援
  • 依賴於正確的控件層次結構

原始 README

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

Clickable Widget

This Flutter plugin provides some flutter widgets having gesture handlers their don't natively have in Flutter.

By default some flutter widgets (Widget Without Gesture) do not trigger gesture events so we wrap them inside the InkWell/GestureDetector widget. To overcome this, I decide to build a package which give developpers some gesture handlers directly inside WWG.

Available gesture handlers

  • onTap;
  • onTapDown;
  • onTapUp;
  • onTapCancel
  • onDoubleTapDown
  • onDoubleTap
  • onDoubleTapCancel
  • onLongPressDown
  • onLongPressCancel
  • onLongPress
  • onLongPressStart
  • onLongPressMoveUpdate
  • onLongPressUp
  • onLongPressEnd

Available widgets

  1. ClickableContainer
  2. ClickableImage
  3. ClickableCard
  4. ClickableGridTile
  5. ClickableSizedBox
  6. ClickableText
  7. ClickableRow
  8. ClickableColumn

Usage

Add Clickable Widget to your pubspec.yaml in dependencies: section.

dependencies:
  clickable_widget: ^latest

Update dependencies

  $ flutter pub get

Import Clickable Container widget in your code

  ClickableContainer(
    onTap: () {
      debugPrint("container tapped");
    },
    alignment: Alignment.center,
    width: 100.0,
    height: 100.0,
    color: Colors.grey,
    child: const Text("Tap me!"),
  ),

Import Clickable Image widget in your code

   ClickableImage(
    onTap: () {
      debugPrint("network image tapped");
    },
    clickableImageType: ClickableImageType.network,
    src: "https://pixabay.com/fr/images/search/nature/",
  ),

Import Clickable GridTile widget in your code

  ClickableGridTile(
    onTap: () {
      debugPrint("grid tile tapped");
    },
    child: const Text("Tap me!"),
  ),

For more exmample, refer to the example section.

Meta

Gael Vinou [gaelvinou@gmail.com](mailto:gaelvinou@gmail.com)

https://github.com/GV-22/clickable_widget

Distributed under the MIT License

Contributing

  1. Fork it (https://github.com/GV-22/clickable_widget/fork)
  2. Create your feature branch (git checkout -b feature/fooBar)
  3. Commit your changes (git commit -am 'Add some fooBar')
  4. Push to the branch (git push origin feature/fooBar)
  5. Create a new Pull Request

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。