Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
SVG na ratunek nudnym UI
Wojciech Warwas
June 23, 2022
Programming
0
6
SVG na ratunek nudnym UI
Prezentacja z meetupu 9.06.2022r na Flutter Silesia #3 w Katowicach
Wojciech Warwas
June 23, 2022
Tweet
Share
More Decks by Wojciech Warwas
See All by Wojciech Warwas
Mapy on Flutter [PL]
obiwanzenobi
1
76
Other Decks in Programming
See All in Programming
パターンマッチングを学んで新しいJavaの世界へ!Java 18までの目玉機能をおさらいしよう / Java 18 pattern matching
ihcomega56
3
370
Web API連携でCSRF対策がどう実装されてるか調べた / how to implements csrf-detection on Web API
yasuakiomokawa
2
220
ISUCON12 事前講習
rosylilly
3
3.7k
heyにおけるCI/CDの現状と課題
fufuhu
1
540
Value and Record Types
hschwentner
0
540
dotdotdot_in_predict_function
bk_18
1
170
Java初心者が知っておくべきプログラミングのこと - JJUG CCC 2022 Spring
kishida
4
510
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @wad2022
manfredsteyer
PRO
0
120
はじめてのプルリク - BLEA 編
watany
0
140
Reactive Java Microservices on Kubernetes with Spring and JHipster
deepu105
1
160
Improving Developer Experience Through Tools and Techniques 2022
krzysztofzablocki
0
320
エンジニアによる事業指標計測のススメ
doyaaaaaken
1
170
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
Building Adaptive Systems
keathley
25
1.1k
Building Your Own Lightsaber
phodgson
94
4.6k
In The Pink: A Labor of Love
frogandcode
131
21k
Testing 201, or: Great Expectations
jmmastey
21
5.4k
Designing the Hi-DPI Web
ddemaree
272
32k
Designing Experiences People Love
moore
130
22k
How to train your dragon (web standard)
notwaldorf
58
3.8k
Why You Should Never Use an ORM
jnunemaker
PRO
47
7k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
120k
The Art of Programming - Codeland 2020
erikaheidi
32
9.3k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
Transcript
Wojciech Warwas SVG na ratunek nudnym UI
None
O czym NIE będziemy mówić
SVG? Zdjęcie dodane przez Laura Meinhardt: https://www.pexels.com/pl-pl/zdjecie/pozycja- fi gur-3678799/
SVG? Zdjęcie dodane przez Laura Meinhardt: https://www.pexels.com/pl-pl/zdjecie/pozycja- fi gur-3678799/
Co jest nie tak z SVG w Flutter?
None
None
None
Porównanie wydajności https://alibaba-cloud.medium.com/how-to-make-better-use-of-svg-in- fl utter-applications-964d38cb15a5 34 ms!
Czy możemy coś z tym zrobić?
Czy możemy coś z tym zrobić?
<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>
<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>
Przewaga paint - brak i/o - kontrola nad rysowaniem -
wydajność - możliwości dalszej optymalizacji / zmian
SVG to fl utter
- 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
Rysowanie
Rysowanie
Rysowanie
Show me the code!
Show me the code!
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>
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);
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);
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!!
Clip Photo by Denniz Futalan: https://www.pexels.com/photo/close-up- photo-of-a-small-short-coated-white-puppy-2523934/ Coming soon!!
Path tracing Gra fi ki oneline wykorzystane dzięki uprzejmości fi
rmy
Path tracing
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
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