如何让孩子像这样的图片一样集中在颤振中的自定义绘画上？

Question

我试图做一些看起来像这样的东西 这是我的代码

 CustomPaint( painter: HexagonPainter(center: Offset(100, 100), radius: 65), child: Icon(Icons.speed), );

但我得到这样的结果 他们不在一起..我怎样才能存档这个 自定义画家代码`

class HexagonPainter extends CustomPainter {
static const int SIDES_OF_HEXAGON = 6;
 final double? radius;
 final Offset? center;

HexagonPainter({this.center, this.radius});

@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()..color = Color(0xff05c2c9);
 Path path = createHexagonPath();

canvas.drawPath(path, paint);
}

Path createHexagonPath() {
final path = Path();
var angle = (math.pi * 2) / SIDES_OF_HEXAGON;
Offset firstPoint =
    Offset(radius! * math.cos(0.0), radius! * math.sin(0.0));
path.moveTo(firstPoint.dx + center!.dx, firstPoint.dy + center!.dy);
for (int i = 1; i <= SIDES_OF_HEXAGON; i++) {
  double x = radius! * math.cos(angle * i) + center!.dx;
  double y = radius! * math.sin(angle * i) + center!.dy;
  path.lineTo(x, y);
}

path.close();

return path;
}

@override
bool shouldRepaint(CustomPainter oldDelegate) => false;

} `

Answer 1

import 'package:flutter/material.dart';

import 'dart:math' as math;

void main() {
  runApp(const MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          body: Center(
        child: Stack(
          clipBehavior: Clip.none,
          alignment: Alignment.center,
          children: [
            SizedBox(
              height: 100,
              width: 100,
              child: CustomPaint(
                painter: HexagonPainter(),
              ),
            ),
            Icon(
              Icons.speed,
              size: 30,
            ),
          ],
        ),
      )),
    );
  }
}

class HexagonPainter extends CustomPainter {
  static const int SIDES_OF_HEXAGON = 6;

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()..color = const Color(0xff05c2c9);
    var radius = size.width / 2;

    Path path =
        createHexagonPath(radius, Offset(size.height / 2, size.width / 2));

    canvas.drawPath(path, paint);
  }

  Path createHexagonPath(double radius, Offset center) {
    final path = Path();
    var angle = (math.pi * 2) / SIDES_OF_HEXAGON;
    Offset firstPoint = Offset(radius * math.cos(0.0), radius * math.sin(0.0));
    path.moveTo(firstPoint.dx + center.dx, firstPoint.dy + center.dy);
    for (int i = 1; i <= SIDES_OF_HEXAGON; i++) {
      double x = radius * math.cos(angle * i) + center.dx;
      double y = radius * math.sin(angle * i) + center.dy;
      path.lineTo(x, y);
    }

    path.close();

    return path;
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

Answer 2

我能够以自己的方式实现并与您分享。更好。我确信有更好的方法。如果您有更好的方法，请告诉我。如果您有更好的方法，请让我知道。

class BorderBubblePainter extends CustomPainter {
  BorderBubblePainter({
    this.color = Colors.red,
  });

  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    final width = size.width;
    // Equivalent to width since it is circular.
    // Define a variable with a different name for easier understanding.
    final height = width;
    const strokeWidth = 1.0;

    final paint = Paint()
      ..isAntiAlias = true
      ..color = color
      ..strokeWidth = strokeWidth
      ..style = PaintingStyle.stroke;

    final triangleH = height / 10;
    final triangleW = width / 8;

    // NOTE: Set up a good beginning and end.
    const startAngle = 7;
    // NOTE: The height is shifted slightly upward to cover the circle.
    final heightPadding = triangleH / 10;

    final center = Offset(width / 2, height / 2);
    final radius = (size.width - strokeWidth) / 2;

    final trianglePath = Path()
      ..moveTo(width / 2 - triangleW / 2, height - heightPadding)
      ..lineTo(width / 2, triangleH + height)
      ..lineTo(width / 2 + triangleW / 2, height - heightPadding)
      ..addArc(
        Rect.fromCircle(center: center, radius: radius),
        // θ*π/180=rad
        (90 + startAngle) * pi / 180,
        (360 - (2 * startAngle)) * pi / 180,
      );

    canvas.drawPath(trianglePath, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

用法

class BubbleWidget extends StatelessWidget {
  const BubbleWidget({
    super.key,
  });

  static const double _width = 100.0;
  final double _height = 108.0;

  @override
  Widget build(BuildContext context) {
    return Stack(
      clipBehavior: Clip.none,
      alignment: Alignment.center,
      children: [
        SizedBox(
          width: _width,
          height: _height,
          child: CustomPaint(
            painter: BorderBubblePainter(),
          ),
        ),
        Transform.translate(
          offset: const Offset(
            0,
            -(_height - _width) / 2,
          ),
          child: Icon(
            Icons.check,
            color: Theme.of(context).colorScheme.primary,
            size: 16,
          ),
        ),
      ],
    );
  }
}

Answer 3

我已经通过使用图像而不是油漆来解决这个问题