With JSON however I can not use the whitegreygradcolor as it is a variable. How would I use the gradient variable in JSON - or what would be an alternative approach to create the gradient fill?
Brushes are automatically converted into JSON by the Model.toJson and fromJson methods. Of course, there is a limit to what kinds of brushes that can be faithfully converted – it cannot handle patterns.
Alternatively, and you might prefer this for its simplicity, is to store just the information you need in your own data properties. If all your gradients are the same except one color, just save that one color. Or maybe you want to save two colors. Or maybe you want to save two colors and a direction. Whatever you choose, you can do your Binding of the Shape.fill property by using a converter function that constructs the Brush that you want to use.
Pattern Brushes depend on an external resource that we cannot reliably serialize.
The best that you can do is leave enough information in the data, as strings or numbers, that you can reconstruct the Brush in a Binding conversion function.