This is the 9th day of my participation in the August More Text Challenge

preface

We all know that there are many widgets available, but no matter how many they offer, they cannot meet the needs of the product and UI. Of course, Google must have thought of this, so Flutter also supports custom views.

Related to drawing in Flutter is at the Painting level, as shown below:

This diagram of the Flutter architecture I’m sure you’ve seen many times in different articles.

Just like Flutter’s built-in Wdiget, custom widgets are compiled into native code by Skia, so performance is not affected.

The flow of customizing a View

  1. The new class inherits from the CustomPainter implementation paint () and shouldRepaint () methods
  2. Draw what you want in the paint method
  3. Build your own widgets with the help of the CustomPaint Widget

Of course, the above is only a custom process, there are a lot of details to deal with the specific implementation.

Knowledge related to drawing

If you have studied front-end or terminal development, you should be familiar with drawing. Drawing is mainly done by canvas and Paint. The canvas is where you draw graphics, and the brush is the pen with which you draw.

The canvas canvas

A canvas is a rectangular area where we can control each pixel to draw what we want

Canvas has a variety of methods for drawing points, lines, paths, rectangles, circles and adding images. Combining these methods, we can draw a kaleidoscopic picture.

Although the canvas can paint these things, it is the brush that determines the color and thickness of the shapes.

Brush Paint

Paint is a tool that we use to draw graphics. We can set the color, thickness, anti-aliasing, shape and style of the brush.

Through these properties we can easily customize our OWN UI effects, of course we can define multiple brushes in the process of “painting”, so that we are more convenient to draw graphics

Paint _paint = Paint() .. color = Colors.blueAccent// Brush color
    ..strokeCap = StrokeCap.round // Brush stroke type
    ..isAntiAlias = true // Whether to enable anti-aliasing
    ..blendMode = BlendMode.exclusion // Color blending mode
    ..style = PaintingStyle.fill // Paint style, default is fill
    ..colorFilter = ColorFilter.mode(Colors.blueAccent,
        BlendMode.exclusion) Color rendering mode is usually changed by matrix effects, but only color blending mode can be used in Flutter
    ..maskFilter =
    MaskFilter.blur(BlurStyle.inner, 3.0) // Blur mask effect, which is the only one in Flutter
    ..filterQuality = FilterQuality.high // Color rendering mode quality
    ..strokeWidth = 15.0 // The brush width
      ;
Copy the code

Offset coordinates

This one is a little bit simpler, and it usually means a point in the coordinate system.

		Offset(dx, dy)
Copy the code

Rect

In the drawing of the graph, it is generally divided into regions, which are generally a rectangle. Rect is usually used to store the location information of the drawing.

Of course, you can specify up, down, left, and right of Rect

  • Left: the left x-coordinate of the rectangle
  • Top: Y coordinate of the top of the rectangle
  • Right: the X coordinate on the right side of the rectangle
  • Bottom: Y coordinate at the bottom of the rectangle

Use your four values to determine the position and size of the rectangle.

Rect.fromCircle (Offset center, double radius) is the coordinate of the center of the circle and radius is the radius of the circle. The outer tangent rectangle of the circle formed by these two properties is the rectangle we need.

There are several ways to build Rect:

FromPoints (Offset a, Offset B) use the upper left and lower right coordinates to determine the size and position of the rectangle.doubleRadius}) using the coordinates and radii of the central point of the circle and determining the size and position of the outer tangent rectangledouble left, double top, double right, doubleUse the X coordinate on the left of the rectangle, the Y coordinate on the top of the rectangle, the X coordinate on the right of the rectangle, and the Y coordinate on the bottom to determine the size and position of the rectangle.double left, double top, double width, doubleHeight determines the size and position of the rectangle using the X coordinate on the left and the Y coordinate on the top of the rectangleCopy the code

Coordinate system in Flutter

The origin of the coordinate system in a Flutter is at the upper left corner, and the X coordinate gets bigger as you move to the right and the Y coordinate gets bigger as you move downSince we need to discharge multiple views during the View customization process, it will be much easier to customize Wdiget in the future.

The relevant code