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

插件详情v0.0.5

clickable_widget

此 Flutter 插件为一些 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

所属分类

源码仓库

使用此插件的项目

暂无相关数据。