Maintenant que vous avez appris à créer des animations explicites et implicites, il est temps de le mettre en pratique !
Question
Nous allons simplement créer la superposition de 3 animations différentes dans une colonne :
La première est un container vert carré de 100 x 100, qui tourne sur lui-même en permanence.
La deuxième est un container rond, qui change de couleur une seule fois, au moment où le widget est créé.
Le troisième est un container qui s'agrandit ou rétrécit uniquement lorsqu'un bouton est activé.
Toutes ses animations doivent se faire en 7 secondes.
Avant de vous lancer, prenez le temps de vous poser les bonnes questions ! Mon widget doit-il se relancer en permanence ? A-t-il des discontinuités ?
À vous de jouer !
Solution
1
import 'package:flutter/material.dart'; import 'dart:math' as math;
2
3
void main() => runApp(MyApp());
4
5
class MyApp extends StatefulWidget { @override
6
State<MyApp> createState() => _MyAppState();
7
}
8
9
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin { AnimationController _controller;
10
bool _bigger = true;
11
12
@override
13
void initState() { super.initState();
14
_controller = AnimationController( duration: const Duration(seconds: 7), vsync: this,
15
)..repeat();
16
}
17
18
@override void dispose() {
19
_controller.dispose(); super.dispose();
20
}
21
22
@override
23
Widget build(BuildContext context) { return MaterialApp(
24
home: Column( children: [ AnimatedBuilder(
25
animation: _controller,
26
child: Container(width: 100.0, height: 100.0, color: Colors.green), builder: (BuildContext context, Widget child) {
27
return Transform.rotate(
28
angle: _controller.value * 2.0 * math.pi, child: child,
29
30
);
31
},
32
),
33
TweenAnimationBuilder<Color>(
34
tween: ColorTween(begin: Colors.red, end: Colors.yellow), duration: Duration(seconds: 7),
35
builder: (BuildContext _, Color value, Widget ) { return ColorFiltered(
36
colorFilter: ColorFilter.mode(value, BlendMode.modulate), child: ClipRRect(
37
borderRadius: BorderRadius.circular(100), child: Container(
38
color: Colors.white, height: 100, width: 100)));
39
},
40
),
41
Column( children: [
42
AnimatedContainer(
43
height: _bigger ? 100 : 200,
44
width: _bigger ? 100 : 200, color: Colors.blue,
45
duration: Duration(seconds: 7), curve: Curves.elasticInOut),
46
Container(height: 16), ElevatedButton(
47
onPressed: () {
48
setState(() => _bigger = !_bigger);
49
},
50
child: Text("Changer la taille"))
51
],
52
),
53
],
54
),
55
);
56
}
57
}