Flutter UI Component Library & Template Showcase

A modular, reusable Flutter code repository designed as a master reference for high-quality UI development without heavy third-party dependencies.

🚀 Project Architecture

The project follows a highly modular structure to ensure each component and template can be easily extracted and reused in other Flutter projects.

lib/
├── components/          # Reusable atomic UI widgets
│   ├── buttons/         # Custom buttons (Primary, Secondary, Text)
│   ├── cards/           # Standardized card containers
│   └── inputs/          # Themed text fields with validation
├── core/
│   └── theme/           # Centralized design system (Colors, Typography, ThemeData)
├── layouts/             # Shared layout wrappers and scaffolds
├── templates/           # Full-screen boilerplate templates (Auth, Dashboard, Feed)
├── screens/             # Showcase app screens (Gallery Home & Demos)
└── main.dart            # Entry point for the Showcase application

🛠 Available Components & Templates

Core Components

| Name | Description | Key Parameters | | :--- | :--- | :--- | | CustomButton | Multi-variant button system. | label, variant, isLoading, icon, onPressed | | CustomTextField | Standardized input with icons and error states. | label, hint, errorText, isPassword, prefixIcon | | CustomCard | Standard container with consistent styling. | child, padding, elevation, onTap |

Layout Templates

• AuthTemplate: A complete login/signup layout with space for a logo, input fields, and action buttons.
• DashboardTemplate: A structural boilerplate featuring a SliverAppBar, side Drawer, and BottomNavigationBar.
• FeedTemplate: A dynamic list-based layout demonstrating a content stream using CustomCard widgets.

📦 How to Reuse Components

To use any component or template in your own project:

1. Copy the File: Locate the desired widget in lib/components/ or lib/templates/.
2. Copy Dependencies: Ensure you also copy relevant theme files from lib/core/theme/ if the component relies on them.
3. Update Imports: Adjust the import paths in the copied file to match your project structure.
4. Initialize Theme: Apply AppTheme.lightTheme to your MaterialApp to ensure consistent styling.

📜 Documentation

Every component is documented using Dartdoc comments. Use flutter doc or hover over widgets in your IDE to see usage details and parameter explanations.

Built with ❤️ using pure Flutter Material widgets.