对Flutter Canvas中的Paint对象使用渐变

Question

我可以使用以下示例绘制半圆：Flutter how to draw semicircle (half circle)

但是，Paint对象似乎仅接受Color（使用Paint.color）。我想添加一个RadialGradient或LinearGradient作为Color。有可能吗？

Answer 1

是的！使用Paint.shader完全可以做到这一点。您可以直接使用Paint.shader创建渐变着色器，也可以使用dart:ui将Flutter渐变转换为着色器。

Gradient.createShader

Gradient.createShader

一个真实的例子可以是dart:ui gradient。

dart:ui

import 'dart:ui' as ui;

// In your paint method
final paint = Paint()
  ..shader = ui.Gradient.linear(
    startOffset,
    endOffset,
    [
      color1,
      color2,
    ],
  );

此示例可以是seen here。

---

这两个实际上是相同的。当您调用Flutter painting gradient时，Flutter绘画版本将其简单地转换为painting渐变（shader）。存在的原因是绘画版本更适合

import 'package:flutter/painting.dart';

// In your paint method
final paint = Paint()
  ..shader = RadialGradient(
    colors: [
      color1,
      color2,
    ],
  ).createShader(Rect.fromCircle(
    center: offset,
    radius: radius,
  ));

之类的预构建小部件。