RadialGradient class
A 2D radial gradient.
This class is used by BoxDecoration to represent radial gradients. This
abstracts out the arguments to the new ui.Gradient.radial
constructor from
the dart:ui
library.
A normal radial gradient has a center and a radius. The center point
corresponds to 0.0, and the ring at radius from the center corresponds
to 1.0. These lengths are expressed in fractions, so that the same gradient
can be reused with varying sized boxes without changing the parameters.
(This contrasts with new ui.Gradient.radial
, whose arguments are expressed
in logical pixels.)
It is also possible to create a two-point (or focal pointed) radial gradient (which is sometimes referred to as a two point conic gradient, but is not the same as a CSS conic gradient which corresponds to a SweepGradient). A focal point and focalRadius can be specified similarly to center and radius, which will make the rendered gradient appear to be pointed or directed in the direction of the focal point. This is only important if focal and center are not equal or focalRadius > 0.0 (as this case is visually identical to a normal radial gradient). One important case to avoid is having focal and center both resolve to Offset.zero when focalRadius > 0.0. In such a case, a valid shader cannot be created by the framework.
The colors are described by a list of Color objects. There must be at least two colors. The stops list, if specified, must have the same length as colors. It specifies fractions of the radius between 0.0 and 1.0, giving concentric rings for each color stop. If it is null, a uniform distribution is assumed.
The region of the canvas beyond radius from the center is colored according to tileMode.
Typically this class is used with BoxDecoration, which does the painting. To use a RadialGradient to paint on a canvas directly, see createShader.
void paintSky(Canvas canvas, Rect rect) {
var gradient = RadialGradient(
center: const Alignment(0.7, -0.6), // near the top right
radius: 0.2,
colors: [
const Color(0xFFFFFF00), // yellow sun
const Color(0xFF0099FF), // blue sky
],
stops: [0.4, 1.0],
);
// rect is the area we are painting over
var paint = Paint()
..shader = gradient.createShader(rect);
canvas.drawRect(rect, paint);
}
See also:
- LinearGradient, which displays a gradient in parallel lines, and has an example which shows a different way to use Gradient objects.
- SweepGradient, which displays a gradient in a sweeping arc around a center point.
- BoxDecoration, which can take a RadialGradient in its BoxDecoration.gradient property.
- CustomPainter, which shows how to use the above sample code in a custom painter.
Constructors
-
RadialGradient({AlignmentGeometry center: Alignment.center, double radius: 0.5, @required List<
Color> colors, List< double> stops, TileMode tileMode: TileMode.clamp, AlignmentGeometry focal, double focalRadius: 0.0 }) -
Creates a radial gradient. [...]
const
Properties
- center → AlignmentGeometry
-
The center of the gradient, as an offset into the (-1.0, -1.0) x (1.0, 1.0)
square describing the gradient which will be mapped onto the paint box. [...]
final
- focal → AlignmentGeometry
-
The focal point of the gradient. If specified, the gradient will appear
to be focused along the vector from center to focal. [...]
final
- focalRadius → double
-
The radius of the focal point of gradient, as a fraction of the shortest
side of the paint box. [...]
final
- hashCode → int
-
The hash code for this object. [...]
read-only, override
- radius → double
-
The radius of the gradient, as a fraction of the shortest side
of the paint box. [...]
final
- tileMode → TileMode
-
How this gradient should tile the plane beyond the outer ring at radius
pixels from the center. [...]
final
-
colors
→ List<
Color> -
The colors the gradient should obtain at each of the stops. [...]
final, inherited
- runtimeType → Type
-
A representation of the runtime type of the object.
read-only, inherited
-
stops
→ List<
double> -
A list of values from 0.0 to 1.0 that denote fractions along the gradient. [...]
final, inherited
Methods
-
createShader(
Rect rect, { TextDirection textDirection }) → Shader -
Creates a Shader for this gradient to fill the given rect. [...]
override
-
lerpFrom(
Gradient a, double t) → Gradient -
Linearly interpolates from another Gradient to
this
. [...]override -
lerpTo(
Gradient b, double t) → Gradient -
Linearly interpolates from
this
to another Gradient. [...]override -
scale(
double factor) → RadialGradient -
Returns a new RadialGradient with its colors scaled by the given factor. [...]
override
-
toString(
) → String -
Returns a string representation of this object.
override
-
noSuchMethod(
Invocation invocation) → dynamic -
Invoked when a non-existent method or property is accessed. [...]
inherited
Operators
-
operator ==(
dynamic other) → bool -
The equality operator. [...]
override
Static Methods
-
lerp(
RadialGradient a, RadialGradient b, double t) → RadialGradient -
Linearly interpolate between two RadialGradients. [...]
override