Flutter【绘制】制作一个掘金Logo组件_flutter png svg

在Flutter中，你可以使用CustomPaint组件结合Canvas和Paint类来绘制一个类似于掘金Logo的图形。以下是一个简单的示例，演示如何创建一个类似的Logo组件：

import 'package:flutter/material.dart';
 
class JinCoinLogo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200.0,
      height: 200.0,
      child: CustomPaint(
        painter: JinCoinPainter(),
      ),
    );
  }
}
 
class JinCoinPainter extends CustomPainter {
  Paint _paint;
 
  JinCoinPainter() {
    _paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill;
  }
 
  @override
  void paint(Canvas canvas, Size size) {
    // 绘制一个圆形
    canvas.drawCircle(
      Offset(size.width / 2, size.height / 2),
      size.width / 4,
      _paint,
    );
 
    // 绘制一个矩形
    Rect rect = Rect.fromPoints(
      Offset(size.width / 2 - size.width / 8, size.height / 2 - size.width / 8),
      Offset(size.width / 2 + size.width / 8, size.height / 2 + size.width / 8),
    );
    canvas.drawRect(rect, _paint);
 
    // 绘制文字
    TextPainter textPainter = TextPainter(
      textDirection: TextDirection.ltr,
    );
    textPainter.text = TextSpan(
      text: 'JIN',
      style: TextStyle(
        color: Colors.white,
        fontSize: size.width / 4,
        fontWeight: FontWeight.bold,
      ),
    );
    textPainter.layout();
    textPainter.paint(
      canvas,
      Offset(size.width / 2 - textPainter.width / 2, size.height / 2 - textPainter.height / 2),
    );
  }
 
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}
 
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: JinCoinLogo(),
      ),
    ),
  ));
}

这段代码定义了一个名为JinCoinLogo的组件，它使用CustomPaint来绘制一个蓝色的圆形和一个白色的矩形，并在圆形中间绘制了'JIN'文字。这个组件可以直接被用在任何需要的地方，作为Logo展示。