preface

Front-end UI systems will provide a self-drawing UI interface, in this interface usually provides a Canvas, which encapsulates some basic API, developers can draw various custom graphics through Canvas. In Flutter, a CustomPaint component is provided, which can be combined with the brush CustomPainter for custom graphics drawing.

Custom UI effects

With Canvas, we can draw all kinds of special UI effects,

  • All kinds of charts,

Using the API provided by Canvas, charts such as bar charts and graphs can be drawn. This can be more perfect than other third-party plug-ins to restore the UI design effect.

  • animation

Various animation effects can be achieved using Canvas and interpolators




  • Irregular UI

In UI design, irregular visual effects are often used to express the key points. Although the front end can be cut to achieve the effect, the picture has some disadvantages such as adaptation, large volume and not enough flexibility. We can also restore the UI design draft by code through the clipping and composition functions of Canvas.




  • Functional class UI

UI effects such as the timeline can also be customized using Canvas.







Basic use and effects of CustomPaint

CustomPaint is a built-in component of FLutter. CustomPainter is an abstract interface. When subclassing CustomPainter, you must override paint and shouldRepaint. You can optionally override hitTest and shouldRebuildSemantics based on your own scenario

  • Inherit CustomPainter and rewrite paint and shouldRepaint
class _MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawRect(Rect.fromLTWH(0.0, size.width, size.height), Paint());
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return this != oldDelegate;
  }
}
Copy the code
  • Used in components
Container(
  child: CustomPaint(
    painter: _MyCustomPainter(),
  ),
  width: 100,
  height: 100.)Copy the code
  • The effect is as follows, a basic custom UI that draws a black rectangle







CustomPaint properties

CustomPaint({
  Key? key,
  this.painter,
  this.foregroundPainter,
  this.size = Size.zero,
  this.isComplex = false.this.willChange = false,
  Widget? child,
}
Copy the code
  • painter: background brush, which is displayed after the child node;
  • foregroundPainter: Foreground brush, which is displayed in front of child nodes
  • size: When child is null, it represents the default size of the drawing area. If there is a child, this parameter is ignored. The canvas size is child. If you have a child but want to specify a specific size for the canvas, you can wrap the CustomPaint implementation with SizeBox.
  • isComplexShould be complex to draw, if so, Flutter applies some caching strategies to reduce the overhead of repeated rendering.
  • willChangeAnd:isComplexUsed together, this property indicates whether the drawing will change in the next frame when caching is enabled.





These are the basic steps for customizing the UI with Canvas in Flutter. Special UI effects such as more complex charts and animations can be achieved through the APIS provided by Canvas and various effects provided by Paint. The concrete implementation will be presented step by step in the series of articles.