Flutter如何实现双线环中间渐变效果

在Flutter中如何实现双线环的中间渐变效果？我尝试使用CustomPainter绘制两个同心圆环，但无法在两者之间的区域实现平滑的渐变色填充。希望了解具体的实现方案，包括如何控制渐变方向、颜色过渡以及性能优化的建议。能否提供代码示例或推荐可复用的第三方库？

2 回复

使用Flutter实现双线环中间渐变效果，可通过CustomPaint绘制两个圆弧，并应用Shader实现渐变。示例代码：

CustomPaint(
  painter: DoubleRingPainter(),
)

class DoubleRingPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final rect = Rect.fromCircle(center: Offset(size.width/2, size.height/2), radius: 50);
    final gradient = SweepGradient(colors: [Colors.blue, Colors.red]);
    
    // 绘制第一个环
    final paint1 = Paint()
      ..shader = gradient.createShader(rect)
      ..strokeWidth = 5
      ..style = PaintingStyle.stroke;
    canvas.drawArc(rect, 0, 2*pi, false, paint1);
    
    // 绘制第二个环（偏移一定角度）
    final paint2 = Paint()
      ..shader = gradient.createShader(rect)
      ..strokeWidth = 5
      ..style = PaintingStyle.stroke;
    canvas.drawArc(rect, pi/4, 2*pi, false, paint2);
  }
}

更多关于Flutter如何实现双线环中间渐变效果的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现双线环中间渐变效果，可以通过CustomPaint自定义绘制，结合Path和Shader来实现。以下是具体实现代码：

import 'package:flutter/material.dart';

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

class DoubleRingGradientPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height / 2);
    final outerRadius = size.width / 2;
    final innerRadius = outerRadius * 0.7; // 内环半径
    final ringWidth = outerRadius * 0.15; // 环宽度

    // 创建渐变着色器
    final gradient = SweepGradient(
      colors: [Colors.blue, Colors.purple, Colors.blue],
      stops: [0.0, 0.5, 1.0],
    ).createShader(Rect.fromCircle(center: center, radius: outerRadius));

    final paint = Paint()
      ..shader = gradient
      ..style = PaintingStyle.stroke
      ..strokeWidth = ringWidth;

    // 绘制外环
    canvas.drawCircle(center, outerRadius - ringWidth / 2, paint);

    // 绘制内环（调整渐变位置）
    final innerGradient = SweepGradient(
      colors: [Colors.red, Colors.orange, Colors.red],
      stops: [0.0, 0.5, 1.0],
    ).createShader(Rect.fromCircle(center: center, radius: innerRadius));

    paint.shader = innerGradient;
    canvas.drawCircle(center, innerRadius - ringWidth / 2, paint);
  }

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

// 使用示例
// DoubleRingGradientWidget()

关键点说明：

  1. 使用SweepGradient创建环形渐变效果
  2. 通过两个不同半径的圆环实现双环效果
  3. 调整strokeWidth控制环的宽度
  4. 内外环可以使用不同的渐变颜色组合
  5. 通过调整半径比例控制双环间距

可调整参数：

  • 修改outerRadius和innerRadius的比例调整环间距
  • 更改colors数组中的颜色值改变渐变效果
  • 调整stops数组控制渐变分布

这种实现方式灵活度高，可以通过调整参数实现各种不同的双环渐变效果。

回到顶部