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

pushable_button 封面
插件详情v0.0.4

pushable_button

一个3D可按压按钮。适用于应用中重要的行动号召。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
140
喜欢数
50
Pub 分数
155

安装插件

flutter pub add pushable_button

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个用于 Flutter 的 3D 可按压按钮小部件,提供触觉和交互体验,非常适合突出的行动号召。它通过深度和动画模拟物理按钮按下效果,增强用户参与度。专为需要视觉反馈和强调关键操作的应用程序设计。可在所有主要平台(包括移动、网页和桌面)上使用。

适合场景

  • 突出显示主要的CTA
  • 增强表单中的用户交互
  • 通过视觉反馈提升应用参与度
  • 创建沉浸式 UI 元素
  • 为平面界面增加深度

主要特点

  • 3D 按压动画
  • 可自定义的按压深度
  • 平滑的过渡效果
  • 跨平台兼容性
  • 与现有控件的轻松集成

适合对象

  • 需要强烈行动号召强调的应用
  • 注重设计的应用程序
  • 交互式原型
  • 游戏化界面
  • 具有丰富 UI 的移动和网页应用

使用建议

  • 可能会影响低端设备的性能
  • 需要精心设计以避免过度使用
  • 不适用于极简或扁平化设计主题
  • 超出基础样式的有限自定义
  • 应谨慎使用以保持视觉冲击力

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

Pushable Button

Pub Language License Twitter

A 3D pushable button built in Flutter. Ideal for important CTAs in the app.

PushableButton preview

Usage

PushableButton(
  child: Text('ENROLL NOW', style: someTextStyle),
  height: 60,
  elevation: 8,
  hslColor: HSLColor.fromAHSL(1.0, 120, 1.0, 0.37),
  shadow: BoxShadow(
    color: Colors.grey.withOpacity(0.5),
    spreadRadius: 5,
    blurRadius: 7,
    offset: Offset(0, 2),
  ),
  onPressed: () => print('Button Pressed!'),
)

Configurable Properties

  • child: child widget (normally a Text or Icon)
  • height: height of the top layer
  • elevation: elevation or "gap" between the top and bottom layer
  • hslColor: color of the top layer. HSLColor is used instead of Color so that the bottom layer is automatically calculated by reducing the luminosity
  • shadow: an optional shadow to make the button look better
  • onPressed: button callback
LICENSE: MIT

所属分类

源码仓库

使用此插件的项目

暂无相关数据。