如何像这张图片一样让孩子集中在自定义油漆上？答案

【问题标题】：How to centre child on custom paint in flutter like this image?如何像这张图片一样让孩子集中在自定义油漆上？
【发布时间】：2021-11-02 11:40:00
【问题描述】：

我试图让一些东西看起来像这样这是我的代码 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;

} `

【问题讨论】：

你尝试过使用堆栈小部件吗？我想这样做很容易
不工作............

标签： flutter flutter-layout flutter-dependencies flutter-web flutter-test

【解决方案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;
}

【讨论】：