Create Button and Navigation Components #17
Description
Description
Create button components and navigation elements used throughout the application.
Components to Create
Buttons
- Button Primary - Primary action button (filled, prominent)
- Button Secondary - Secondary action button (outlined)
- Support for loading states, disabled states, and icon+text combinations
Navigation Components
- DocPilot Nav Bar - Bottom navigation bar with tabs for main app sections
- Nav Bar - Top app bar with back button, title, and optional actions
- Status Bar - iOS/Android status bar styling
- Progress Bar - Linear progress indicator for multi-step forms
- Pagination Dots - Page indicator dots for carousels/multi-page views
Features Required
- Buttons: different sizes (small, medium, large)
- Buttons: icon support (leading/trailing icons)
- Buttons: haptic feedback on press
- Navigation: smooth transitions
- Navigation: badge support for notifications
- Progress bar: customizable steps and current step
- Safe area handling for navigation bars
Technical Requirements
- Consistent ripple/splash effects
- Accessibility labels
- Responsive sizing
Files to Create
lib/core/widgets/buttons/primary_button.dartlib/core/widgets/buttons/secondary_button.dartlib/core/widgets/buttons/tertiary_button.dartlib/core/widgets/navigation/bottom_nav_bar.dartlib/core/widgets/navigation/top_nav_bar.dartlib/core/widgets/navigation/progress_bar.dartlib/core/widgets/navigation/pagination_dots.dart
Reference
Check Figma design for exact button styles and navigation patterns.
Priority
High - Required for all user interactions and navigation
Acceptance Criteria
- All button variants work correctly
- Navigation is smooth and intuitive
- Components match Figma design
- Proper state management (active/inactive)