🛍️ Como - Ecommerce UI Kit

A beautiful, modern, and comprehensive Flutter ecommerce UI kit

📱 Screenshots

✨ Features

🎨 Modern & Minimal Design

Clean and intuitive user interface
Carefully crafted color scheme and typography
Smooth animations and transitions
Responsive layout for all screen sizes

📦 Complete Ecommerce Screens

Authentication: Login, Register
Home: Featured products, categories, banners
Products: Product listing, details, search, filters
Shopping: Cart, checkout, payment methods
Orders: Order history, tracking, reviews
User: Profile, wishlist, addresses, settings
Additional: Notifications, help & support, legal pages

🛠️ Well-Structured Codebase

Feature-based architecture
Reusable components and widgets
Clean and maintainable code
Type-safe with null safety
Comprehensive constants and styling system

🎯 Pre-built Components

Custom buttons with multiple variants
Styled text fields with validation
Product cards (vertical & horizontal layouts)
Category cards
Loading states and shimmer effects
Error handling views

🚀 Getting Started

Prerequisites

Flutter SDK: >=3.9.0
Dart SDK: >=3.0.0
iOS Simulator / Android Emulator / Physical Device

Installation

Clone the repository

git clone https://github.com/afgprogrammer/Flutter-tech-commerce-ui-kit.git
cd como

Install dependencies
```
flutter pub get
```
Run the app
```
flutter run
```

📦 Dependencies

This project uses the following key dependencies:

Package	Purpose
go_router	Navigation and routing
cached_network_image	Image caching
carousel_slider	Product carousels
google_fonts	Custom typography
hugeicons	Beautiful icon set
shimmer	Loading animations
flutter_svg	SVG support
flutter_rating_bar	Product ratings
badges	Cart badges
flutter_staggered_grid_view	Grid layouts
animations	Page transitions

📂 Project Structure

lib/
├── core/
│   ├── constants/          # App-wide constants
│   │   ├── app_colors.dart
│   │   ├── app_constants.dart
│   │   └── app_text_styles.dart
│   ├── theme/             # Theme configuration
│   │   └── app_theme.dart
│   └── utils/             # Utility functions
├── features/              # Feature modules
│   ├── auth/             # Authentication screens
│   ├── home/             # Home screen
│   ├── product/          # Product screens
│   ├── cart/             # Shopping cart
│   ├── checkout/         # Checkout flow
│   ├── order/            # Order management
│   ├── profile/          # User profile
│   ├── wishlist/         # Wishlist
│   ├── search/           # Search functionality
│   ├── categories/       # Category browsing
│   ├── notifications/    # Notifications
│   ├── settings/         # App settings
│   ├── payment/          # Payment methods
│   ├── address/          # Address management
│   ├── reviews/          # Product reviews
│   ├── help/             # Help & support
│   ├── security/         # Security settings
│   └── legal/            # Legal pages
├── models/               # Data models
│   └── product.dart
├── services/             # Business logic
│   ├── cart_service.dart
│   └── product_service.dart
├── shared/               # Shared widgets
│   └── widgets/
│       ├── como_button.dart
│       ├── como_text_field.dart
│       └── product_card.dart
└── main.dart             # App entry point

🎨 Design System

Colors

The app uses a carefully selected color palette defined in app_colors.dart:

Primary: Main brand color
Secondary: Accent color
Success: For positive actions
Error: For warnings and errors
Background: App background color
Text: Primary and secondary text colors

Typography

Custom text styles are defined in app_text_styles.dart:

Headlines (Large, Medium, Small)
Body text (Large, Medium, Small)
Labels and captions
Product-specific styles

Spacing & Layout

Consistent spacing system in app_constants.dart:

Padding values (XS, S, M, L, XL)
Border radius values
Icon sizes
Common dimensions

🔧 Customization

Changing Colors

Edit the color constants in lib/core/constants/app_colors.dart:

class AppColors {
  static const Color primary = Color(0xFF2C3E50);
  static const Color secondary = Color(0xFF3498DB);
  // ... customize other colors
}

Changing Fonts

Modify the font family in lib/core/constants/app_text_styles.dart or use different Google Fonts.

Adding New Screens

Create a new feature folder in lib/features/
Add your screen widgets
Update navigation in main.dart or router configuration

🛠️ Available Screens

✅ Authentication

Login Screen
Registration Screen

✅ Shopping

✅ User Management

✅ Additional

📱 Screens Demo

The project includes an all_screens_demo.dart file that showcases all available screens in one place for easy navigation and testing.

🤝 Contributing

Contributions are welcome! Here's how you can help:

Fork the repository
Create a new branch (git checkout -b feature/amazing-feature)
Make your changes
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Please read CONTRIBUTING.md for details on our code of conduct and the process for submitting pull requests.

🐛 Bug Reports & Feature Requests

If you encounter any bugs or have feature requests, please create an issue on GitHub.

📝 License

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

💖 Support

If you like this project, please consider:

⭐ Starring the repository
🍴 Forking it
📢 Sharing it with others
💬 Providing feedback

👨‍💻 Author

Mohammad - @afgprogrammer

🙏 Acknowledgments

Flutter - UI toolkit
HugeIcons - Beautiful icon set
Unsplash - Sample product images
Community contributors and supporters

Made with ❤️ by The Flutter Lover

If this project helped you, please give it a ⭐

Name		Name	Last commit message	Last commit date
Latest commit History 27 Commits
android		android
assets/screenshots		assets/screenshots
ios		ios
lib		lib
test		test
web		web
.gitignore		.gitignore
.metadata		.metadata
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
COMPONENTS.md		COMPONENTS.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
SETUP.md		SETUP.md
analysis_options.yaml		analysis_options.yaml
pubspec.lock		pubspec.lock
pubspec.yaml		pubspec.yaml

License

afgprogrammer/Flutter-tech-commerce-ui-kit

Folders and files

Latest commit

History

Repository files navigation