Create Display and Layout Components

[xkaper001]

Description

Create display and layout components for showing information and organizing content.

Components to Create

Display Components

• Banner - Information/promotional banner card
• Horizontal Card - Card component for list items (patient cards, etc.)
• Avatar - User avatar component with optional edit button overlay
• Tag - Small label/tag component for status or categories
• Toast - Toast notification component for temporary messages
• List Item - Settings-style list item with icon, text, and navigation arrow

Layout Components

• Divider - Visual separator line (horizontal/vertical)
• Filter - Filter button/chip component
• Weekly Calendar - Calendar week view component with day selection

Features Required

• Cards: tap handling and ripple effects
• Cards: support for images, icons, and text
• Avatar: placeholder for no image
• Avatar: different sizes (small, medium, large)
• Toast: auto-dismiss with timer
• Toast: different types (success, error, info, warning)
• List items: chevron/arrow indicators
• Calendar: date selection and navigation

Technical Requirements

• Consistent spacing and padding
• Elevation/shadows for cards
• Smooth animations
• Responsive layouts
• Image caching for avatars
• Accessibility support

Files to Create

• lib/core/widgets/display/banner_card.dart
• lib/core/widgets/display/horizontal_card.dart
• lib/core/widgets/display/avatar_widget.dart
• lib/core/widgets/display/tag_widget.dart
• lib/core/widgets/display/toast_widget.dart
• lib/core/widgets/display/list_item.dart
• lib/core/widgets/layout/divider.dart
• lib/core/widgets/layout/filter_chip.dart
• lib/core/widgets/calendar/weekly_calendar.dart

Additional Requirements

• Create theme configuration files:
  • lib/core/theme/app_theme.dart
  • lib/core/theme/app_colors.dart
  • lib/core/theme/app_text_styles.dart
  • lib/core/constants/app_spacing.dart

Reference

Check Figma design for exact styling, spacing, and behavior.

Priority

High - Required for displaying content throughout the app

Acceptance Criteria

• All display components render correctly
• Cards are tappable with visual feedback
• Theme is consistent across components
• Components are well-documented

[github-actions]

👋 Thanks for opening this issue and contributing!

Our reviewers will check it soon 🚀

📘 If you’d like to know more about contributing, please read our CONTRIBUTING.md.