Skip to content

Scanner UX - Safe Area Fix#520

Merged
n13 merged 1 commit into
mainfrom
scanner_safe_area_fix
Jun 11, 2026
Merged

Scanner UX - Safe Area Fix#520
n13 merged 1 commit into
mainfrom
scanner_safe_area_fix

Conversation

@n13

@n13 n13 commented Jun 11, 2026

Copy link
Copy Markdown
Collaborator

Scanner would overlap the iphone camera on top

Added safe area to prevent this on all devices
IMG_0150

@n13

n13 commented Jun 11, 2026

Copy link
Copy Markdown
Collaborator Author

Reviewed the PR. The change is correct and I'd approve it — here's my assessment.

What it does

          Positioned(
            top: 0,
            left: 24,
            right: 24,
            child: SafeArea(
              bottom: false,
              child: Padding(
                padding: const EdgeInsets.only(top: 20),
                child: V2AppBar(title: l10n.componentQrScannerTitle),
              ),
            ),
          ),

Why it's right

  • Root cause is correctly addressed. The scanner is the only screen in the app that doesn't use ScaffoldBase (which wraps its body in SafeArea) — it's a fullscreen camera Stack, so the body extends behind the status bar/notch. The old hardcoded top: 20 was less than the notch/Dynamic Island inset (~59px on recent iPhones), causing the overlap in the screenshot. Wrapping in SafeArea(bottom: false) fixes it for all devices.
  • No regression on inset-free devices. Where the top inset is 0, you get 0 + 20 = 20 — identical to the previous layout.
  • Behavior is additive (inset + 20), not max(inset, 20), which keeps consistent 20px breathing room below the system UI on every device. That looks intentional and matches the screenshot.
  • DRY is fine here. The divergence from ScaffoldBase is justified since this screen needs the camera under the overlay; reusing ScaffoldBase would put the camera below the safe area.

Minor, non-blocking notes

  • SafeArea also applies left/right insets on top of the left: 24, right: 24 from Positioned. Irrelevant in practice since iPhone is portrait-locked (Info.plist) and iPad landscape has no horizontal insets — just worth knowing.
  • A slightly terser equivalent would be Positioned(top: MediaQuery.paddingOf(context).top + 20, ...), but SafeArea is equally idiomatic; no change needed.

Verdict: LGTM, minimal and targeted fix. Per your rules I haven't commented or approved on GitHub — let me know if you'd like me to submit this as a review there.

@n13

n13 commented Jun 11, 2026

Copy link
Copy Markdown
Collaborator Author

AI is happy

@dewabisma dewabisma left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

GTG!

@n13 n13 merged commit 3090b84 into main Jun 11, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants