你可以尝试使用this tool。您可以从SVG生成Flutter CustomPainter代码。您可以将此图像转换为SVG并将SVG代码粘贴到本网站中。它会给予你密码！我希望这对你有帮助。如果你在这个过程中有任何问题，你可以问。

可以使用CustomPainter。代码将是两个圆圈，中间有一条线，圆圈内有一个加号/减号文本。

结果

x1c 0d1x的数据

示例

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: CircleShapeWidget(),
        ),
      ),
    );
  }
}


class CircleShapePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Color(0xff3D3C3B)
      ..strokeWidth = 5
      ..style = PaintingStyle.fill;

    canvas.drawCircle(Offset(115, 100), 50, paint); // first circle
    canvas.drawCircle(Offset(230, 100), 50, paint); // second circle

    canvas.drawLine(Offset(140, 100), Offset(180, 100), paint); // line between circles

    // Draw "-" text in the first circle
    _drawText(canvas, "-", Offset(120, 100));

    // Draw "+" text in the second circle
    _drawText(canvas, "+", Offset(230, 100));
  }

  void _drawText(Canvas canvas, String text, Offset offset) {
    final textStyle = TextStyle(
      color: Colors.white,
      fontSize: 40,
      fontWeight: FontWeight.bold,
    );
    final textPainter = TextPainter(
      text: TextSpan(text: text, style: textStyle),
      textDirection: TextDirection.ltr,
    );

    textPainter.layout(minWidth: 0, maxWidth: double.infinity);
    final offsetCentered = Offset(
      offset.dx - (textPainter.width / 2),
      offset.dy - (textPainter.height / 2),
    );
    textPainter.paint(canvas, offsetCentered);
  }

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

class CircleShapeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: CircleShapePainter(),
      size: Size(200, 200),
    );
  }
}

字符串

有用资源

• Custom painting in Flutter的
• Flutter Tutorial - Custom Paint - Draw Line, Square, Rect, Circle, Triangle, Arc & Image的