본문으로 건너뛰기

Flutter multiple gradients

How to apply multiple gradients as a background?

Nesting containers

Container(
  decoration: BoxDecoration(
    gradient: gradient_1, // below
  ),
  child: Container(
    decoration: BoxDecoration(
      gradient: gradient_2, // above
    ),
    child: content,
  ),
)

This also can be applied for nested multiple color (mostly for multiple alpha valied colors)

Use Gradient.lerp(a, b)

this method is not tested

Gradient.lerp(gradient_1, gradient_2, 0.5)

Linearly interpolate between two LinearGradients.

If either gradient is null, this function linearly interpolates from a a gradient that matches the other gradient in begin, end, stops and tileMode and with the same colors but transparent (using scale).

If neither gradient is null, they must have the same number of colors.

The t argument represents a position on the timeline, with 0.0 meaning that the interpolation has not started, returning a (or something equivalent to a), 1.0 meaning that the interpolation has finished, returning b (or something equivalent to b), and values in between meaning that the interpolation is at the relevant point on the timeline between a and b. The interpolation can be extrapolated beyond 0.0 and 1.0, so negative values and values greater than 1.0 are valid (and can easily be generated by curves such as Curves.elasticInOut).

References