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

Question

我可以使用以下示例绘制半圆：

然而，Paint 对象似乎只接受 Color（使用 Paint.color）。我想添加一个 RadialGradient 或 LinearGradient 作为 Color。这可能吗？

Answer 1

是的！这完全有可能使用 Paint.shader.
您可以直接使用 dart:ui 创建渐变着色器，也可以使用 Gradient.createShader.

将 Flutter 渐变转换为着色器

`dart:ui` gradient

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

import 'package:flutter/painting.dart';

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

例如 found here。

这两个实际上是一样的。 Flutter 绘画版本在调用 createShader 时只是将其转换为 dart:ui 渐变（shader）。它存在的原因是绘画版本更适合像 Container.

这样的预构建小部件

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

Use Gradient with Paint object in Flutter Canvas

canvas

flutter

flutter-layout

flutter-canvas

`dart:ui` gradient

Flutter `painting` gradient