FLUTTER ECOSYSTEM

jemisgoti/simple_ripple_animation

簡單且可自定義的漣漪動畫,適用於 Flutter 應用!

simple_ripple_animation 專案封面
Stars
8
Forks
4
最近推送(UTC)
2024年11月16日
專案狀態
未封存
Jemis Goti GitHub avatar
GITHUB User

Jemis Goti ↗

Imaginative at Work!

語言C++CMakeDartCHTMLSwiftShellKotlinObjective-C

技術主題

此儲存庫發佈的套件

使用的依賴

依賴清單 3 項
  • flutter{"sdk":"flutter"}
  • flutter_test開發依賴{"sdk":"flutter"}
  • hyper_lint開發依賴^0.0.2

原始 README

以下為英文專案原文快照,最新內容請造訪 GitHub。

展開 / 收合專案 README
https://raw.githubusercontent.com/jemisgoti/simple_ripple_animation/4a901786d9a99ead73dff64d324097aac5f7b41b/readme_assets/banner.png

Simple Ripple Animation

style: very good analysis License: MIT

This package provide ripple animation widget that can be customised to meet your needs. It's easy to set up and customize, and it looks beautiful in any color you choose.

Features

This package support following parameter and methods.

Parameter

RippleAnimationwidget provide follwoing parameter to config your ripple animation effect.

Parameter defined for RippleAnimation widget:

Name Type Description
child Widget This child will be placed at center of the animation.
delay Duration This will be delay between two ripple wave.
minRadius double Minimum radius of the ripple wave.
maxRadius double Maximum radius of the ripple wave.
color Color Color of the animation.
ripplesCount int number of rippleCount in the wave.
duration Duration duration of the animation
repeat bool Provide true if you want to repeat animation

Getting started

Installing

  1. Add dependencies to pubspec.yaml

    Get the latest version in the 'Installing' tab on pub.dev

    dependencies:
        simple_ripple_animation: <latest-version>
    
  2. Run pub get.

    flutter pub get
    
  3. Import package.

    import 'package:simple_ripple_animation/simple_ripple_animation.dart';
    

Implementation

  1. Wrap Widget with RippleAnimation and assign needed parameter.

             RippleAnimation(
                child: CircleAvatar(
                  minRadius: 75,
                  maxRadius: 75,
                  backgroundImage: NetworkImage(Constants.avtarUrl),
                ),
                color: Colors.deepOrange,
                delay: const Duration(milliseconds: 300),
                repeat: true,
                minRadius: 75,
                maxRadius: 140,
                ripplesCount: 6,
                duration: const Duration(milliseconds: 6 * 300),
              )
    

Preview

Screenshot

TODO: Here is the few screenshot for the preview. This will be remove in new verison becuase pub.dev now support screenshot.

https://jemisgoti.github.io/simple_ripple_animation/readme_assets/image1.png
Mobile
https://jemisgoti.github.io/simple_ripple_animation/readme_assets/tab.png
Tablet
https://jemisgoti.github.io/simple_ripple_animation/readme_assets/desktop.png
Desktop
https://jemisgoti.github.io/simple_ripple_animation/readme_assets/web.png
Web

Main Contributors

https://avatars.githubusercontent.com/u/46031164
Jemis Goti
https://avatars.githubusercontent.com/u/75033711
Furkan Arslan

Thanks

Thank you for using this package and keep supporting opensource community.