Develop a common app bar UI aligned with the design standards of the Amdital app.
Acceptance Criteria:
1. Architecture & State Management:
BLoC Implementation:
Create a separate Daily Activity BLoC to maintain all app bar functionality
Handle check-in/check-out states, break management, and UI state transitions
Implement proper state management for expanded/collapsed app bar states
2. SliverAppBar Implementation:
Technical Requirements:
Use SliverAppBar widget for implementation
Implement smooth expand/collapse animations
Handle scroll-based state transitions seamlessly
3. Collapsed State Functionality:
UI Components (Collapsed):
Hamburger menu icon – positioned on the left
Product logo – prominently displayed
Action buttons – all relevant action buttons visible
Dynamic button – changes based on user activity state
Dynamic Button States:
Check-in button – displayed initially when user hasn’t checked in
Check-out button – displayed when user has already checked in
Stop break button – displayed when user has started a break
4. Expanded State Functionality:
Full Check-in Layout:
Display complete check-in interface with full functionality
Include all check-in related controls and information
Maintain consistent design with collapsed state elements
User Interaction:
All check-in/check-out operations should be accessible
Break management controls should be fully functional
5. Scroll Behavior:
Default State:
When user is at the top of the screen, app bar should be in expanded state
Dynamic Transitions:
When user scrolls down, app bar should transition to collapsed state
Implement smooth animations during state transitions
Maintain responsive behavior during continuous scrolling
6. Action Button Functionality:
Interactive Elements:
Each action button click should trigger appropriate responses
Open respective bottom sheets, screens, or pop-ups based on button function
Question Mark Icon:
On click of question mark icon, open Geap functionality
Ensure proper integration with help/guidance system
7. UI Implementation:
Design Compliance:
Implement the UI exactly as specified in the Figma design
Follow all design specifications for both collapsed and expanded states
Maintain consistent styling across all app bar states
Visual States:
Implement proper visual feedback for all interactive elements
Handle loading states during check-in/check-out operations
8. User Experience:
Responsiveness:
Ensure smooth transitions between expanded and collapsed states
Implement appropriate touch feedback for all buttons
Maintain consistent performance during scroll operations
State Persistence:
Preserve user activity state across app sessions
Handle app lifecycle changes properly
9. Integration Requirements:
API Integration:
Connect with check-in/check-out APIs through the Daily Activity BLoC
Handle break management API calls
Implement proper error handling for all API operations
Navigation Integration:
Ensure proper integration with app navigation system
Handle deep linking and navigation state preservation
Leave a Reply