fix: Add BoxFit.cover support for video backgrounds to fill entire screen

[aliNassef]

🐛 Problem
Video backgrounds were not covering the full screen area, unlike image backgrounds which use BoxFit.cover. The VideoPlayer widget displays videos at their native dimensions by default, resulting in letterboxing or pillarboxing when the video aspect ratio doesn't match the screen.

✅ Solution

• Wrapped the VideoPlayer widget in a FittedBox with BoxFit.cover to ensure videos scale and fill the entire background area while maintaining their aspect ratio, consistent with how image backgrounds behave.

Summary by CodeRabbit

• Refactor
  • Improved background video rendering to ensure optimal screen coverage and aspect ratio handling.
  • Updated color construction syntax and widget declaration styling throughout the codebase.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The changes update deprecated Flutter color APIs from withOpacity() to withValues(alpha:), consolidate a FlutterLogo widget to a single-line constructor format, and refactor VideoPlayer rendering by wrapping it with FittedBox and SizedBox containers for improved aspect ratio and layout control.

Changes

Cohort / File(s)	Summary
Color API Updates & Widget Consolidation example/lib/main.dart	Updated three color constructions from withOpacity() to withValues(alpha:) in TextFormField fillColor properties. Consolidated FlutterLogo widget to single-line constructor syntax.
Video Rendering Pipeline lib/background.dart	Wrapped VideoPlayer in FittedBox with BoxFit.cover containing a SizedBox sized to video controller intrinsic dimensions, replacing direct VideoPlayer rendering to improve aspect ratio and layout handling.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• The majority of changes are repetitive color API replacements, which follow a consistent pattern across the codebase update cycle.
• The VideoPlayer layout wrapping warrants brief verification to confirm the FittedBox and SizedBox composition maintains intended playback behavior and aspect ratio handling without introducing rendering artifacts.

Poem

🐰 Colors now flow with values bright,
FlutterLogo stands just right,
VideoPlayer wrapped with care,
FittedBox fits everywhere!
Aspect ratios dance in place,
All rendered with perfect grace. ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding BoxFit.cover support for video backgrounds to fill the screen, which matches the core modification in lib/background.dart.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

example/lib/main.dart (1)

61-74: Updated fillColor for text fields is consistent and clear

Using Colors.white.withValues(alpha: 0.5) for both TextFormField instances gives a consistent semi‑transparent look and matches the surrounding card style.

If this example grows, you could eventually centralize this into an InputDecorationTheme or a shared variable, but for a small demo file duplication is acceptable.

Please quickly verify contrast/readability of the text fields over bright video frames; if readability ever suffers, consider slightly increasing the alpha or adding a subtle border.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b912a2a and de50674.

⛔ Files ignored due to path filters (1)

• example/pubspec.lock is excluded by !**/*.lock

📒 Files selected for processing (2)

• example/lib/main.dart (3 hunks)
• lib/background.dart (1 hunks)

🔇 Additional comments (3)

example/lib/main.dart (2)

41-43: Switch to withValues(alpha: ...) for card background looks fine

Using Colors.white.withValues(alpha: 0.2) keeps the same translucent effect while aligning with the newer Color API. No behavioral issues from this change in the example.

Please verify on a real device/emulator that the card translucency still matches your design intent, as Flutter rendering nuances can vary slightly by platform.

---

55-55: FlutterLogo formatting change is purely cosmetic

Collapsing FlutterLogo to a single-line constructor (FlutterLogo(size: 75)) is a no-op behavior-wise and improves readability a bit.

lib/background.dart (1)

88-95: FittedBox + SizedBox pattern correctly achieves BoxFit.cover for video background

Wrapping the VideoPlayer in:

• a SizedBox using _videoController!.value.size.width/height, then
• a FittedBox(fit: BoxFit.cover, ...) that is itself stretched via Positioned.fill

is a solid pattern to make the video fill the available background while preserving aspect ratio. This should remove letterboxing/pillarboxing and align video behavior with the image BoxFit.cover branch.

Be aware this will crop content at the edges for mismatched aspect ratios (which is usually what “cover” implies). That looks aligned with the PR goal, but it’s worth validating across a few device sizes/orientations and very wide/tall videos to confirm the cropping is acceptable for your assets.

Please verify visually with:

• At least one 16:9 video on a tall phone,
• One near‑square or vertical video,
  to confirm the background fully fills the screen and cropping is acceptable in all cases.