Introduction to the

In some scenarios, we need to draw some highly customized components, such as the UI designer who gave us a challenge to create a strange border. See UI designer is a beautiful little sister on the share, and embarrassed to say that this can not do (that is also very face 😂). Instead of using the components that come with Flutter, we need to draw them manually, using the CuntomPaint component. The CustomPaint component is similar to the front-end Canvas, allowing usto draw various elements on a Canvas, including points, lines, rectangles, arcs, text, images, and so on.

CustomPaint introduction

CustomPaint is a Widget with three important parameters:

CustomPaint(
  child: childWidget(),
  foregroundPainter: foregroundPainter(),
  painter: backgroundPainter(),
)
Copy the code
  • child:CustomPaintChild component of;
  • painterandforegroundPainterAre:CustomPainterClass for definitioncanvasThe content of the drawing. The difference is, first, executionpainterDraw command. The next step is to render on the backgroundchildThe child component. In the end,foregroundPainterThe content will be drawn inchildOn the first floor.

CustomPainterProvides a paint drawing method for drawing graphics that carriescanvas 和sizeTwo parameters, wherecanvasIs the canvas,sizeIt’s the size of a canvas.canvasThere are many ways to draw graphics, such as drawing paths, rectangles, circles and lines.

CustomPainter sample

With these basic concepts in mind, let’s use a simple example to demonstrate the hierarchy of three parameters. We are inbackgroundPainterDraw a blue square and pass in a prototype image component aschildAnd finally inforegroundPainterDraw a semi-transparent red circle to cover part of the image. The final result is shown below, so that we can have a good understanding of the relationship between the three elements.The complete code is as follows:

import 'dart:ui';
import 'package:flutter/material.dart';

class BasicPaintPage extends StatelessWidget {
  const BasicPaintPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      child: Center(
        child: ClipOval(
          child: Image.asset(
            'images/beauty.jpeg',
            width: 200,
            height: 200, fit: BoxFit.fitWidth, ), ), ), painter: BackgroundPainter(), foregroundPainter: ForegroundPainter(), ); }}class BackgroundPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawColor(Color(0xFFF1F1F1), BlendMode.color);
    var center = size / 2;
    varpaint = Paint().. color = Color(0xFF2080E5);
    paint.strokeWidth = 2.0;

    canvas.drawRect(
      Rect.fromLTWH(center.width - 120, center.height - 120.240.240),
      paint,
    );
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false; }}class ForegroundPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var center = size / 2;
    varpaint = Paint().. color = Color(0x80F53010);
    paint.strokeWidth = 2.0;

    canvas.drawCircle(
      Offset(center.width, center.height),
      100,
      paint,
    );
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false; }}Copy the code

In the background drawing, we made the background color of canvas, namely the following code:

canvas.drawColor(Color(0xFFF1F1F1), BlendMode.color);
Copy the code

The rest of the code is relatively easy to understand. The BackgroundPainter draws a blue square, the Child is a centered circle, and the ForegroundPainter draws a semi-transparent red circle in the middle that is the same size as the circle. So we have what we want.

conclusion

This article introduces the basic use of CustomPaint. You can see that CustomPaint is not complicated to use, but the real complexity is how to draw graphics, which requires a good mathematical knowledge (of course, you can also search for relevant information if you really can’t). In the next article we will draw some common graphs.

I am dao Code Farmer with the same name as my wechat official account. This is a column about the introduction and practice of Flutter, providing systematic learning articles about Flutter. See the corresponding source code here: The source code of Flutter Introduction and Practical column. If you have any questions, please add me to the wechat account: island-coder.

👍🏻 : feel the harvest please point a praise to encourage!

🌟 : Collect articles, easy to look back!

💬 : Comment exchange, mutual progress!