Использование градиента с объектом Paint в Flutter Canvas - PullRequest
2 голосов
/ 01 февраля 2020

Я могу нарисовать полукруг, используя следующий пример: Флаттер, как нарисовать полукруг (полукруг)

Однако объект Paint, кажется, принимает только Color (используя Paint.color). Я хотел бы добавить RadialGradient или LinearGradient в качестве Color. Это возможно?

1 Ответ

3 голосов
/ 01 февраля 2020

Да! Это вполне возможно, используя Paint.shader.
. Вы можете создать градиентный шейдер непосредственно, используя dart:ui, или преобразовать градиент Flutter в шейдер, используя Gradient.createShader.

dart:ui градиент

import 'dart:ui' as ui;

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

Примером реального мира может быть здесь .

Флаттер painting Градиент

import 'package:flutter/painting.dart';

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

Примером этого может быть найденный здесь .


Эти два фактически одинаковы. Версия рисования флаттера просто преобразует его в dart:ui градиент ( шейдер ) при вызове createShader. Причина, по которой он существует, заключается в том, что версия для рисования лучше подходит для встроенных виджетов, таких как Container.

...