App Bar

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

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts