@appiq/flutter-workflow 1.0.0 → 1.2.0

package/templates/pretty-ui-examples.md

@@ -0,0 +1,597 @@
+# Pretty UI Examples for AppIQ Flutter Workflow
+
+This document contains examples of modern, beautiful UI components following Pretty UI design principles.
+
+## Color Palette Examples
+
+### Example 1: Modern Blue Palette
+```dart
+class ModernBlueTheme {
+  static const Color primary = Color(0xFF6366F1);
+  static const Color primaryVariant = Color(0xFF4F46E5);
+  static const Color secondary = Color(0xFF06B6D4);
+  static const Color surface = Color(0xFFF8FAFC);
+  static const Color background = Color(0xFFFFFFFF);
+  static const Color error = Color(0xFFEF4444);
+  static const Color success = Color(0xFF10B981);
+}
+```
+
+### Example 2: Warm Gradient Palette
+```dart
+class WarmGradientTheme {
+  static const LinearGradient primaryGradient = LinearGradient(
+    colors: [Color(0xFFFF6B6B), Color(0xFFFFE66D)],
+    begin: Alignment.topLeft,
+    end: Alignment.bottomRight,
+  );
+  
+  static const LinearGradient secondaryGradient = LinearGradient(
+    colors: [Color(0xFF4ECDC4), Color(0xFF44A08D)],
+    begin: Alignment.topCenter,
+    end: Alignment.bottomCenter,
+  );
+}
+```
+
+## Component Examples
+
+### Modern Card Design
+```dart
+class PrettyProductCard extends StatelessWidget {
+  const PrettyProductCard({
+    super.key,
+    required this.title,
+    required this.price,
+    required this.imageUrl,
+    this.onTap,
+  });
+
+  final String title;
+  final String price;
+  final String imageUrl;
+  final VoidCallback? onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: const EdgeInsets.all(8.0),
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(16.0),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.black.withOpacity(0.08),
+            blurRadius: 20.0,
+            offset: const Offset(0, 4),
+          ),
+        ],
+      ),
+      child: Material(
+        color: Colors.transparent,
+        child: InkWell(
+          onTap: onTap,
+          borderRadius: BorderRadius.circular(16.0),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              ClipRRect(
+                borderRadius: const BorderRadius.vertical(
+                  top: Radius.circular(16.0),
+                ),
+                child: AspectRatio(
+                  aspectRatio: 16 / 9,
+                  child: Image.network(
+                    imageUrl,
+                    fit: BoxFit.cover,
+                  ),
+                ),
+              ),
+              Padding(
+                padding: const EdgeInsets.all(16.0),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      title,
+                      style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                        fontWeight: FontWeight.w600,
+                      ),
+                      maxLines: 2,
+                      overflow: TextOverflow.ellipsis,
+                    ),
+                    const SizedBox(height: 8.0),
+                    Text(
+                      price,
+                      style: Theme.of(context).textTheme.headlineSmall?.copyWith(
+                        color: Theme.of(context).primaryColor,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+```
+
+### Elegant Profile Header
+```dart
+class PrettyProfileHeader extends StatelessWidget {
+  const PrettyProfileHeader({
+    super.key,
+    required this.name,
+    required this.subtitle,
+    required this.avatarUrl,
+    this.backgroundGradient,
+  });
+
+  final String name;
+  final String subtitle;
+  final String avatarUrl;
+  final Gradient? backgroundGradient;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(24.0),
+      decoration: BoxDecoration(
+        gradient: backgroundGradient ?? LinearGradient(
+          colors: [
+            Theme.of(context).primaryColor,
+            Theme.of(context).primaryColor.withOpacity(0.7),
+          ],
+          begin: Alignment.topLeft,
+          end: Alignment.bottomRight,
+        ),
+        borderRadius: const BorderRadius.vertical(
+          bottom: Radius.circular(32.0),
+        ),
+      ),
+      child: SafeArea(
+        child: Column(
+          children: [
+            const SizedBox(height: 20.0),
+            Container(
+              decoration: BoxDecoration(
+                shape: BoxShape.circle,
+                border: Border.all(
+                  color: Colors.white,
+                  width: 4.0,
+                ),
+                boxShadow: [
+                  BoxShadow(
+                    color: Colors.black.withOpacity(0.2),
+                    blurRadius: 20.0,
+                    offset: const Offset(0, 8),
+                  ),
+                ],
+              ),
+              child: CircleAvatar(
+                radius: 50.0,
+                backgroundImage: NetworkImage(avatarUrl),
+              ),
+            ),
+            const SizedBox(height: 16.0),
+            Text(
+              name,
+              style: Theme.of(context).textTheme.headlineMedium?.copyWith(
+                color: Colors.white,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+            const SizedBox(height: 4.0),
+            Text(
+              subtitle,
+              style: Theme.of(context).textTheme.bodyLarge?.copyWith(
+                color: Colors.white.withOpacity(0.9),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+```
+
+### Modern Search Bar
+```dart
+class PrettySearchBar extends StatefulWidget {
+  const PrettySearchBar({
+    super.key,
+    this.hintText = 'Search...',
+    this.onChanged,
+    this.onSubmitted,
+  });
+
+  final String hintText;
+  final ValueChanged<String>? onChanged;
+  final ValueChanged<String>? onSubmitted;
+
+  @override
+  State<PrettySearchBar> createState() => _PrettySearchBarState();
+}
+
+class _PrettySearchBarState extends State<PrettySearchBar> {
+  final _controller = TextEditingController();
+  final _focusNode = FocusNode();
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
+      decoration: BoxDecoration(
+        color: Theme.of(context).colorScheme.surface,
+        borderRadius: BorderRadius.circular(16.0),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.black.withOpacity(0.06),
+            blurRadius: 10.0,
+            offset: const Offset(0, 2),
+          ),
+        ],
+      ),
+      child: TextField(
+        controller: _controller,
+        focusNode: _focusNode,
+        onChanged: widget.onChanged,
+        onSubmitted: widget.onSubmitted,
+        decoration: InputDecoration(
+          hintText: widget.hintText,
+          hintStyle: TextStyle(
+            color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
+          ),
+          prefixIcon: Icon(
+            Icons.search,
+            color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
+          ),
+          suffixIcon: _controller.text.isNotEmpty
+              ? IconButton(
+                  icon: const Icon(Icons.clear),
+                  onPressed: () {
+                    _controller.clear();
+                    widget.onChanged?.call('');
+                  },
+                )
+              : null,
+          border: InputBorder.none,
+          contentPadding: const EdgeInsets.symmetric(
+            horizontal: 16.0,
+            vertical: 12.0,
+          ),
+        ),
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    _focusNode.dispose();
+    super.dispose();
+  }
+}
+```
+
+### Smooth Bottom Navigation
+```dart
+class PrettyBottomNavigation extends StatelessWidget {
+  const PrettyBottomNavigation({
+    super.key,
+    required this.currentIndex,
+    required this.onTap,
+    required this.items,
+  });
+
+  final int currentIndex;
+  final ValueChanged<int> onTap;
+  final List<PrettyBottomNavItem> items;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: const EdgeInsets.all(16.0),
+      padding: const EdgeInsets.symmetric(vertical: 8.0),
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(24.0),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.black.withOpacity(0.1),
+            blurRadius: 20.0,
+            offset: const Offset(0, 8),
+          ),
+        ],
+      ),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+        children: items.asMap().entries.map((entry) {
+          final index = entry.key;
+          final item = entry.value;
+          final isSelected = index == currentIndex;
+
+          return GestureDetector(
+            onTap: () => onTap(index),
+            child: AnimatedContainer(
+              duration: const Duration(milliseconds: 200),
+              curve: Curves.easeInOut,
+              padding: const EdgeInsets.symmetric(
+                horizontal: 16.0,
+                vertical: 8.0,
+              ),
+              decoration: BoxDecoration(
+                color: isSelected
+                    ? Theme.of(context).primaryColor.withOpacity(0.1)
+                    : Colors.transparent,
+                borderRadius: BorderRadius.circular(16.0),
+              ),
+              child: Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Icon(
+                    item.icon,
+                    color: isSelected
+                        ? Theme.of(context).primaryColor
+                        : Colors.grey,
+                  ),
+                  if (isSelected) ...[
+                    const SizedBox(width: 8.0),
+                    Text(
+                      item.label,
+                      style: TextStyle(
+                        color: Theme.of(context).primaryColor,
+                        fontWeight: FontWeight.w600,
+                      ),
+                    ),
+                  ],
+                ],
+              ),
+            ),
+          );
+        }).toList(),
+      ),
+    );
+  }
+}
+
+class PrettyBottomNavItem {
+  const PrettyBottomNavItem({
+    required this.icon,
+    required this.label,
+  });
+
+  final IconData icon;
+  final String label;
+}
+```
+
+## Animation Examples
+
+### Staggered List Animation
+```dart
+class StaggeredListView extends StatefulWidget {
+  const StaggeredListView({
+    super.key,
+    required this.children,
+  });
+
+  final List<Widget> children;
+
+  @override
+  State<StaggeredListView> createState() => _StaggeredListViewState();
+}
+
+class _StaggeredListViewState extends State<StaggeredListView>
+    with TickerProviderStateMixin {
+  late AnimationController _controller;
+  List<Animation<double>> _animations = [];
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      duration: Duration(milliseconds: widget.children.length * 100),
+      vsync: this,
+    );
+
+    _animations = widget.children.map((child) {
+      final index = widget.children.indexOf(child);
+      return Tween<double>(
+        begin: 0.0,
+        end: 1.0,
+      ).animate(
+        CurvedAnimation(
+          parent: _controller,
+          curve: Interval(
+            index * 0.1,
+            (index * 0.1) + 0.5,
+            curve: Curves.easeOutBack,
+          ),
+        ),
+      );
+    }).toList();
+
+    _controller.forward();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ListView.builder(
+      itemCount: widget.children.length,
+      itemBuilder: (context, index) {
+        return AnimatedBuilder(
+          animation: _animations[index],
+          builder: (context, child) {
+            return Transform.translate(
+              offset: Offset(0, 50 * (1 - _animations[index].value)),
+              child: Opacity(
+                opacity: _animations[index].value,
+                child: widget.children[index],
+              ),
+            );
+          },
+        );
+      },
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+}
+```
+
+### Floating Action Button with Morphing
+```dart
+class MorphingFAB extends StatefulWidget {
+  const MorphingFAB({super.key});
+
+  @override
+  State<MorphingFAB> createState() => _MorphingFABState();
+}
+
+class _MorphingFABState extends State<MorphingFAB>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  late Animation<double> _scaleAnimation;
+  late Animation<double> _rotationAnimation;
+
+  bool _isExpanded = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      duration: const Duration(milliseconds: 300),
+      vsync: this,
+    );
+
+    _scaleAnimation = Tween<double>(
+      begin: 1.0,
+      end: 1.2,
+    ).animate(CurvedAnimation(
+      parent: _controller,
+      curve: Curves.easeInOut,
+    ));
+
+    _rotationAnimation = Tween<double>(
+      begin: 0.0,
+      end: 0.125, // 45 degrees
+    ).animate(CurvedAnimation(
+      parent: _controller,
+      curve: Curves.easeInOut,
+    ));
+  }
+
+  void _toggle() {
+    setState(() {
+      _isExpanded = !_isExpanded;
+    });
+
+    if (_isExpanded) {
+      _controller.forward();
+    } else {
+      _controller.reverse();
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedBuilder(
+      animation: _controller,
+      builder: (context, child) {
+        return Transform.scale(
+          scale: _scaleAnimation.value,
+          child: Transform.rotate(
+            angle: _rotationAnimation.value * 2 * 3.14159,
+            child: FloatingActionButton(
+              onPressed: _toggle,
+              child: Icon(_isExpanded ? Icons.close : Icons.add),
+            ),
+          ),
+        );
+      },
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+}
+```
+
+## Performance Optimization Examples
+
+### Efficient List with const Widgets
+```dart
+class OptimizedListItem extends StatelessWidget {
+  const OptimizedListItem({
+    super.key,
+    required this.title,
+    required this.subtitle,
+    required this.imageUrl,
+  });
+
+  final String title;
+  final String subtitle;
+  final String imageUrl;
+
+  @override
+  Widget build(BuildContext context) {
+    return const Card(
+      margin: EdgeInsets.symmetric(horizontal: 16.0, vertical: 4.0),
+      child: ListTile(
+        leading: _OptimizedAvatar(),
+        title: _OptimizedTitle(),
+        subtitle: _OptimizedSubtitle(),
+        trailing: Icon(Icons.chevron_right),
+      ),
+    );
+  }
+}
+
+class _OptimizedAvatar extends StatelessWidget {
+  const _OptimizedAvatar();
+
+  @override
+  Widget build(BuildContext context) {
+    return const CircleAvatar(
+      radius: 24.0,
+      backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
+    );
+  }
+}
+
+class _OptimizedTitle extends StatelessWidget {
+  const _OptimizedTitle();
+
+  @override
+  Widget build(BuildContext context) {
+    return const Text(
+      'Title Text',
+      style: TextStyle(fontWeight: FontWeight.w600),
+    );
+  }
+}
+
+class _OptimizedSubtitle extends StatelessWidget {
+  const _OptimizedSubtitle();
+
+  @override
+  Widget build(BuildContext context) {
+    return const Text('Subtitle text');
+  }
+}
+```
+
+These examples demonstrate modern Flutter UI design following Pretty UI principles with platform-adaptive components, smooth animations, and performance optimizations.