packages/rfw/example/wasm/logic/calculator.rfwtxt

import core.widgets;

widget root = Calculator();

widget Calculator = SafeArea(
  child: Center(
    child: IntrinsicWidth(
      child: Column(
        crossAxisAlignment: "stretch",
        children: [
          Display(text: data.value.string),
          Expanded(
            child: FittedBox(
              alignment: { x: 0.0, y: 1.0 },
              child: CalculatorPad(),
            ),
          ),
        ],
      ),
    ),
  ),
);

widget CalculatorPad = Column(
  children: [
    Row(
      children: [
        CalculatorButton(label: "7", onPressed: event "digit" { arguments: [7] }),
        CalculatorButton(label: "8", onPressed: event "digit" { arguments: [8] }),
        CalculatorButton(label: "9", onPressed: event "digit" { arguments: [9] }),
        SizedBox(width: 116.0, height: 116.0),
      ],
    ),
    Row(
      children: [
        CalculatorButton(label: "4", onPressed: event "digit" { arguments: [4] }),
        CalculatorButton(label: "5", onPressed: event "digit" { arguments: [5] }),
        CalculatorButton(label: "6", onPressed: event "digit" { arguments: [6] }),
        CalculatorButton(label: "+", onPressed: event "add" { }),
      ],
    ),
    Row(
      children: [
        CalculatorButton(label: "1", onPressed: event "digit" { arguments: [1] }),
        CalculatorButton(label: "2", onPressed: event "digit" { arguments: [2] }),
        CalculatorButton(label: "3", onPressed: event "digit" { arguments: [3] }),
        CalculatorButton(label: "=", onPressed: event "equals" { }),
      ],
    ),
    Row(
      children: [
        SizedBox(width: 116.0, height: 116.0),
        CalculatorButton(label: "0", onPressed: event "digit" { arguments: [0] }),
        SizedBox(width: 116.0, height: 116.0),
        SizedBox(width: 116.0, height: 116.0),
      ],
    ),
  ],
);

widget CalculatorButton = Padding(
  padding: [8.0],
  child: SizedBox(
    width: 100.0,
    height: 100.0,
    child: Button(
      child: FittedBox(child: Text(text: args.label)),
      onPressed: args.onPressed,
    ),
  ),
);

widget Button { down: false } = GestureDetector(
  onTap: args.onPressed,
  onTapDown: set state.down = true,
  onTapUp: set state.down = false,
  onTapCancel: set state.down = false,
  child: Container(
    duration: 50,
    margin: switch state.down {
      false: [ 0.0, 0.0, 2.0, 2.0 ],
      true: [ 2.0, 2.0, 0.0, 0.0 ],
    },
    padding: [ 12.0, 8.0 ],
    decoration: {
      type: "shape",
      shape: {
        type: "stadium",
        side: { width: 1.0 },
      },
      gradient: {
        type: "linear",
        begin: { x: -0.5, y: -0.25 },
        end: { x: 0.0, y: 0.5 },
        colors: [ 0xFFFFFF99, 0xFFEEDD00 ],
        stops: [ 0.0, 1.0 ],
        tileMode: "mirror",
      },
      shadows: switch state.down {
        false: [ { blurRadius: 4.0, spreadRadius: 0.5, offset: { x: 1.0, y: 1.0, } } ],
        default: [],
      },
    },
    child: DefaultTextStyle(
      style: {
        color: 0xFF000000,
        fontSize: 32.0,
      },
      child: args.child,
    ),
  ),
);

widget Display = Container(
  height: 80.0,
  margin: [18.0],
  padding: [20.0, 12.0],
  decoration: {
    type: 'shape',
    gradient: {
      type: "linear",
      begin: { x: 0.0, y: -0.5 },
      end: { x: 0.05, y: 1.0 },
      colors: [ 0xFFFFFFFF, 0xFFDDDDDD ],
      stops: [ 0.0, 1.0 ],
      tileMode: "mirror",
    },
    shape: {
      type: "stadium",
      borderRadius: [ { x: 40.0 } ],
      side: { color: 0xFFCCCCCC, },
    }
  },
  child: SizedBoxExpand(
    child: FittedBox(
      alignment: { x: 1.0, y: 0.0, },
      child: Text(text: args.text, style: { color: 0xFF000000 }),
    ),
  ),
);