Flutter动画渐变插件animate_gradient的使用

Animate Gradient

此包让您无需任何麻烦即可创建动画渐变。只需传递主颜色和次要颜色，您就可以完成操作。您可以使用对齐方式来实现惊人的效果。有关更多信息，请阅读以下文档。

使用方法

创建您的第一个动画渐变

仅需要两个必需参数：primaryColors 和 secondaryColors。

• primaryColors 的长度必须大于或等于 2。
• secondaryColors 的长度必须等于 primaryColors 的长度。

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(),
),

玩转对齐方式

对齐方式是可选的。您可以传递以下对齐方式：

• primaryBegin
• primaryEnd
• secondaryBegin
• secondaryEnd

这样可以产生一些疯狂的效果。

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(),
),

另外！使用 AlignemntGeometry 进行更好的控制

对于以 RTL 格式构建的应用程序，普通的 Alignments 并不总是有效。因此，您可以使用 AlignmentGeometry。

• primaryBegin --> primaryBeginGeometry
• primaryEnd --> primaryEndGeometry
• secondaryBegin --> secondaryBeginGeometry
• secondaryEnd --> secondaryEndGeometry

此外，您还有一个额外的属性 textDirectionForGeometry。这将用于解析 AlignmentGeometry。

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(),
),

请注意，AlignmentGeometry 的优先级高于 Alignment

可用属性

示例代码

import 'package:animate_gradient/animate_gradient.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Animated Gradient',
      home: App(),
    );
  }
}

class App extends StatefulWidget {
  const App({Key? key}) : super(key: key);

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  bool isChanged = false;
  List<Color> primaryColors = const [
    Colors.white,
    Colors.pinkAccent,
    Colors.pink,
  ];
  List<Color> secondaryColors = const [
    Colors.blue,
    Colors.blueAccent,
    Colors.white,
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: 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: primaryColors,
        secondaryColors: secondaryColors,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text(
                'Animated Gradient',
                style: TextStyle(
                  fontSize: 36,
                  color: Colors.white,
                ),
              ),
              ElevatedButton(
                onPressed: _changeColors,
                style: _buttonStyle(),
                child: const Text(
                  'Change Colors',
                  style: TextStyle(color: Colors.black),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  ButtonStyle _buttonStyle() {
    return ButtonStyle(
      shape: MaterialStatePropertyAll(
        RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
      ),
    );
  }

  void _changeColors() {
    if (isChanged) {
      isChanged = false;
      primaryColors = const [
        Colors.pink,
        Colors.pinkAccent,
        Colors.white,
      ];
      secondaryColors = const [
        Colors.white,
        Colors.blueAccent,
        Colors.blue,
      ];
    } else {
      isChanged = true;
      primaryColors = [
        Colors.red,
        Colors.redAccent,
        Colors.white,
      ];
      secondaryColors = [
        Colors.white,
        Colors.tealAccent,
        Colors.teal,
      ];
    }

    setState(() {});
  }
}

作者

此插件由 Vikas Kumar 开发。

• Github
• LinkedIn