Understanding stops property on LinearGradient in Flutter

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],
),

Here’s what we get:
Of 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],
),

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

How the stops…