Building a drawing App with CustomPainter.pdf

Transcript

1. Building a drawing app with CustomPainter Por Carlos Javier Gutiérrez Sánchez
2. https://linktr.ee/carlosjgs
3. Who has ever heard about CustomPainter?
4. Who has ever used CustomPainter?
5. CustomPainter gives us access to a drawing canvas
6. CustomPainter nos da acceso a un canvas para dibujar
7. CustomPainter nos da acceso a un canvas para dibujar
8. CustomPainter nos da acceso a un canvas para dibujar
9. You can draw anything you want using the Canvas API
10. You can draw anything you want using the Canvas API
11. You can draw anything you want using the Canvas API
12. Let’s see an example
20. Any question so far?
23. Dock colores Undo Clear
24. Tools
25. 1. Persisting changes 2. Modeling the Canvas 3. User interaction 4. Demo Drawing app
26. 1. Persisting changes 2. Modeling the Canvas 3. User interaction 4. Demo Drawing app
27. We need to keep the state of our Canvas items outside of our CustomPainter
28. 1. Persisting changes 2. Modeling the Canvas 3. User interaction 4. Demo Drawing app
29. FreehandLine StraightLine Circle
30. • Posición • Grosor brocha • Color brocha • Relleno CanvasElement
31. • Posición • Grosor brocha • Color brocha • Relleno CanvasElement
32. • Posición • Grosor brocha • Color brocha • Relleno CanvasElement
33. 1. Persisting changes 2. Modeling the Canvas 3. User interaction 4. Demo Drawing app
34. How do we add interactivity?
35. We simply can parametrize our CustomPainter!
37. DateTime.now()
40. Remember about the state?
41. State
42. Estado
44. State
47. Circle tool
48. …what about the CustomPainter?
50. Demo time!
51. Thanks! Connect with me Connect with GDSC