ZupIT/beagle

BeagleWidget must apply style and decoration

Closed this issue · 0 comments

Use case

In the alpha version of Beagle there are some limitations:

  • only the Container and Image components are applying the yoga properties of the style;
  • the decoration properties (backgroundColor, borderColor, borderWidth and cornerRadius) are not applied.

Proposal

The expected behavior for Beagle Flutter is to apply all style properties to all components, for that the recommendation is to assign this responsibility to the BeagleWidget at the moment it iterates over the component tree and builds them.

Suggestion to apply decoration

Widget _buildWidget(BeagleStyle style, Widget child) => _hasDecoration(style)
    ? DecoratedBox(decoration: _mapDecoration(style), child: child)
    : child;

bool _hasDecoration(BeagleStyle style) =>
    style?.backgroundColor != null ||
    style?.borderColor != null ||
    style?.borderWidth != null ||
    style?.cornerRadius != null;

BoxDecoration _mapDecoration(BeagleStyle style) => BoxDecoration(
      color: style?.backgroundColor != null
          ? HexColor(style.backgroundColor)
          : null,
      border: (style?.borderColor != null && style?.borderWidth != null)
          ? Border.all(
              color: HexColor(style.borderColor),
              width: style.borderWidth.toDouble(),
            )
          : null,
      borderRadius:
          BorderRadius.circular(style?.cornerRadius?.radius?.toDouble() ?? 0.0),
    );