common_designs 1.0.1

A comprehensive, production-grade design system with robust animations for Flutter apps. Inspired by modern e-commerce interfaces with smooth transitions, interactive animations, and beautiful typography.

Vendor Design System

A comprehensive, production-grade design system with robust animations for Flutter apps. Inspired by modern e-commerce interfaces like Shopify, featuring smooth transitions, interactive animations, and beautiful typography.

✨ Features

• 🎭 Complete Animation System - Page transitions, list animations, interactive micro-animations
• 🎨 Modern Typography - Clean, hierarchical font system with Google Fonts
• 🌈 Beautiful Colors - Comprehensive color scheme with light/dark mode support
• 📱 Modal Animations - Smooth bottom sheets with margins, chat suggestions, and more
• 🎪 Onboarding Carousel - Auto-rotating product showcase with text transitions
• ⚡ Performance Optimized - 60fps animations with accessibility support
• 🧩 Modular & Composable - SOLID principles, highly reusable components
• 📦 Production Ready - Battle-tested, type-safe, null-safe

📸 Screenshots

🚀 Getting Started

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  common_designs: ^1.0.0

Then run:

flutter pub get

Quick Setup

1. Configure your theme:

import 'package:flutter/material.dart';
import '../../common_designs.dart';
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      theme: AppTheme.light(),
      darkTheme: AppTheme.dark(),
      home: const HomeScreen(),
    );
  }
}

2. Use animations:

// Animated list
AnimatedListView(
  itemCount: products.length,
  itemBuilder: (context, index) {
    return ProductCard(product: products[index]);
  },
);

// Pressable button
Pressable(
  onPressed: () => print('Pressed!'),
  child: Container(
    padding: AppSpacing.allSM,
    child: Text('Tap me'),
  ),
);

// Modal with margin
AppModals.showBottomSheetWithMargin(
  context: context,
  child: AppModalSheet(
    title: 'Options',
    child: YourContent(),
  ),
);

📚 Components

Animations

Page Transitions

// With GoRouter
GoRoute(
  path: '/details',
  pageBuilder: (context, state) {
    return AppPageTransitions.modalSlideUp(
      key: state.pageKey,
      child: DetailsScreen(),
    );
  },
);

Available transitions:

• modalSlideUp - Smooth slide from bottom (like Shopify)
• slideFromRight - iOS-style horizontal slide
• slideFromLeft - Reverse horizontal slide
• fade - Simple fade transition
• scaleWithFade - Scale + fade (good for dialogs)
• sharedAxisVertical - Material 3 shared axis

List Animations

// Staggered fade + slide
ListAnimations.staggeredFadeSlide(
  index: index,
  child: ListItem(),
);

// Grid scale animation
ListAnimations.staggeredScale(
  index: index,
  child: GridItem(),
);

// Shimmer loading
ListAnimations.shimmer(
  enabled: isLoading,
  child: SkeletonCard(),
);

Interactive Animations

// Pressable button
Pressable(
  onPressed: onTap,
  scaleAmount: 0.95,
  child: YourButton(),
);

// Like button with heart animation
LikeButton(
  isLiked: isLiked,
  onTap: toggleLike,
  likedColor: AppColors.like,
);

// Shake for errors
ShakeWidget(
  shake: hasError,
  child: TextField(),
);

// Bouncing animation
BouncingWidget(
  onTap: onTap,
  child: Icon(Icons.favorite),
);

Modal Animations

// Bottom sheet with margin (floating effect)
AppModals.showBottomSheetWithMargin(
  context: context,
  bottomMargin: 16,
  horizontalMargin: 16,
  child: YourContent(),
);

// Draggable bottom sheet
AppModals.showDraggableBottomSheet(
  context: context,
  initialChildSize: 0.6,
  child: YourContent(),
);

// Alert dialog
AppModals.showAlertDialog(
  context: context,
  title: 'Confirm',
  content: 'Are you sure?',
  actions: [/* buttons */],
);

Chat Suggestions

// Auto-stagger in/out
ChatSuggestions(
  suggestions: ['Hello', 'Help', 'Support'],
  show: textIsEmpty,
  onSuggestionTapped: (suggestion) {
    controller.text = suggestion;
  },
);

// Chat message bubbles
AnimatedChatMessage(
  message: 'Hello!',
  isUser: true,
  index: index,
);

Onboarding Carousel

OnboardingCarousel(
  slides: [
    OnboardingSlide(
      title: 'Track your orders',
      description: 'Track every step of the way',
      images: ['assets/p1.png', 'assets/p2.png', ...],
    ),
  ],
  autoPlay: true,
  autoPlayInterval: Duration(seconds: 3),
  onComplete: () => navigateToHome(),
);

Typography

// Headings
Text('Title', style: AppTypography.headlineSmall());
Text('Subtitle', style: AppTypography.titleMedium());

// Body text
Text('Description', style: AppTypography.bodyMedium());

// Labels
Text('Button', style: AppTypography.labelLarge());

// Special styles
Text('\$55.00', style: AppTypography.price());
Text('4.8 ★', style: AppTypography.rating());

Colors

// Use semantic colors
Container(color: AppColors.primary);
Text(style: TextStyle(color: AppColors.textPrimaryLight));

// Or from theme
Container(color: Theme.of(context).colorScheme.primary);

// Gradients
Container(
  decoration: BoxDecoration(
    gradient: AppGradients.primary,
  ),
);

Spacing

// Consistent spacing
SizedBox(height: AppSpacing.md);
Padding(padding: AppSpacing.allSM);
EdgeInsets.symmetric(horizontal: AppSpacing.lg);

// Border radius
BorderRadius: AppBorderRadius.md;
borderRadius: AppBorderRadius.modal;

// Shadows
boxShadow: AppShadows.medium;

🎨 Customization

You can customize the design system by modifying constants:

// In your app
class MyAppColors {
  static const primary = Color(0xFF YOUR_COLOR);
}

class MyAppTypography {
  static TextStyle get baseFont => GoogleFonts.yourFont();
}

📱 Complete Examples

See USAGE_EXAMPLES.md for comprehensive examples including:

• E-commerce product cards
• Chat interfaces
• Search with suggestions
• Filter modals
• Complete screens

⚡ Performance

• All animations run at 60fps
• Respects system accessibility settings
• Optimized widget rebuilds
• Const constructors where possible
• Proper disposal of animation controllers

🎯 Accessibility

The design system automatically:

• Respects MediaQuery.disableAnimations
• Provides proper contrast ratios
• Includes semantic labels
• Supports screen readers

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines first.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Inspired by Shopify's mobile design
• Built with Flutter's Material Design 3
• Uses Google Fonts for typography

📞 Support

• 📧 Email: [e-mail]
• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions

---

Made with ❤️ by Diwe Innocent