I am able to draw a semi circle using the following example: Flutter how to draw semicircle (half circle)
However, the Paint
object only seems to accept a Color
(using Paint.color
). I would like to add a RadialGradient
or LinearGradient
as the Color
. Is that possible?
Yes! This is totally possible using Paint.shader
.
You can either create a gradient shader directly using dart:ui
or convert a Flutter gradient to a shader using Gradient.createShader
.
dart:ui
gradientimport 'dart:ui' as ui;
// In your paint method
final paint = Paint()
..shader = ui.Gradient.linear(
startOffset,
endOffset,
[
color1,
color2,
],
);
A real world example can be seen here.
painting
gradientimport 'package:flutter/painting.dart';
// In your paint method
final paint = Paint()
..shader = RadialGradient(
colors: [
color1,
color2,
],
).createShader(Rect.fromCircle(
center: offset,
radius: radius,
));
An example of this can be found here.
These two are effectively the same. The Flutter painting version simply converts it to a dart:ui
gradient (shader) when you call createShader
. The reason it exists is that the painting version is better suited for prebuilt widgets like Container
.