Understanding stops property on LinearGradient in Flutter

Ansh Saini - Jan 5 '23 - - Dev Community

This is what the official docs say

A list of values from 0.0 to 1.0 that denote fractions along the gradient.

Problem

Lets say we have to create a bar which has a gradient going from red -> green -> blue -> black.
The percentages are as follows:
10% red
30% green
40% blue
Rest of it black (20%)

We might write something like this:



LinearGradient(
  colors: [
    Colors.red,
    Colors.green,
    Colors.blue,
    Colors.black,
  ],
  stops: [0.1, 0.4, 0.5, 0.2],
),


Enter fullscreen mode Exit fullscreen mode

Here's what we get:
Incorrect gradientOf course this is not what we want.

How to fix it?

Before we jump into the solution let's look at the problematic code



LinearGradient(
  colors: [
    Colors.red,
    Colors.green,
    Colors.blue,
    Colors.black,
  ],
  stops: [0.1, 0.4, 0.5, 0.2],
),


Enter fullscreen mode Exit fullscreen mode

We have supplied stops=[0.1, 0.4, 0.5, 0.2]

How the stops property works

The stops property requires us to specify where the color should start from. So, if we have two colors, red and black and we want both of them to take 50% of the container, we can write



LinearGradient(
  colors: [
    Colors.red,
    Colors.black,
  ],
  stops: [0, 0.6],
),


Enter fullscreen mode Exit fullscreen mode

Notice that I wrote 0.6 instead of 0.5. If we write 0.5, then it would look like a 40-60 split instead of 50-50.

0 to 0.5 would be red, then 0.6 to 1 would be black.
The following code would also give us the same result



LinearGradient(
  colors: [
    Colors.red,
    Colors.black,
  ],
  stops: [0.2, 0.6],
),


Enter fullscreen mode Exit fullscreen mode

This is because as the docs mention, if the stops array doesn’t start with a 0, it implicitly means that it would start with 0 and the first color in the colors array. Same thing happens with last value of stops array. It should either explicitly end with a 1, or flutter will implicitly consider it as 1 with last color supplied in the colors array. So, actually flutter will interpret it as:



LinearGradient(
  colors: [
    Colors.red,
    Colors.red,
    Colors.black,
    Colors.black,
  ],
  stops: [0, 0.2, 0.6, 1],
),


Enter fullscreen mode Exit fullscreen mode

Gradient Examples

Fixing the issue

Now that we know how the stops property works, we can get our desired gradient.



LinearGradient(
  colors: [
    Colors.red,
    Colors.green,
    Colors.blue,
    Colors.black,
  ],
  stops: [0.1, 0.4, 0.8, 1],
),


Enter fullscreen mode Exit fullscreen mode

Gradient fixed

Playground

I made a dartpad link if you want to play around with the examples above.

. . . . . . . . . . .