How to extend existing utility?

[Maksimka101]

In my application, all gradients are top-down, whereas in Flutter they go left to right. Therefore, I want to create an API like $box.gradient.linearVertical. I want to base this on LinearGradientUtility, passing in default values for begin and end. I came up with the following extension:

extension MixGradientUtilityX on GradientUtility {
  LinearGradientUtility get linearVertical => LinearGradientUtility(
        (p0) => builder(
          const LinearGradientDto(begin: Alignment.topCenter, end: Alignment.bottomCenter).merge(p0),
        ),
      );
}

However, the builder method is marked as protected, which means it cannot be used. What other way can I achieve my goal?

[leoafarias]

@Maksimka101, you bring up a valid point. Right now, we wanted to keep the builder method protected because we want to avoid the generation of custom build methods outside of the main signatures.

Here is an example:

extension LinearGradientUtilityX<T extends Attribute> on LinearGradientUtility<T> {
  LinearGradientUtility<T> get vertical {
    return LinearGradientUtility(
        (v) => only(begin: Alignment.topCenter, end: Alignment.bottomCenter));
  }
}

With this, you can have the vertical whenever the LinearGradientUtility is used. That would be $box.linearGradient.vertical or $box.decoration.gradient.linear.vertical.

When doing linearGradient.vertical.colors(), the begin and end will always be applied, and then the colors. But this can be a bit of an issue in case you linearGradient.vertical.begin() as you can see it can get complicated.

Another option, which I prefer, is to create a function method to have that as the only composable piece, and you can compose the vertical as part of the style.

extension LinearGradientUtilityX<T extends Attribute> on LinearGradientUtility<T> {
  T vertical() {
    return only(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
    );
  }
}

The main difference with this approach is that once you do linearGradient.vertical(), it will just apply the begin and end, and the utility cannot be composed further. You have to do linearGradient.colors([...]) and so on. However, I think this approach is a bit cleaner from a style perspective as it does not hide some injection of attributes, but it's just a preference.

FYI: I would not do the merge within the utility, as this is the same as using:

[Maksimka101]

Thank you for the answer!

FYI: I would not do the merge within the utility, as this is the same as using:

The same as using what?

[leoafarias]

Sorry, it's the same as the first approach, or adding the styles in the proper order, the styles take care of the merging.