Five Retail UX Patterns in Flutter: Optimistic Cart, Steppers & Sticky Bars

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class OptimisticAddToCartButton extends StatefulWidget {
  final VoidCallback onAdd;
  const OptimisticAddToCartButton({super.key, required this.onAdd});
  @override
  State<OptimisticAddToCartButton> createState() => _OptimisticAddToCartButtonState();
}
class _OptimisticAddToCartButtonState extends State<OptimisticAddToCartButton> {
  bool _isAdded = false;
  void _handleTap() {
    HapticFeedback.lightImpact();
    setState(() => _isAdded = true);
    widget.onAdd();
    Future.delayed(const Duration(milliseconds: 1400), () {
      if (mounted) setState(() => _isAdded = false);
    });
  }
  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: const Duration(milliseconds: 240),
      curve: Curves.easeOutCubic,
      height: 48,
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          backgroundColor: _isAdded ? const Color(0xFF10B981) : const Color(0xFF6366F1),
          foregroundColor: Colors.white,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
          elevation: _isAdded ? 0 : 2,
        ),
        onPressed: _handleTap,
        child: AnimatedSwitcher(
          duration: const Duration(milliseconds: 200),
          transitionBuilder: (child, anim) => ScaleTransition(scale: anim, child: child),
          child: _isAdded
              ? const Row(
                  key: ValueKey('added'),
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Icon(Icons.check, size: 18),
                    SizedBox(width: 8),
                    Text('Added to Bag', style: TextStyle(fontWeight: FontWeight.bold)),
                  ],
                )
              : const Row(
                  key: ValueKey('default'),
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Icon(Icons.shopping_bag_outlined, size: 18),
                    SizedBox(width: 8),
                    Text('Add to Bag', style: TextStyle(fontWeight: FontWeight.bold)),
                  ],
                ),
        ),
      ),
    );
  }
}

class InlineQuantityStepper extends StatelessWidget {
  final int quantity;
  final int maxStock;
  final ValueChanged<int> onChanged;
  const InlineQuantityStepper({
    super.key,
    required this.quantity,
    required this.maxStock,
    required this.onChanged,
  });
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: const Color(0xFFF3F4F6),
        borderRadius: BorderRadius.circular(24),
        border: Border.all(color: const Color(0xFFE5E7EB)),
      ),
      padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          IconButton(
            icon: Icon(quantity == 1 ? Icons.delete_outline : Icons.remove, size: 16),
            padding: EdgeInsets.zero,
            constraints: const BoxConstraints(minWidth: 32, minHeight: 32),
            onPressed: () => onChanged(quantity - 1),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8),
            child: Text(
              '$quantity',
              style: const TextStyle(fontWeight: FontWeight.w700, fontSize: 13),
            ),
          ),
          IconButton(
            icon: const Icon(Icons.add, size: 16),
            padding: EdgeInsets.zero,
            constraints: const BoxConstraints(minWidth: 32, minHeight: 32),
            onPressed: quantity < maxStock ? () => onChanged(quantity + 1) : null,
          ),
        ],
      ),
    );
  }
}

class StickyCheckoutBar extends StatelessWidget {
  final String totalText;
  final VoidCallback onCheckout;
  const StickyCheckoutBar({
    super.key,
    required this.totalText,
    required this.onCheckout,
  });
  @override
  Widget build(BuildContext context) {
    final bottomInset = MediaQuery.paddingOf(context).bottom;
    return Container(
      decoration: BoxDecoration(
        color: Theme.of(context).cardColor,
        border: Border(top: BorderSide(color: Colors.grey.withOpacity(0.15))),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.04),
            blurRadius: 10,
            offset: const Offset(0, -4),
          ),
        ],
      ),
      padding: EdgeInsets.fromLTRB(16, 12, 16, bottomInset > 0 ? bottomInset + 4 : 12),
      child: Row(
        children: [
          Expanded(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text('Total Amount', style: TextStyle(fontSize: 11, color: Colors.grey)),
                Text(
                  totalText,
                  style: const TextStyle(fontSize: 18, fontWeight: FontWeight.extrabold),
                ),
              ],
            ),
          ),
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              padding: const EdgeInsets.symmetric(horizontal: 28, vertical: 14),
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
            ),
            onPressed: onCheckout,
            child: const Text('Proceed to Checkout', style: TextStyle(fontWeight: FontWeight.bold)),
          ),
        ],
      ),
    );
  }
}