Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SVG na ratunek nudnym UI

SVG na ratunek nudnym UI

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

D28b741f42c6de5a6e28a766a9a6b808?s=128

Wojciech Warwas

June 23, 2022
Tweet

More Decks by Wojciech Warwas

Other Decks in Programming

Transcript

  1. Wojciech Warwas SVG na ratunek nudnym UI

  2. None
  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?

  7. None
  8. None
  9. None
  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