UI Enhancements: Spacing, Sizing & Connector Enhancements (WoC 5.0 Proposal Intent) #45

Hi maintainers :)
I’ve recently started learning Flutter/Dart, and I couldn’t wait to raise this issue to let you know that I’ll be submitting my Winter of Code 5.0 proposal specifically for Cooketh-Flow.

I absolutely love this project especially as it is very close to something I’ve previously built using React. Implementing similar ideas in Flutter/Dart would be an amazing learning experience for me.

1. UI Spacing & Sizing Normalization

• Introduce a centralized spacing + typography scale to remove ad-hoc .h / .w / .sp usage.
• Refactor major workspace widgets (Export button, Toolbar, Zoom controls) to consume these tokens.
• Enforce consistent touch targets while visually tightening layouts.

// core/theme/spacing.dart
class AppSpacing {
  static const double sm = 8;
  static const double md = 16;
  static const double lg = 24;
}

padding: EdgeInsets.symmetric(
  vertical: AppSpacing.md.h,
  horizontal: AppSpacing.lg.w,
)

2. Connector Enhancements (Routing + Metadata)

• Extend the connector model to store routing intent instead of assuming straight lines.
• Support orthogonal / bezier paths via a small path builder utility.
• Allow connectors to carry labels or icons, rendered at the path midpoint.
• Keep existing connectors backward-compatible.

enum ConnectorRouteType { straight, orthogonal, bezier }
class ConnectorObject {
  final ConnectorRouteType routeType;
  final String? labelText;
}

Path path = connector.routeType == ConnectorRouteType.orthogonal
  ? buildOrthogonalPath(start, end)
  : Path()..lineTo(end.dx, end.dy);