Create Display and Layout Components #18
Description
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.dartlib/core/widgets/display/horizontal_card.dartlib/core/widgets/display/avatar_widget.dartlib/core/widgets/display/tag_widget.dartlib/core/widgets/display/toast_widget.dartlib/core/widgets/display/list_item.dartlib/core/widgets/layout/divider.dartlib/core/widgets/layout/filter_chip.dartlib/core/widgets/calendar/weekly_calendar.dart
Additional Requirements
- Create theme configuration files:
lib/core/theme/app_theme.dartlib/core/theme/app_colors.dartlib/core/theme/app_text_styles.dartlib/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