Animated-Gradient

KO | EN

gitlite — search

#python #typescript #java #nodejs #hacktoberfest #javascript #python3 #machine-learning #game #android #graphql #genetic-algorithm

Animated-Gradient

★ 31 Open GitHub ↗

This Flutter Package lets you make animated gradients without any hassle. Just pass the primary and secondary colors and you're done.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Animate Gradient

![pub](https://img.shields.io/badge/pub-v0.0.4-blue) ![Animated-Gradient](https://img.shields.io/badge/Animated--Gradient-passing-brightgreen)

This Package lets you make animated gradients without any hassle. Just pass the primary and secondary colors and you're done.
You can do amazing effects using the alignments. For More info read the docs below.

## Usage

### Create your first animated gradient.

The only two required arguments are the primaryColors and secondaryColors.

| primaryColors length must greater or equal to 2.|
| secondaryColors length must be equal to primaryColors length.|

```dart
    import 'package:animate_gradient/animate_gradient.dart';

AnimateGradient(
        primaryColors: const [
          Colors.pink,
          Colors.pinkAccent,
          Colors.white,
        ],
        secondaryColors: const [
          Colors.blue,
          Colors.blueAccent,
          Colors.white,
        ],
        child: YourWidget(),
      ),
```

### Play with alignments.

Alignments are optional. You can pass any of the following alignments.

`primaryBegin`
`primaryEnd`
`secondaryBegin`
`secondaryEnd`

With this in place, you can have some crazy effects.

```dart
   import 'package:animate_gradient/animate_gradient.dart';

AnimateGradient(
       primaryBegin: Alignment.topLeft,
       primaryEnd: Alignment.bottomLeft,
       secondaryBegin: Alignment.bottomLeft,
       secondaryEnd: Alignment.topRight,
       primaryColors: const [
         Colors.pink,
         Colors.pinkAccent,
         Colors.white,
       ],
       secondaryColors: const [
         Colors.white,
         Colors.blueAccent,
         Colors.blue,
       ],
       child: YourWidget(),
     ),
```

### Alternatively! Use AlignemntGeometry for better control

With the apps built in rtl format normal `Alignments` cannot always work.
So, you can use `AlignemntGeometry` instead.

`primaryBegin` --> `primaryBeginGeometry`

`primaryEnd` --> `primaryEndGeometry`

`secondaryBegin` --> `secondaryBeginGeometry`

`secondaryEnd` --> `secondaryEndGeometry`

With this, you also have an additional property `textDirectionForGeometry`.
This will be used to resolve the AlignmentGeometry

```dart
   import 'package:animate_gradient/animate_gradient.dart';

AnimateGradient(
      primaryBeginGeometry: const AlignmentDirectional(0, 1),
      primaryEndGeometry: const AlignmentDirectional(0, 2),
      secondaryBeginGeometry: const AlignmentDirectional(2, 0),
      secondaryEndGeometry: const AlignmentDirectional(0, -0.8),
      textDirectionForGeometry: TextDirection.rtl,
       primaryColors: const [
         Colors.pink,
         Colors.pinkAccent,
         Colors.white,
       ],
       secondaryColors: const [
         Colors.white,
         Colors.blueAccent,
         Colors.blue,
       ],
       child: YourWidget(),
     ),
```

**Please note that `AlignmentGeometry` will be given more priority over `Alignment`**

## Available properties

| Property                   | Type                 | Description                                                                                                      |
| -------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------- |
| `primaryColors`            | List                 | Starting colors of the animation.                                                                                |
| `secondaryColors`          | List                 | Ending colors of the animation.                                                                                  |
| `primaryBegin`             | Alignment?           | Starting Alignment of primaryColors.                                                                             |
| `primaryEnd`               | Alignment?           | Ending Alignment of primaryColors.                                                                               |
| `secondaryBegin`           | Alignment?           | Starting Alignment of secondaryColors.                                                                           |
| `secondaryEnd`             | Alignment?           | Ending Alignment of secondaryColors.                                                                             |
| `primaryBeginGeometry`     | AlignmentGeometry?   | Starting AlignmentGeometry of primaryColors.                                                                     |
| `primaryEndGeometry`       | AlignmentGeometry?   | Ending AlignmentGeometry of primaryColors.                                                                       |
| `secondaryBeginGeometry`   | AlignmentGeometry?   | Starting AlignmentGeometry of secondaryColors.                                                                   |
| `secondaryEndGeometry`     | AlignmentGeometry?   | Ending AlignmentGeometry of secondaryColors.                                                                     |
| `textDirectionForGeometry` | TextDirection?       | TextDirection that will be used to resolve AlignmentGeometry                                                     |
| `duration`                 | Duration?            | Duration between the transition.                                                                                 |
| `controller`               | AnimationController? | <br> You can pass your own animation controller and use that</br><br>to control animation however you want.</br> |
| `animateAlignments`        | bool?                | If you want to animate alignments.                                                                               |
| `reverse`                  | bool?                | If you want to reverse the animation.                                                                            |
| `repeat`                   | bool?                | If you want to repeat the animation.                                                                             |
| `curve`                    | Curve?               | The curve to use for the animation.                                                                              |
| `child`                    | Widget?              | You can pass your widget.                                                                                        |

## Author

This plugin is developed by Vikas Kumar.

- [Github](https://github.com/Vikaskumar75)
- [LinkedIn](https://www.linkedin.com/in/vikas-kumar-6564a7185/)

Animated-Gradient

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README