flutter 动画_在Flutter中创建滚动动画

使用Flutter从头开始构建平滑的滚动动画

介绍

在本文中，我们将介绍如何使用Flutter SDK从头开始创建自定义滚动动画。Flutter是一个功能强大的工具，用于创建运行良好的本机移动应用程序，并且在创建丰富的用户体验(如动画)方面具有极大的灵活性。

如果您没有Flutter环境，请转到安装页面。此处提供了本文中示例项目的源代码。

---

入门

对于本演示，我创建了一个默认的Flutter项目，使用flutter create并仅使用Flutter中直接可用的类，没有向项目添加依赖项。在许多情况下，可以直接完成任务(例如自定义动画)，而无需额外的库。

这个示例应用程序的基本思想是创建一个包含几个项的简单列表视图，并且当视图向上或向下滚动时，在后台顺时针/逆时针旋转齿轮。我们将通过使用用于列表视图的滚动控制器并将其传递到动画背景来实现此目的，该动画背景构建与滚动位置同步旋转的自定义窗口小部件。

---

应用入口点

我们将从主应用程序文件lib/main.dart开始：

import 'package:flutter/material.dart';import 'demo-card.dart';import 'items.dart';import 'animated-bg.dart';void main() => runApp(AnimationDemo());class AnimationDemo extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData(primarySwatch: Colors.deepPurple), home: MyHomePage(title: 'Flutter Animation Demo'), ); }}class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State { ScrollController _controller = new ScrollController(); List get _cards => items.map((Item _item) => DemoCard(_item)).toList(); @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.black, appBar: AppBar(title: Text(widget.title)), body: Stack( alignment: AlignmentDirectional.topStart, children: [ AnimatedBackground(controller: _controller), Center( child: ListView( controller: _controller, children: _cards ) ) ] ) ); }}

在main.dart文件中，有以下组件的导入：

• demo-card.dart (从Item构建Card小部件)
• items.dart(为演示应用程序定义Item类和模拟内容)
• animated-bg.dart(构建动画背景小部件)

主app类(AnimationDemo)设置一个包装默认主页小部件(MyHomePage)的基本应用程序。在MyHomePage类中有一个_controller属性，它被初始化为ScrollController类的一个新实例，以便稍后传递给AnimatedBackground(它在后台驱动齿轮旋转动画)和ListView(它呈现滚动列表演示项目)。还有一个_cards属性，它以items.dart中导入的Item对象列表开头，并返回DemoCard列表 要在ListView中呈现的小部件。

---

物品类

我们检查的第一个导入文件是lib/items.dart：

import 'package:flutter/material.dart';class Item { String name; String description; MaterialColor color; IconData icon; Item(this.name, this.description, this.color, this.icon);}List items = [ Item('A', "Something cool