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 contents of will be drawn