flutter pub add ripple_wave根據套件公開資料產生的選型評估，僅供參考。
RippleWave 是一個輕量級的 Flutter 套件，讓開發者能輕鬆為任何元件加入流暢且可自訂的波紋動畫。它支援基於觸控的波紋效果，並可設定顏色、大小與持續時間，非常適合用於按鈕、卡片或互動元件。此套件設計簡單，設定需求最少，卻能在所有主要平台呈現出視覺上吸引人的效果。它能順暢整合至現有的 UI 中，並透過動態視覺回饋提升使用者體驗。
以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。
Simple and easy to use ripple animation that can be wrapped in widgets to create beautiful ripple effects.
Add ripple_wave to your pubspec.yaml file.
dependencies:
ripple_wave:
Import ripple_wave in files that it will be used.
import 'package:ripple_wave/ripple_wave.dart';
To use this package, add ripple_wave as a dependency in your pubspec.yaml file.
Then wrap your desired widget with RippleWave widget to get the ripple animation.
Usage without repeated animation:
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: RippleWave(
color: Colors.green,
repeat: false,
child: const Icon(
Icons.emoji_emotions,
size: 100,
color: Colors.white,
),
),
);
}
}
Usage with tween effect on child widget of the RippleWave:
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: RippleWave(
color: Colors.red,
childTween: Tween(begin: 0.2, end: 1),
child: const Icon(
Icons.emoji_emotions,
size: 100,
color: Colors.white,
),
),
);
}
}
Usage with animation controller to manually start or stop the animation:
class DemoPage extends StatefulWidget {
const DemoPage({Key? key}) : super(key: key);
@override
State<DemoPage> createState() => _DemoPageState();
}
late AnimationController animationController;
void start() {
animationController.repeat();
}
void stop() {
animationController.stop();
}
class _DemoPageState extends State<DemoPage>
with SingleTickerProviderStateMixin {
@override
void initState() {
animationController = AnimationController(
duration: const Duration(seconds: 3),
vsync: this,
);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Ripple Demo"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RippleWave(
childTween: Tween(begin: 0.1, end: 1.0),
color: Colors.deepPurpleAccent,
repeat: false,
animationController: animationController,
child: const Icon(
Icons.emoji_emotions,
size: 100,
color: Colors.white,
),
),
const SizedBox(
height: 200,
),
TextButton(
onPressed: () {
start();
},
child: const Text(
'Start animation',
),
),
const SizedBox(
height: 40,
),
TextButton(
onPressed: () {
stop();
},
child: const Text(
'Stop animation',
),
),
],
),
);
}
}
暫無相關資料。