fix: improve calendar screen layout spacing - #29
Conversation
WalkthroughCalendarScreen layout wrapped in SafeArea with added margins/padding; calendar container styling adjusted without changing data logic. Removed Home screen import, kept Chat screen import. “Create-with-AI” now navigates directly to ChatScreen via Navigator.push with initial_message. Markers configuration unchanged; spacing around header/calendar corrected. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant CalendarScreen
participant Navigator
participant ChatScreen
User->>CalendarScreen: Tap "Create with AI"
CalendarScreen->>Navigator: push(ChatScreen, args: initial_message)
activate Navigator
Navigator->>ChatScreen: Instantiate with initial_message
deactivate Navigator
ChatScreen-->>User: Display chat UI initialized
note over CalendarScreen,ChatScreen: Layout: Calendar wrapped in SafeArea to avoid app bar overlap
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
lib/screens/calendar/calendar_screen.dart (1)
289-291: Fix TimeOfDay overflow (hour 23 → 24 is invalid)Adding 1 hour can produce hour=24. Use modulo 24 to prevent invalid TimeOfDay.
- endTime: TimeOfDay(hour: createdAt.hour + 1, minute: createdAt.minute), + endTime: TimeOfDay(hour: (createdAt.hour + 1) % 24, minute: createdAt.minute),- endTime: TimeOfDay(hour: meetingDate.hour + 1, minute: meetingDate.minute), + endTime: TimeOfDay(hour: (meetingDate.hour + 1) % 24, minute: meetingDate.minute),Also applies to: 329-331
🧹 Nitpick comments (3)
lib/screens/calendar/calendar_screen.dart (3)
343-360: Wrap SafeArea around the loading state tooCurrently SafeArea is only applied when not loading; the skeleton can overlap status bars/notches. Wrap the ternary with SafeArea for consistency.
- body: _isLoading - ? const CalendarLoadingSkeleton() - : SafeArea( - child: Column( + body: SafeArea( + child: _isLoading + ? const CalendarLoadingSkeleton() + : Column( children: [ // ... - ), - ), + ), + ),
364-365: Align horizontal gutters (8 px vs 16 px)Time scale uses 16 px horizontal padding; calendar container uses 8 px margin, causing slight misalignment. Bump calendar margin to 16 px for visual consistency.
- margin: const EdgeInsets.symmetric(horizontal: 8), + margin: const EdgeInsets.symmetric(horizontal: 16),Also applies to: 458-459
372-374: Avoid hard stop at 2025-12-31Hard-coded lastDay will freeze navigation in 2026. Make it dynamic.
- lastDay: DateTime.utc(2025, 12, 31), + lastDay: DateTime.utc(DateTime.now().year + 1, 12, 31),
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
lib/screens/calendar/calendar_screen.dart(4 hunks)
🔇 Additional comments (2)
lib/screens/calendar/calendar_screen.dart (2)
15-15: Verify ChatScreen constructor; pass initial message via RouteSettings or a dedicated param
ChatScreen(arguments: {...})will fail unless the widget defines a named parameterarguments. If ChatScreen readsModalRoute.of(context)!.settings.arguments, pass it via MaterialPageRoute.settings.- MaterialPageRoute( - builder: (context) => ChatScreen( - arguments: {'initial_message': message} - ), - ), + MaterialPageRoute( + builder: (context) => ChatScreen(), + settings: RouteSettings(arguments: {'initial_message': message}), + ),If ChatScreen expects a prop instead, prefer
ChatScreen(initialMessage: message).Also applies to: 755-762
430-435: Confirm intent ofmarkersMaxCount: 0Setting this to 0 suppresses default markers, relying entirely on your custom
markerBuilder(which draws the green pill). If that’s the goal, all good; otherwise, increase the count.
|
@SharkyBytes can u take a look at this |
|
LGTM! @navaneeth0041 |
|
@SharkyBytes So, as this is done I can open other issues and start working right? |
|
Yeah @navaneeth0041! You can proceed with the new issues tilll that:) |
Closes #28
📝 Description
This PR fixes layout and spacing issues in the Calendar Screen where the calendar component appeared too close to the app bar, creating a cramped and awkward appearance. The changes improve the overall visual hierarchy and ensure proper spacing across different device screen sizes.
Problem
The calendar was extending too close to the status bar/app bar area, with insufficient spacing between UI elements, making the interface look cluttered and unprofessional.
Solution
Implemented proper spacing using Flutter's SafeArea widget and added strategic margins and padding throughout the calendar component to create a more polished and user-friendly interface.
🔧 Changes Made
📷 Screenshots or Visual Changes (if applicable)
Before
The calendar was positioned too close to the app bar with no proper spacing, creating a cramped appearance.
After
The calendar now has proper spacing from the app bar, horizontal margins, and better separation from the time scale, resulting in a cleaner, more professional look.
✅ Checklist
Summary by CodeRabbit
New Features
Style
Refactor