render method

  1. @override
Widget render(
  1. NudgeButton node,
  2. BuildContext context
)
override

Implementation

@override
Widget render(NudgeButton node, BuildContext context) {
  final filled = node.variant == NudgeButtonVariant.fill ||
      node.variant == NudgeButtonVariant.elevated;
  // Destructive buttons override the dashboard-configured colours with a
  // fixed danger red, regardless of variant.
  final destructiveStyled =
      node.isDestructive && node.applyDestructiveStyling;
  final nodeBackground =
      destructiveStyled ? NudgeTokens.danger : node.background;
  // Filled/elevated variants need a light label against the red fill;
  // outline/text variants use the danger colour itself as the accent —
  // matches the dashboard's `bg-danger text-white` vs `text-danger` split.
  final nodeTextColor = destructiveStyled
      ? (filled ? const Color(0xFFFFFFFF) : NudgeTokens.danger)
      : node.textColor;
  // fill/elevated: solid bg + textColor label. outline/text: transparent bg,
  // background colour becomes the accent for the border + label.
  final background = filled ? nodeBackground : const Color(0x00000000);
  final foreground = filled ? nodeTextColor : nodeBackground;
  final elevation = node.variant == NudgeButtonVariant.elevated ? 3.0 : 0.0;

  return Material(
    color: background,
    elevation: elevation,
    shadowColor: const Color(0x55000000),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(node.radius),
      side: node.variant == NudgeButtonVariant.outline
          ? BorderSide(color: nodeBackground, width: 1.5)
          : BorderSide.none,
    ),
    clipBehavior: Clip.antiAlias,
    child: InkWell(
      onTap: _onTap(node, context),
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        child: Center(
          widthFactor: node.box.fillWidth ? null : 1,
          child: Text(
            VariableScopeProvider.of(context).resolve(node.label),
            style: TextStyle(
              color: foreground,
              fontSize: node.fontSize,
              fontWeight: node.weight,
              fontFamily: EngageFonts.fontFamily,
            ),
          ),
        ),
      ),
    ),
  );
}