Pukaad UI App 🚀

A comprehensive and reusable UI Kit for Pukaad applications. āļŠāļļāļ”āđ€āļ„āļĢāļ·āđˆāļ­āļ‡āļĄāļ·āļ­ UI āļĄāļēāļ•āļĢāļāļēāļ™āļŠāļģāļŦāļĢāļąāļšāđāļ­āļ›āļžāļĨāļīāđ€āļ„āļŠāļąāļ™āđƒāļ™āđ€āļ„āļĢāļ·āļ­ Pukaad


ðŸ‡đ🇭 āļ āļēāļĐāļēāđ„āļ—āļĒ (Thai)

pukaad_ui_app āđ€āļ›āđ‡āļ™āđāļžāđ‡āļāđ€āļāļˆāļ—āļĩāđˆāļĢāļ§āļšāļĢāļ§āļĄāļ„āļ­āļĄāđ‚āļžāđ€āļ™āļ™āļ•āđŒ UI āļžāļ·āđ‰āļ™āļāļēāļ™āļ—āļĩāđˆāđƒāļŠāđ‰āđƒāļ™āļĢāļ°āļšāļšāļ™āļīāđ€āļ§āļĻāļ‚āļ­āļ‡ Pukaad āđ€āļžāļ·āđˆāļ­āđƒāļŦāđ‰āļ—āļļāļāđāļ­āļ›āļžāļĨāļīāđ€āļ„āļŠāļąāļ™āļĄāļĩāļŦāļ™āđ‰āļēāļ•āļēāđāļĨāļ°āļāļēāļĢāđƒāļŠāđ‰āļ‡āļēāļ™āļ—āļĩāđˆāļŠāļ­āļ”āļ„āļĨāđ‰āļ­āļ‡āļāļąāļ™ (Design System)

āļŸāļĩāđ€āļˆāļ­āļĢāđŒāļŦāļĨāļąāļ

  • Theme & Typography: āļĢāļ°āļšāļšāļŠāļĩāđāļĨāļ°āļŸāļ­āļ™āļ•āđŒāļĄāļēāļ•āļĢāļāļēāļ™āļ‚āļ­āļ‡ Pukaad
  • Custom Inputs: āļŠāđˆāļ­āļ‡āļāļĢāļ­āļāļ‚āđ‰āļ­āļĄāļđāļĨāļ—āļĩāđˆāļĢāļ­āļ‡āļĢāļąāļšāļāļēāļĢāļ•āļĢāļ§āļˆāļŠāļ­āļš (Validation) āđ€āļŠāđˆāļ™ āđ€āļšāļ­āļĢāđŒāđ‚āļ—āļĢāļĻāļąāļžāļ—āđŒ, āļĢāļŦāļąāļŠāļœāđˆāļēāļ™, OTP, reCAPTCHA
  • Specialized Cards: āļāļēāļĢāđŒāļ”āđāļŠāļ”āļ‡āļœāļĨāļŠāļģāļŦāļĢāļąāļšāļšāļ—āļ„āļ§āļēāļĄ (Blog) āđāļĨāļ°āļœāļĨāļāļēāļĢāļ„āđ‰āļ™āļŦāļē (Search Result)
  • Buttons & Navigation: āļ›āļļāđˆāļĄāļāļ”āļŦāļĨāļēāļĒāļĢāļđāļ›āđāļšāļšāđāļĨāļ°āļĢāļ°āļšāļšāļ™āļģāļ—āļēāļ‡āđ€āļšāļ·āđ‰āļ­āļ‡āļ•āđ‰āļ™

🇚ðŸ‡ļ English

pukaad_ui_app is a centralized UI library for the Pukaad ecosystem, ensuring visual consistency and rapid development across various applications.

Key Features

  • Theme & Typography: Standardized color palette and text styles.
  • Custom Inputs: Validated input fields for Phone, Password, OTP, reCAPTCHA, etc.
  • Specialized Cards: Pre-built cards for Blogs, Search Results, and Places.
  • Buttons & Navigation: Versatile button components and pre-defined layouts.

🛠 Getting Started (āđ€āļĢāļīāđˆāļĄāļ•āđ‰āļ™āđƒāļŠāđ‰āļ‡āļēāļ™)

Add pukaad_ui_app to your pubspec.yaml:

dependencies:
  pukaad_ui_app: ^0.0.4

Then run:

flutter pub get

📖 Usage Examples (āļ•āļąāļ§āļ­āļĒāđˆāļēāļ‡āļāļēāļĢāđƒāļŠāđ‰āļ‡āļēāļ™)

1. Button (āļ›āļļāđˆāļĄ)

import 'package:pukaad_ui_app/pukaad_ui_app.dart';

Button(
  text: 'āđ€āļ‚āđ‰āļēāļŠāļđāđˆāļĢāļ°āļšāļš',
  type: ButtonType.filled,
  onPressed: () =>log('Login pressed'),
)

2. Search Result Card (āļāļēāļĢāđŒāļ”āļœāļĨāļāļēāļĢāļ„āđ‰āļ™āļŦāļē)

SearchResultCard(
  title: 'āļĢāđ‰āļēāļ™āļ­āļēāļŦāļēāļĢāļ•āļąāļ§āļ­āļĒāđˆāļēāļ‡',
  subtitle: 'āļĢāļēāļĒāļĨāļ°āđ€āļ­āļĩāļĒāļ”āļĢāđ‰āļēāļ™āļ„āđ‰āļē...',
  imageUrl: 'https://example.com/image.jpg',
  type: SearchCardType.place,
  isVerified: true,
  rating: 4.5,
  reviewCount: '120',
  onTap: () {},
)

3. Blog Post Card (āļāļēāļĢāđŒāļ”āļšāļ—āļ„āļ§āļēāļĄ)

BlogPostCard(
  title: 'āļ§āļīāļ˜āļĩāđƒāļŠāđ‰āļ‡āļēāļ™āđāļ­āļ› Pukaad',
  content: '[{"insert": "āļ‚āđ‰āļ­āļ„āļ§āļēāļĄāļšāļēāļ‡āļŠāđˆāļ§āļ™..."}]',
  authorName: 'Admin',
  onTap: () {},
)

📄 License

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

Libraries

pukaad_ui_app