Créer des vues personnalisées avec Flutter

Nouvelle session de notre communauté locale Dart & Flutter. Elle a porté sur les animations avec Flutter

Transcript

1. Créer des vues personnalisées avec Flutter Agnaramon Boris-Carnot @agnamc9 Dimanche 6 Septembre 2020 11h - 13h https://meet.google.com/zcb-eofi-zmb Rejoignez notre communauté Dart & Flutter https://discord.gg/rpmKTAN
2. Rejoignez-nous sur https://discord.gg/hhJmTQm
3. https://flutter.dev/docs/development/ui/widgets Catalogue fourni par le framework
4. https://pub.dev/packages/flutter_credit_card https://pub.dev/packages/flutter_spinkit
5. Plusieurs approches : • Composition • CustomPaint
6. Plusieurs approches : • Composition • CustomPaint
7. Construire un widget à partir d’autres widgets. Composition
8. Composition
9. Widget Interface Composition
10. Row Composition
11. Row Button Button Text Composition
12. FloatingActionButton( onPressed: () { }, child: Text('-', style: TextStyle(color: Colors.white, fontSize: 24), ), ) Composition
13. FloatingActionButton( onPressed: () { }, child: Text('+', style: TextStyle(color: Colors.white, fontSize: 24), ), ) Composition
14. Text('1', style: TextStyle(fontSize: 24), ), Composition
15. Row( ... children: [ FloatingActionButton( onPressed: () {}, child: Text( '-', style: TextStyle(color: Colors.white, fontSize: 24), ), ), ... Text('$_counter', style: TextStyle(fontSize: 24)), ... FloatingActionButton( onPressed: () {}, child: Text( '+', style: TextStyle(color: Colors.white, fontSize: 24), ), ), ], )
16. Widget Logic Composition
17. class CompoundWidget extends StatefulWidget { final Function onChanged; const CompoundWidget({Key key, this.onChanged}) : super(key: key); @override _CompoundWidgetState createState() => _CompoundWidgetState(); } class _CompoundWidgetState extends State<CompoundWidget> { int _counter = 0; Function _onChanged = (value) {}; ... } Composition
18. FloatingActionButton( onPressed: () { setState(() { _counter--; // _counter++; }); widget.onChanged(_counter); }, ... ) Composition
19. Utilisation CompoundWidget( onChanged: (value) { // get widget value }, ) Source: https://gist.github.com/agnamc9/7619 70ee202b352823cbc62047b52c9c Composition
20. Plusieurs approches : • Composition • CustomPaint
21. • Fournit une surface sur laquelle dessiner • Utilise un CustomPainter pour dessiner sur la surface CustomPaint
22. class CustomView extends CustomPainter{ @override void paint(Canvas canvas, Size size) { // TODO: implement paint } @override bool shouldRepaint(CustomPainter oldDelegate) { // TODO: implement shouldRepaint throw UnimplementedError(); } } CustomPaint
23. class CustomView extends CustomPainter{ @override void paint(Canvas canvas, Size size) { // TODO: implement paint } @override bool shouldRepaint(CustomPainter oldDelegate) { // TODO: implement shouldRepaint throw UnimplementedError(); } } • paint(..) : Permet le dessin sur la surface • shouldRepaint(...) : Appelé lorsqu’un nouvelle instance du CustomPainter est fournie CustomPaint
24. paint(Canvas canvas, Size size) • Canvas : La surface dessinable • Size : La taille de la surface (définie par le parent/enfant) CustomPaint
25. Canvas • draw...(..) : Permet de dessiner des éléments sur la surface (forme, texte, image…) • Paint : Définir le style de l'élément à dessiner CustomPaint
26. Paint : Quelques attributs • color : couleur de remplissage/bordure de la forme • style : style du dessin (fill ou stroke) • strokeWidth : largeur de la bordure ... https://api.flutter.dev/flutter/dart-ui/Paint-class.html CustomPaint
27. Paint p = Paint() ..color = Colors.blue ..style = PaintingStyle.stroke ..strokeWidth = 5; Paint p = Paint() ..color = Colors.orange ..style = PaintingStyle.fill ..strokeWidth = 5; CustomPaint
28. class CustomView extends CustomPainter { … @override void paint(Canvas canvas, Size size) { double w = size.width; double h = size.height; double r = 60; canvas.drawCircle(Offset(w / 2, h / 2), r, p); } @override bool shouldRepaint(CustomPainter oldDelegate) => true; } CustomPaint
29. class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { double w = MediaQuery.of(context).size.width; double h = MediaQuery.of(context).size.height; return Scaffold( body: Container( width: w, height: h, child: CustomPaint( painter: CustomView(), ), ), ); } } CustomPaint
30. CustomPaint
31. CustomPaint Démonstration
32. Merci Agnaramon Boris-Carnot @agnamc9 Rejoignez notre communauté Dart & Flutter https://discord.gg/rpmKTAN