Flutter Practical CustomPaint example, implementing radial gradient with blur, working with Figma

In this tutorial, we will explore how to work with the CustomPaint widget to create interesting effects. We will work intensively with Figma to replicate the design. Canvas APIs we will use include shaders and filters.

*Environment:*
- macOS 13.0.1 (22A400)
- Flutter 3.3.9

*Outline:*
00:00 - Intro
00:28 - Draw red rect
02:32 - Working with Figma to understand drawing logic
04:15 - Radial gradient and switching to circle
10:43 - Positioning
12:53 - Adding a bottom circle

Тэги:

#flutter #flutter_tutorial #custom_paint #flutter_custompaint #custom_painter #flutter_canvas #flutter_rect #flutter_shader #flutter_radial_gradient #flutter_blur_effect #flutter_blend_mode #blendmodels #flutter_blend_mode_overlay #flutter_figma #flutter_drawing #flutter_radialgradient #radialgradient #flutter_maskfilter #mask_filter_blur #blend_mode_opacity_flutter #painter #custompaint #background #flutter_create_shader #radial_gradient_center #flutter_center_point #blur_style

Скачать видео