Get to know the drawing component of flutter - custompaint

brief introduction

In some scenes , We will need to draw some highly customized components , such as UI The designer gave us a problem —— Make a strange frame . witness UI The designer is for the sake of a beautiful little sister , I'm sorry to say this can't be done （ That's also very shameful ）. At this time, we can't directly use Flutter The self-contained components , Instead, you need to draw the components manually , Then you need to use CuntomPaint Components .CustomPaint Components and front end Canvas almost , Allows us to draw various elements on a canvas , Including some 、 Line 、 rectangular 、 arc 、 written words 、 Pictures, etc. .

CustomPaint Introduce

CustomPaint It's a Widget, There are three important parameters ：

CustomPaint(
  child: childWidget(),
  foregroundPainter: foregroundPainter(),
  painter: backgroundPainter(),
)

• child： CustomPaint The child components ;
• painter and foregroundPainter： All are CustomPainter class , Used for definition canvas The content of the drawing . The difference lies in , The first is execution painter The drawing instructions of . Then render on the background child Child components . Last , foregroundPainter The content of will be drawn in child upper story .

CustomPainter Provides a paint The drawing method allows us to draw graphics , The method carries canvas and size Two parameters , among canvas It's the canvas ,size It's the size of the canvas .canvas Provides many ways to draw graphics , For example, draw a path 、 rectangular 、 Circles and lines, etc .

CustomPainter Example

With the above basic concepts , Let's take a simple example to demonstrate the hierarchical relationship of three parameters . We are backgroundPainter Draw a blue square on , Then pass in a prototype image component as child, Finally, in foregroundPainter Draw a translucent red circle on the top to cover part of the picture . The final effect is as follows , In this way, we can well understand 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;
    var paint = 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;
    var paint = 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;
  }
}

In the background rendering, we formulate canvas Background color of , This is the following line of code ：

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

Other code is relatively easy to understand ,BackgroundPainter Drew a blue square ,child It's a centered circular picture , and ForegroundPainter In the middle, a picture of the same size as the circular picture is drawn , Translucent red circle . So we get the effect we want .

summary

This article introduces CustomPaint Basic use of , You can see CustomPaint It's not complicated to use , But what's really complicated is how to draw graphics , This needs to be supported by good mathematical knowledge （ Of course , If you really don't, you can also search for relevant information ）. In the next article, let's draw some common graphics .