@appiq/flutter-workflow 1.0.0 → 1.2.0

package/templates/platform-adaptive-widget-template.dart

@@ -0,0 +1,407 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/foundation.dart';
+
+/// Platform-adaptive widget template for creating native-feeling components
+/// 
+/// This template demonstrates how to create widgets that automatically
+/// adapt to iOS (Cupertino) and Android (Material) design languages
+/// 
+/// Usage Example:
+/// ```dart
+/// AdaptiveButton(
+///   onPressed: () => print('Pressed'),
+///   child: Text('Click me'),
+/// )
+/// ```
+class AdaptiveButton extends StatelessWidget {
+  const AdaptiveButton({
+    super.key,
+    required this.onPressed,
+    required this.child,
+    this.variant = AdaptiveButtonVariant.primary,
+  });
+
+  final VoidCallback? onPressed;
+  final Widget child;
+  final AdaptiveButtonVariant variant;
+
+  @override
+  Widget build(BuildContext context) {
+    switch (Theme.of(context).platform) {
+      case TargetPlatform.iOS:
+      case TargetPlatform.macOS:
+        return _buildCupertinoButton(context);
+      case TargetPlatform.android:
+      case TargetPlatform.fuchsia:
+      case TargetPlatform.linux:
+      case TargetPlatform.windows:
+      default:
+        return _buildMaterialButton(context);
+    }
+  }
+
+  Widget _buildCupertinoButton(BuildContext context) {
+    switch (variant) {
+      case AdaptiveButtonVariant.primary:
+        return CupertinoButton.filled(
+          onPressed: onPressed,
+          child: child,
+        );
+      case AdaptiveButtonVariant.secondary:
+        return CupertinoButton(
+          onPressed: onPressed,
+          child: child,
+        );
+      case AdaptiveButtonVariant.destructive:
+        return CupertinoButton.filled(
+          onPressed: onPressed,
+          child: child,
+        );
+    }
+  }
+
+  Widget _buildMaterialButton(BuildContext context) {
+    switch (variant) {
+      case AdaptiveButtonVariant.primary:
+        return FilledButton(
+          onPressed: onPressed,
+          child: child,
+        );
+      case AdaptiveButtonVariant.secondary:
+        return OutlinedButton(
+          onPressed: onPressed,
+          child: child,
+        );
+      case AdaptiveButtonVariant.destructive:
+        return FilledButton(
+          onPressed: onPressed,
+          style: FilledButton.styleFrom(
+            backgroundColor: Theme.of(context).colorScheme.error,
+            foregroundColor: Theme.of(context).colorScheme.onError,
+          ),
+          child: child,
+        );
+    }
+  }
+}
+
+enum AdaptiveButtonVariant {
+  primary,
+  secondary,
+  destructive,
+}
+
+/// Platform-adaptive navigation bar
+class AdaptiveNavigationBar extends StatelessWidget implements PreferredSizeWidget {
+  const AdaptiveNavigationBar({
+    super.key,
+    this.title,
+    this.leading,
+    this.actions,
+    this.backgroundColor,
+  });
+
+  final Widget? title;
+  final Widget? leading;
+  final List<Widget>? actions;
+  final Color? backgroundColor;
+
+  @override
+  Widget build(BuildContext context) {
+    switch (Theme.of(context).platform) {
+      case TargetPlatform.iOS:
+      case TargetPlatform.macOS:
+        return CupertinoNavigationBar(
+          middle: title,
+          leading: leading,
+          trailing: actions?.isNotEmpty == true 
+            ? Row(
+                mainAxisSize: MainAxisSize.min,
+                children: actions!,
+              )
+            : null,
+          backgroundColor: backgroundColor,
+        );
+      case TargetPlatform.android:
+      case TargetPlatform.fuchsia:
+      case TargetPlatform.linux:
+      case TargetPlatform.windows:
+      default:
+        return AppBar(
+          title: title,
+          leading: leading,
+          actions: actions,
+          backgroundColor: backgroundColor,
+        );
+    }
+  }
+
+  @override
+  Size get preferredSize {
+    switch (defaultTargetPlatform) {
+      case TargetPlatform.iOS:
+      case TargetPlatform.macOS:
+        return const Size.fromHeight(44.0);
+      case TargetPlatform.android:
+      case TargetPlatform.fuchsia:
+      case TargetPlatform.linux:
+      case TargetPlatform.windows:
+      default:
+        return const Size.fromHeight(56.0);
+    }
+  }
+}
+
+/// Platform-adaptive loading indicator
+class AdaptiveLoadingIndicator extends StatelessWidget {
+  const AdaptiveLoadingIndicator({
+    super.key,
+    this.size,
+    this.color,
+  });
+
+  final double? size;
+  final Color? color;
+
+  @override
+  Widget build(BuildContext context) {
+    switch (Theme.of(context).platform) {
+      case TargetPlatform.iOS:
+      case TargetPlatform.macOS:
+        return CupertinoActivityIndicator(
+          radius: size != null ? size! / 2 : 10.0,
+          color: color,
+        );
+      case TargetPlatform.android:
+      case TargetPlatform.fuchsia:
+      case TargetPlatform.linux:
+      case TargetPlatform.windows:
+      default:
+        return CircularProgressIndicator(
+          strokeWidth: 2.0,
+          color: color,
+        );
+    }
+  }
+}
+
+/// Platform-adaptive switch
+class AdaptiveSwitch extends StatelessWidget {
+  const AdaptiveSwitch({
+    super.key,
+    required this.value,
+    required this.onChanged,
+    this.activeColor,
+  });
+
+  final bool value;
+  final ValueChanged<bool>? onChanged;
+  final Color? activeColor;
+
+  @override
+  Widget build(BuildContext context) {
+    switch (Theme.of(context).platform) {
+      case TargetPlatform.iOS:
+      case TargetPlatform.macOS:
+        return CupertinoSwitch(
+          value: value,
+          onChanged: onChanged,
+          activeColor: activeColor,
+        );
+      case TargetPlatform.android:
+      case TargetPlatform.fuchsia:
+      case TargetPlatform.linux:
+      case TargetPlatform.windows:
+      default:
+        return Switch(
+          value: value,
+          onChanged: onChanged,
+          activeColor: activeColor,
+        );
+    }
+  }
+}
+
+/// Platform-adaptive dialog
+class AdaptiveDialog {
+  static Future<T?> show<T>({
+    required BuildContext context,
+    required String title,
+    required String content,
+    String? cancelText,
+    String? confirmText,
+    VoidCallback? onCancel,
+    VoidCallback? onConfirm,
+  }) {
+    switch (Theme.of(context).platform) {
+      case TargetPlatform.iOS:
+      case TargetPlatform.macOS:
+        return showCupertinoDialog<T>(
+          context: context,
+          builder: (context) => CupertinoAlertDialog(
+            title: Text(title),
+            content: Text(content),
+            actions: [
+              if (cancelText != null)
+                CupertinoDialogAction(
+                  onPressed: () {
+                    Navigator.of(context).pop();
+                    onCancel?.call();
+                  },
+                  child: Text(cancelText),
+                ),
+              if (confirmText != null)
+                CupertinoDialogAction(
+                  isDestructiveAction: true,
+                  onPressed: () {
+                    Navigator.of(context).pop();
+                    onConfirm?.call();
+                  },
+                  child: Text(confirmText),
+                ),
+            ],
+          ),
+        );
+      case TargetPlatform.android:
+      case TargetPlatform.fuchsia:
+      case TargetPlatform.linux:
+      case TargetPlatform.windows:
+      default:
+        return showDialog<T>(
+          context: context,
+          builder: (context) => AlertDialog(
+            title: Text(title),
+            content: Text(content),
+            actions: [
+              if (cancelText != null)
+                TextButton(
+                  onPressed: () {
+                    Navigator.of(context).pop();
+                    onCancel?.call();
+                  },
+                  child: Text(cancelText),
+                ),
+              if (confirmText != null)
+                FilledButton(
+                  onPressed: () {
+                    Navigator.of(context).pop();
+                    onConfirm?.call();
+                  },
+                  child: Text(confirmText),
+                ),
+            ],
+          ),
+        );
+    }
+  }
+}
+
+/// Pretty UI Card with modern design
+class PrettyCard extends StatelessWidget {
+  const PrettyCard({
+    super.key,
+    required this.child,
+    this.padding,
+    this.margin,
+    this.borderRadius,
+    this.elevation,
+    this.shadowColor,
+    this.backgroundColor,
+    this.onTap,
+  });
+
+  final Widget child;
+  final EdgeInsetsGeometry? padding;
+  final EdgeInsetsGeometry? margin;
+  final BorderRadius? borderRadius;
+  final double? elevation;
+  final Color? shadowColor;
+  final Color? backgroundColor;
+  final VoidCallback? onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final defaultBorderRadius = BorderRadius.circular(16.0);
+    
+    return Container(
+      margin: margin ?? const EdgeInsets.all(8.0),
+      child: Material(
+        color: backgroundColor ?? theme.colorScheme.surface,
+        borderRadius: borderRadius ?? defaultBorderRadius,
+        elevation: elevation ?? 2.0,
+        shadowColor: shadowColor ?? theme.shadowColor.withOpacity(0.1),
+        child: InkWell(
+          onTap: onTap,
+          borderRadius: borderRadius ?? defaultBorderRadius,
+          child: Padding(
+            padding: padding ?? const EdgeInsets.all(16.0),
+            child: child,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// Modern gradient button with pretty UI design
+class PrettyGradientButton extends StatelessWidget {
+  const PrettyGradientButton({
+    super.key,
+    required this.onPressed,
+    required this.child,
+    this.gradient,
+    this.borderRadius,
+    this.elevation,
+    this.padding,
+  });
+
+  final VoidCallback? onPressed;
+  final Widget child;
+  final Gradient? gradient;
+  final BorderRadius? borderRadius;
+  final double? elevation;
+  final EdgeInsetsGeometry? padding;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final defaultGradient = LinearGradient(
+      colors: [
+        theme.colorScheme.primary,
+        theme.colorScheme.primary.withOpacity(0.8),
+      ],
+      begin: Alignment.topLeft,
+      end: Alignment.bottomRight,
+    );
+
+    return Container(
+      decoration: BoxDecoration(
+        gradient: gradient ?? defaultGradient,
+        borderRadius: borderRadius ?? BorderRadius.circular(12.0),
+        boxShadow: [
+          BoxShadow(
+            color: theme.colorScheme.primary.withOpacity(0.3),
+            blurRadius: elevation ?? 8.0,
+            offset: const Offset(0, 4),
+          ),
+        ],
+      ),
+      child: Material(
+        color: Colors.transparent,
+        child: InkWell(
+          onTap: onPressed,
+          borderRadius: borderRadius ?? BorderRadius.circular(12.0),
+          child: Padding(
+            padding: padding ?? const EdgeInsets.symmetric(
+              horizontal: 24.0,
+              vertical: 12.0,
+            ),
+            child: child,
+          ),
+        ),
+      ),
+    );
+  }
+}