我知道如何使用渐变背景
LinearGradient()
但是我只是想知道有没有一种方法可以达到动画渐变背景?
您可以将动画渐变背景想像成屏幕没有冻结,仍然有一些流动的动画。由于它是动画,因此很难发布参考图片。
现在唯一想到的是耀斑。但是有什么方法可以使其更自然?
您可以使用AnimatedContainer
并在动画结束时重置目标颜色。为了实现平稳的过渡,我建议您可以循环显示颜色列表,也可以使用“对齐”进行同样的操作。
示例:
示例的源代码:
import 'package:flutter/material.dart';
class AnimatedGradient extends StatefulWidget {
@override
_AnimatedGradientState createState() => _AnimatedGradientState();
}
class _AnimatedGradientState extends State<AnimatedGradient> {
List<Color> colorList = [
Colors.red,
Colors.blue,
Colors.green,
Colors.yellow
];
List<Alignment> alignmentList = [
Alignment.bottomLeft,
Alignment.bottomRight,
Alignment.topRight,
Alignment.topLeft,
];
int index = 0;
Color bottomColor = Colors.red;
Color topColor = Colors.yellow;
Alignment begin = Alignment.bottomLeft;
Alignment end = Alignment.topRight;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
AnimatedContainer(
duration: Duration(seconds: 2),
onEnd: () {
setState(() {
index = index + 1;
// animate the color
bottomColor = colorList[index % colorList.length];
topColor = colorList[(index + 1) % colorList.length];
//// animate the alignment
// begin = alignmentList[index % alignmentList.length];
// end = alignmentList[(index + 2) % alignmentList.length];
});
},
decoration: BoxDecoration(
gradient: LinearGradient(
begin: begin, end: end, colors: [bottomColor, topColor])),
),
Positioned.fill(
child: IconButton(
icon: Icon(Icons.play_arrow),
onPressed: () {
setState(() {
bottomColor = Colors.blue;
});
},
),
)
],
));
}
}