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

插件详情v0.0.2

swipeable_button_view

您可以使用 swipeable_button_view 创建带有涟漪动画的页面。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
2650
喜欢数
114
Pub 分数
140

安装插件

flutter pub add swipeable_button_view

插件介绍

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

SwipeableButtonView 是一个 Flutter 包,通过滑动手势实现交互式、涟漪动画按钮和页面的创建。当用户在按钮上滑动时,它通过流畅的动画和响应式反馈提升用户参与度。适用于需要基于手势交互的现代 UI,支持 Android、iOS、Web、macOS、Windows 和 Linux 多个平台。该包可无缝集成到 Flutter 应用中,提供可自定义的视觉效果和直观的触摸交互。开发者可以使用极少代码轻松实现基于滑动的导航或操作。其轻量级设计使其适用于简单和复杂的基于手势的界面。

适合场景

  • 基于手势的导航
  • 交互式按钮动画
  • 滑动时的涟漪效果
  • 以移动设备为先的用户界面组件
  • 跨平台手势支持
  • 引入引导屏幕

主要特点

  • 滑动时的涟漪动画
  • 多平台兼容性
  • 可自定义的滑动行为
  • 平滑的过渡效果
  • 轻量且易于集成
  • 支持触摸和拖拽手势

适合对象

  • 开发手势丰富的应用程序的开发者
  • 寻求交互式 UI 元素的设计人员
  • 需要滑动激活功能的应用程序
  • 跨平台移动和Web应用
  • 以UI/UX为重点的Flutter项目

使用建议

  • 可能需要额外的样式来适应复杂布局
  • 对低端设备的性能影响
  • 仅限滑动手势交互
  • 不适合非手势操作的工作流
  • 需要仔细处理手势识别中的边缘情况
  • 最适合触控设备

原始 README

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

swipeable_button_view

Pub Version License

You can create ripple animated pages with swipeable_button_view.

Install

Add swipeable_button_view: to your pubspec.yaml dependencies then run flutter pub get

dependencies:
  swipeable_button_view:

Then import the package to use

import 'package:swipeable_button_view/swipeable_button_view.dart';

Example

import 'package:swipeable_button_view/swipeable_button_view.dart';

SwipeableButtonView(
    buttonText: 'SLIDE TO PAYMENT',
    buttonWidget: Container(
        child: Icon(Icons.arrow_forward_ios_rounded,
            color: Colors.grey,
                ),),
    activeColor: Color(0xFF009C41),
    isFinished: isFinished,
    onWaitingProcess: () {
    Future.delayed(Duration(seconds: 2), () {
            setState(() {
                isFinished = true;
                      });
                    });
                  },
    onFinish: () async {
        await Navigator.push(context,
                        PageTransition(
                            type: PageTransitionType.fade,
                            child: DashboardScreen()));

                    //TODO: For reverse ripple effect animation
                    setState(() {
                      isFinished = false;
                    });
                  },
)

Screen Recording

Props

props types defaultValues isRequired
onFinish VoidCallback true
onWaitingProcess VoidCallback true
activeColor Color true
buttonWidget Widget true
buttonText String true
isFinished bool false
isActive bool true
disableColor Color Colors.grey
buttonColor Color Colors.white
buttontextstyle TextStyle TextStyle(color: Colors.white, fontWeight: FontWeight.bold)
indicatorColor Animation<Color?> AlwaysStoppedAnimation<Color>(Colors.white)})

所属分类

源码仓库

使用此插件的项目

暂无相关数据。