搜尋套件、儲存庫與 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)})

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。