如何在flutter中创建带线(附图)的数字的UI代码

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

class CustomNumberWidget extends StatelessWidget {
  final int number;

  const CustomNumberWidget({Key? key, required this.number}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: CustomNumberPainter(number),
      child: Container(
        width: 50,
        height: 80,
      ),
    );
  }
}

class CustomNumberPainter extends CustomPainter {
  final int number;

  CustomNumberPainter(this.number);

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.black
      ..strokeWidth = 2
      ..style = PaintingStyle.stroke;

    final path = Path();
    path.moveTo(0, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0);
    path.lineTo(0, 0);
    path.close();

    // Draw the number
    switch (number) {
      case 0:
        path.moveTo(size.width * 0.2, size.height * 0.1);
        path.lineTo(size.width * 0.8, size.height * 0.1);
        path.lineTo(size.width * 0.8, size.height * 0.9);
        path.lineTo(size.width * 0.2, size.height * 0.9);
        path.close();
        break;
      case 1:
        // Draw number 1
        break;
      // Add cases for other numbers
    }

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Number'),
        ),
        body: Center(
          child: CustomNumberWidget(number: 0),
        ),
      ),
    );
  }
}