SVG na ratunek nudnym UI

Prezentacja z meetupu 9.06.2022r na Flutter Silesia #3 w Katowicach

Transcript

1. Wojciech Warwas SVG na ratunek nudnym UI
3. O czym NIE będziemy mówić
4. SVG? Zdjęcie dodane przez Laura Meinhardt: https://www.pexels.com/pl-pl/zdjecie/pozycja- fi gur-3678799/
5. SVG? Zdjęcie dodane przez Laura Meinhardt: https://www.pexels.com/pl-pl/zdjecie/pozycja- fi gur-3678799/
6. Co jest nie tak z SVG w Flutter?
10. Porównanie wydajności https://alibaba-cloud.medium.com/how-to-make-better-use-of-svg-in- fl utter-applications-964d38cb15a5 34 ms!
11. Czy możemy coś z tym zrobić?
12. Czy możemy coś z tym zrobić?
13. <svg height="80" width="300"> <g fill="none"> <path stroke="red" d="M5 20 l215 0" /> <path stroke="black" d="M5 40 l215 0" /> <path stroke="blue" d="M5 60 l215 0" /> </g> </svg>
14. <svg height="80" width="300"> <g fill="none"> <path stroke="red" d="M5 20 l215 0" /> <path stroke="black" d="M5 40 l215 0" /> <path stroke="blue" d="M5 60 l215 0" /> </g> </svg>
15. Przewaga paint - brak i/o - kontrola nad rysowaniem - wydajność - możliwości dalszej optymalizacji / zmian
16. SVG to fl utter
17. - node.js CLI - generuje kod Flutter na podstawie SVG - krzywe beziera - FILL oraz STROKE - path tracing svg-to- fl utter convert ~/path.svg SVG to fl utter
18. Rysowanie
19. Rysowanie
20. Rysowanie
21. Show me the code!
22. Show me the code!
23. Show me the code! <svg height="80" width="300"> <g fill="none"> <path stroke="red" d="M5 20 l215 0" /> <path stroke="black" d="M5 40 l215 0" /> <path stroke="blue" d="M5 60 l215 0" /> </g> </svg>
24. Show me the code! <svg height="80" width="300"> <g fill="none"> <path stroke="red" d="M5 20 l215 0" /> <path stroke="black" d="M5 40 l215 0" /> <path stroke="blue" d="M5 60 l215 0" /> </g> </svg> class MyPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { Path path = Path(); final Paint paint = Paint(); // Path 3 Stroke path = Path(); paint.color = const Color(0xff0000ff); paint.style = PaintingStyle.stroke; paint.strokeWidth = 1; path.moveTo(size.width * 0.02, size.height * 0.75); path.lineTo(size.width * 0.73, size.height * 0.75); canvas.drawPath(path, paint); } @override bool shouldRepaint(CustomPainter oldDelegate) { return true; } } // Path 1 Stroke paint.color = const Color(0xffff0000); paint.style = PaintingStyle.stroke; paint.strokeWidth = 1; path.moveTo(size.width * 0.02, size.height * 0.25); path.lineTo(size.width * 0.73, size.height * 0.25); canvas.drawPath(path, paint);
25. Show me the code! <svg height="80" width="300"> <g fill="none"> <path stroke="red" d="M5 20 l215 0" /> <path stroke="black" d="M5 40 l215 0" /> <path stroke="blue" d="M5 60 l215 0" /> </g> </svg> // Path 1 Stroke paint.color = const Color(0xffff0000); paint.style = PaintingStyle.stroke; paint.strokeWidth = 1; path.moveTo(size.width * 0.02, size.height * 0.25); path.lineTo(size.width * 0.73, size.height * 0.25); canvas.drawPath(path, paint);
26. Clip Photo by Chevanon Photography: https://www.pexels.com/photo/two-yellow-labrador-retriever-puppies-1108099/ Photo by Pixabay: https://www.pexels.com/photo/short-coated-black-and-brown-puppy-in-white-and-red-polka-dot-ceramic-mug-on-green- fi eld-39317/ Photo by Denniz Futalan: https://www.pexels.com/photo/close-up-photo-of-a-small-short-coated-white-puppy-2523934/ Coming soon!!
27. Clip Photo by Denniz Futalan: https://www.pexels.com/photo/close-up- photo-of-a-small-short-coated-white-puppy-2523934/ Coming soon!!
28. Path tracing Gra fi ki oneline wykorzystane dzięki uprzejmości fi rmy
29. Path tracing
30. Path tracing PathMetrics pathMetrics = path.computeMetrics(); for (PathMetric pathMetric in pathMetrics) { Path extractPath = pathMetric.extractPath( 0.0, pathMetric.length * progress, ); canvas.drawPath(extractPath, paint); } svg-to- fl utter convert ~/path.svg --path-tracing svg-to- fl utter convert ~/path.svg —path-tracing-all
31. Dzięki za uwagę! Q&A Dodatkowe podziękowania: Kuba za pomysły Iteo za one line Łukasz za cierpliwość https://github.com/ fl utter-clutter/svg-to- fl utter-path-converter https://github.com/obiwanzenobi/svg-to- fl utter-path-converter/tree/temp/fsilesia