Question

我正在使用flutter_neumorphics依赖项https://pub.dev/packages/flutter_neumorphic 制作我的圆形Neumorphic容器。但是我在尝试调整大小时遇到了一个问题。我希望外圆更小，更紧凑。这是我尝试过的代码：

  Widget build(BuildContext context) {
    final percentage = 50.0;
    return Stack(
      children: <Widget>[
        Align(
          child: Neumorphic(
            boxShape: NeumorphicBoxShape.circle(),
            padding: EdgeInsets.all(80),
            style: NeumorphicStyle(
              depth: NeumorphicTheme.embossDepth(context),
            ),
          child: CustomPaint(
            painter: NeuProgressPainter(
              circleWidth: 20,
              completedPercentage: percentage,
              defaultCircleColor: Colors.transparent,
            ),
            child: Center(),
          ),
        ),
        ),
        Align(
          child: Neumorphic(
            boxShape: NeumorphicBoxShape.circle(),
            padding: EdgeInsets.all(80),
            style: NeumorphicStyle(
              color: Colors.white,
              depth: NeumorphicTheme.depth(context),
            ),

          ),
        ),

      ],
    );
  }

NeuProgressPainter定义为：

class NeuProgressPainter extends CustomPainter {
  //
  Color defaultCircleColor;
  Color percentageCompletedCircleColor;
  double completedPercentage;
  double circleWidth;

  NeuProgressPainter(
      {this.defaultCircleColor,
      this.percentageCompletedCircleColor,
      this.completedPercentage,
      this.circleWidth});

  getPaint(Color color) {
    return Paint()
      ..color = color
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = circleWidth;
  }

  @override
  void paint(Canvas canvas, Size size) {
    Paint defaultCirclePaint = getPaint(defaultCircleColor);

    Offset center = Offset(size.width / 2, size.height / 2);
    double radius = min(size.width / 2, size.height / 2);
    Rect boundingSquare = Rect.fromCircle(center: center, radius: radius);

    paint(
      List<Color> colors,
    ) {
      final Gradient gradient = LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomRight,
        colors: colors,
      );

      return Paint()
        ..strokeCap = StrokeCap.round
        ..style = PaintingStyle.stroke
        ..strokeWidth = circleWidth
        ..shader = gradient.createShader(boundingSquare);
    }

    canvas.drawCircle(center, radius, defaultCirclePaint);

    double arcAngle = 2 * pi * (completedPercentage / 100);
    canvas.drawArc(
      Rect.fromCircle(center: center, radius: radius),
      -pi / 2,
      arcAngle,
      false,
      paint(
        [
        kcolor,
          kDarkOrange,
          kOrange,
        ],
      ),
    );
  }

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

这是我的输出结果：

我正在尝试实现与以下灵感相似的功能：

Answer 1

怎么样？

Padding(
  padding: const EdgeInsets.all(80.0),
  child: Align(
    child: Neumorphic(
      boxShape: NeumorphicBoxShape.circle(),
      padding: EdgeInsets.all(20),
      style: NeumorphicStyle(
        depth: NeumorphicTheme.embossDepth(context),
      ),
      child: CustomPaint(
        painter: NeuProgressPainter(
          circleWidth: 20,
          completedPercentage: percentage,
          defaultCircleColor: Colors.transparent,
        ),
        child: Center(),
      ),
    ),
  ),
),

如何在同心圆Flutter中对齐我的Neumorphic小部件？

1 个答案: