v1.1.0
ripple_backdrop_animate_route
具有路由背景的波紋動畫。這將創建一個透明頁面,並帶有波紋背景動畫來動畫化組件。您可以放置任何組件並自定義效果。
41喜歡 27近 30 天下載140Pub 分數
AndroidiOSWebmacOSWindowsLinux
帶有路由背景的波紋動畫。
{"sdk":"flutter"}以下為英文專案原文快照,最新內容請造訪 GitHub。
pub package GitHub stars GitHub forks GitHub license GitHub issues FlutterCandies
A ripple animation with backdrop of route.
Screenshot:
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/8/21/16cb4d58e3458fd7~tplv-t2oaga2asx-zoom-in-crop-mark:1304:0:0:0.awebp
import 'package:ripple_backdrop_animate_route/ripple_backdrop_animate_route.dart';
///...
RippleBackdropAnimatePage.show(
context: context,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text('This is ripple backdrop animate page.'),
],
),
childFade: true,
duration: 300,
blurRadius: 20,
bottomButton: Icon(Icons.visibility),
bottomHeight: 60,
bottomButtonRotate: false,
);
| Name | Description | Default |
|---|---|---|
| child | Child for page. | - |
| childFade | When enabled, [child] will fade in when animation is going and fade out when popping. | false |
| duration | Animation's duration, including [Navigator.push], [Navigator.pop]. | 300 |
| blurRadius | Blur radius for [BackdropFilter]. | 20.0 |
| bottomButton | [Widget] for bottom of the page. | - |
| bottomHeight | The height which [bottomButton] will occupy. | kBottomNavigationBarHeight |
| bottomButtonRotate | When enabled, [bottomButton] will rotate when to animation is going. | true |
| bottomButtonRotateDegree | The degree which [bottomButton] will rotate. | 45.0 |