https://github.com/fluttercandies/ripple_backdrop_animate_route

A ripple animation with backdrop of route.
https://github.com/fluttercandies/ripple_backdrop_animate_route

Last synced: 8 months ago
JSON representation

A ripple animation with backdrop of route.

• Host: GitHub
• URL: https://github.com/fluttercandies/ripple_backdrop_animate_route
• Owner: fluttercandies
• License: mit
• Created: 2019-08-22T08:28:26.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-06-20T12:03:23.000Z (almost 4 years ago)
• Last Synced: 2024-06-18T11:34:20.379Z (almost 2 years ago)
• Language: Dart
• Size: 83 KB
• Stars: 44
• Watchers: 5
• Forks: 10
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# ripple_backdrop_animate_route

[![pub package](https://img.shields.io/pub/v/ripple_backdrop_animate_route.svg)](https://pub.dartlang.org/packages/ripple_backdrop_animate_route)

[![GitHub stars](https://img.shields.io/github/stars/fluttercandies/ripple_backdrop_animate_route)](https://github.com/fluttercandies/ripple_backdrop_animate_route/stargazers)

[![GitHub forks](https://img.shields.io/github/forks/fluttercandies/ripple_backdrop_animate_route)](https://github.com/fluttercandies/ripple_backdrop_animate_route/network)

[![GitHub license](https://img.shields.io/github/license/fluttercandies/ripple_backdrop_animate_route)](https://github.com/fluttercandies/ripple_backdrop_animate_route/blob/master/LICENSE)

[![GitHub issues](https://img.shields.io/github/issues/fluttercandies/ripple_backdrop_animate_route)](https://github.com/fluttercandies/ripple_backdrop_animate_route/issues)



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)

## Getting Started

### Example Usage

```dart

import 'package:ripple_backdrop_animate_route/ripple_backdrop_animate_route.dart';

///...

RippleBackdropAnimatePage.show(

  context: context,

  child: Column(

    mainAxisAlignment: MainAxisAlignment.end,

    children: [

      Text('This is ripple backdrop animate page.'),

    ],

  ),

  childFade: true,

  duration: 300,

  blurRadius: 20,

  bottomButton: Icon(Icons.visibility),

  bottomHeight: 60,

  bottomButtonRotate: false,

);

```

### Parameters

| 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                         |