🍉 加载中...


Flutter SweepGradient 使用实例(扇形渐变)

1 minute read

演示

演示

代码

 1class MyHomePage extends StatefulWidget {
 2  const MyHomePage({Key? key}) : super(key: key);
 3
 4  @override
 5  MyHomePageState createState() => MyHomePageState();
 6}
 7
 8class MyHomePageState extends State<MyHomePage>
 9    with SingleTickerProviderStateMixin {
10  late Animation<double> _animation;
11  late AnimationController _controller;
12
13  @override
14  void initState() {
15    super.initState();
16
17    _controller = AnimationController(
18      vsync: this,
19      duration: const Duration(milliseconds: 1500),
20      reverseDuration: const Duration(milliseconds: 1500),
21    );
22
23    _animation = Tween<double>(begin: 0, end: 2 * math.pi).animate(_controller)
24      ..addListener(() {
25        setState(() {});
26      });
27
28    _controller.repeat();
29  }
30
31  @override
32  void dispose() {
33    _controller.dispose();
34    super.dispose();
35  }
36
37  @override
38  Widget build(BuildContext context) {
39    return Scaffold(
40      body: Center(
41        child: Container(
42          height: 150,
43          width: 150,
44          decoration: BoxDecoration(
45            borderRadius: BorderRadius.circular(4),
46            gradient: SweepGradient(
47              colors: [Colors.transparent, Colors.blue.shade100, Colors.blue],
48              stops: const [0.8, 0.8, 1],
49              startAngle: _animation.value,
50              endAngle: _animation.value + (2 * math.pi),
51              tileMode: TileMode.repeated,
52            ),
53          ),
54          clipBehavior: Clip.hardEdge,
55          child: Container(
56            decoration: BoxDecoration(
57              borderRadius: BorderRadius.circular(4),
58            ),
59            clipBehavior: Clip.hardEdge,
60            margin: const EdgeInsets.all(4),
61            child: Image.network(
62              'https://picsum.photos/1920/1080',
63              fit: BoxFit.fitHeight,
64              height: double.infinity,
65            ),
66          ),
67        ),
68      ),
69    );
70  }
71}

参考资料