我怎样才能动画一个容器的线性梯度背景像在gif,但只有3种颜色?我试过几种方法但都不管用。
rsaldnfx1#
试试这个:
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.blue, ), home: const HomePage(), ); } } class HomePage extends StatelessWidget { const HomePage({super.key}); @override Widget build(BuildContext context) { return const Scaffold( body: Center( child: FancyContainer( size: Size(300, 200), cycle: Duration(seconds: 2), colors: <Color>[ Colors.cyan, Colors.blue, Colors.pink, Colors.red, Colors.yellow, Colors.green, Colors.cyan, ], ), ), ); } } class FancyContainer extends StatefulWidget { final Size size; final Duration cycle; final List<Color> colors; const FancyContainer({ required this.size, required this.cycle, required this.colors, }); @override State<FancyContainer> createState() => _FancyContainer(); } class _FancyContainer extends State<FancyContainer> with SingleTickerProviderStateMixin { late AnimationController controller; @override void initState() { super.initState(); controller = AnimationController( duration: widget.cycle, vsync: this, ) ..forward() ..addListener(() { if (controller.isCompleted) { controller.repeat(); } }); } @override void dispose() { controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final aspectRatio = widget.size.height / widget.size.width; return AnimatedBuilder( animation: controller, builder: (context, _) { return Container( width: widget.size.width, height: widget.size.height, decoration: BoxDecoration( gradient: LinearGradient( tileMode: TileMode.repeated, begin: Alignment.topLeft, end: Alignment.bottomRight, transform: SlideGradient( controller.value, widget.size.height * aspectRatio, ), colors: widget.colors, ), ), ); }, ); } } class SlideGradient implements GradientTransform { final double value; final double offset; const SlideGradient(this.value, this.offset); @override Matrix4? transform(Rect bounds, {TextDirection? textDirection}) { final dist = value * (bounds.width + offset); return Matrix4.identity()..translate(-dist); } }
dart :here
1条答案
按热度按时间rsaldnfx1#
试试这个:
dart :here