在 Flutter 中创建一个动画屏幕

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bkQsQVKI-1642636819911)(https://ducafecat.tech/2022/01/21/2022/create-an-animation-screen-in-flutter/2022-01-20-07-40-53.png)]

原文

https://medium.com/@baran.aslankan4/create-an-animation-screen-in-flutter-683d9a534d67

代码

https://github.com/ducafecat/getx_quick_start

参考

• https://pub.flutter-io.cn/packages/animated_text_kit
• https://pub.flutter-io.cn/packages/simple_animations
• https://pub.flutter-io.cn/packages/google_fonts

正文

大家好，今天我要向大家展示如何在 Flutter 中创建一个动画屏幕，就像这样;

安装依赖项

您可以从 pub.dev 获得依赖项

这些是我在我的项目中使用的版本:

animated_text_kit: ^4.2.1
simple_animations: ^3.1.1
google_fonts: ^2.1.0

在获得依赖关系之后，我们在编码之前还有一个步骤。

有一个叫做 Liquid Studio 的应用程序是由 Felix Blaschke 创建的，这个应用程序生成飞镖代码来制作一些动画。

https://felixblaschke.github.io/liquid-studio/#/

现在是设计部分:

有许多选项和颜色选择，为此我使用了默认设置和颜色。

现在，为了使它动画化，我们需要添加另一个层称为 Plasma。

点击添加图层按钮并选择 Plasma。

现在你可以自定义渐变层和 plasma layers，我为自己做了一些定制。

现在要导出，点击左上角的导出按钮。

<