前言

最近UI要实现一个效果如下：

一、实现代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_xie/custom_painter/custom_painter_canvas.dart';

class HBCustomPainter extends StatefulWidget {
  const HBCustomPainter({Key? key}) : super(key: key);

  @override
  State<HBCustomPainter> createState() => _HBCustomPainterState();
}

class _HBCustomPainterState extends State<HBCustomPainter> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('绘制')),
      body: _buildContent(context),
    );
  }

  _buildContent(BuildContext context) {
    return Column(
      children: [
        Container(
          width: MediaQuery.of(context).size.width,
          height: 400,
          color: Colors.red,
          child: CustomPaint(painter: MYCustomPainter()),
        )
      ],
    );
  }
}

继承于CustomPainter

import 'package:flutter/material.dart';

class MYCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill
      ..strokeWidth = 1;

    Path path = Path();
    path.moveTo(100, 100);
    path.lineTo(140, 60); //开始点
    path.quadraticBezierTo(150, 50, 160, 50); //中间点，结束点
    path.lineTo(290, 50);
    path.quadraticBezierTo(300, 50, 300, 55); //中间点，结束点
    path.lineTo(300, 95);
    path.quadraticBezierTo(300, 100, 295, 100); //中间点，结束点
    path.lineTo(100, 100);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant MYCustomPainter oldDelegate) {
    //和刷新有关
    return true;
  }
}

二、参考地址

Flutter学习：使用CustomPaint绘制路径

END.