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
}