功能：CustomPaint

• 相當于在一個畫布上面畫畫，可以自己繪制不同的顏色形狀等
• 在各種widget 或者是插件不能滿足到需求的時候，可以自己定義一些形狀

---

使用實例和代碼：

CustomPaint： 能使你繪制的東西顯示在你的ui 上面，
painter=》child=》oregroundPainter，foregroundPainter最外面的一層會覆蓋painter，child 層里面的widget.

 return Container(//painter 繪制完成之后需要再CustomPaint 里面構建稱為widgetchild: Center(child: CustomPaint(child: Icon(Icons.abc,size: 40,color: Colors.red,),painter: MybackGroudnPaiter(), //最內一層//  child: ,//子組件，在中間foregroundPainter: ForegroundPainter(), //最外面一層，也是  CustomPainter),),);

CustomPainter 繪制

class MybackGroudnPaiter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {//canvas 畫布，size 畫布的尺寸//在這邊繪制// canvas.drawColor(Colors.red, BlendMode.color);var centerp = size / 2;//定義畫筆是什么顏色,樣式，畫筆的寬度var paint = Paint()..color = Colors.teal..style = PaintingStyle.fill..strokeWidth = 2.0;canvas.drawRect(Rect.fromLTWH(centerp.width - 100, centerp.height - 100, 200, 200),paint);}@overridebool shouldRepaint(covariant CustomPainter oldDelegate) {return true;}
}class ForegroundPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var centerp = size / 2;//定義畫筆是什么顏色,樣式，畫筆的寬度var paint = Paint()..color = Colors.pink..style = PaintingStyle.fill..strokeWidth = 2.0;canvas.drawRect(Rect.fromLTWH(centerp.width - 130, centerp.height - 130, 200, 200),paint);}@overridebool shouldRepaint(covariant CustomPainter oldDelegate) {// TODO: implement shouldRepaintreturn true;}
}

---

繪畫的能力

我們繪制1000個彩色點點，從上往下掉落，看看性能，沒有任何的卡頓，真給力

import 'dart:math';
import 'package:flutter/material.dart';void main() => runApp(const MyApp());class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return const MaterialApp(home: Scaffold(backgroundColor: Colors.white,body: MyHomePage(title: 'jack ma',),),);}
}class MyHomePage extends StatefulWidget {const MyHomePage({Key? key, required this.title}) : super(key: key);final String title;@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage>with SingleTickerProviderStateMixin {late AnimationController _controller;final List<Snowflake> _snowflakes =List.generate(1000, (index) => Snowflake());@overridevoid initState() {;_controller =AnimationController(vsync: this, duration: const Duration(seconds: 5))..repeat();super.initState();}@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: SizedBox(width: double.infinity,height: double.infinity,child: AnimatedBuilder(animation: _controller,builder: (BuildContext context, Widget? child) {//一直在這邊build，5s 動畫運行時間for (var snow in _snowflakes) {snow.fall();}return CustomPaint(painter: MyPainter(_snowflakes),);},),),));}
}class MyPainter extends CustomPainter {final List<Snowflake> _snowflakes;MyPainter(this._snowflakes);@overridevoid paint(Canvas canvas, Size size) {final whitePaint = Paint()..color = Colors.grey;for (int i = 0; i < 1000; i++) {whitePaint.color = Colors.primaries[i % Colors.primaries.length];canvas.drawCircle(Offset(_snowflakes[i].x, _snowflakes[i].y),_snowflakes[i].radius, whitePaint);}}@overridebool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}class Snowflake {double x = Random().nextDouble() * 400;double y = Random().nextDouble() * 800;double radius = Random().nextDouble() * 2 + 2;double velocity = Random().nextDouble() * 4 + 2;void fall() {y += velocity;if (y > 800) {y = 0;x = Random().nextDouble() * 400;radius = Random().nextDouble() * 2 + 2;velocity = Random().nextDouble() * 4 + 2;}}
}