Flutter mobile_scanner Black Screen Fix

I’ve been dealing with a frustrating issue in the mobile_scanner Flutter package, and honestly… I still haven't found a definitive solution.
The problem appears after a successful payment flow when the app automatically returns to the Scanner Page.
The strange part?
The camera does not completely crash.
Instead…
the scanner view becomes a black screen instead of showing the live camera preview 😵‍💫

And it only starts working again if I do one of these actions:
✅ Navigate to another screen and come back
OR ✅ Tap the camera toggle icon (stop/start preview) manually
Not exactly ideal for a production app.

When Does the Problem Usually Happen? 🚨​

The issue mostly appears after navigation events like:

• Navigator.pop()
• Navigator.pushReplacement()
• Automatic return after payment completion
• Page transitions back to the Scanner Screen

Typical flow:

Scanner Page
   ↓
Payment Page
   ↓
Payment Success
   ↓
Auto Return To Scanner
   ↓
Black Camera Screen 💀

---

What I Already Tried 🔍​

I tested nearly every common workaround I could think of.
Including:

Restarting the Controller​

controller.stop();
controller.start();

Disposing the Controller​

controller.dispose();

Using WidgetsBindingObserver​

Handling lifecycle changes manually.
Example:

class _ScannerPageState extends State<ScannerPage>
    with WidgetsBindingObserver {}

Disabling Auto Start​

autoStart: false

Then manually controlling startup behavior.

Recreating the Controller​

Tried rebuilding the scanner controller instance entirely.
Still inconsistent.

Lifecycle Handling Experiments​

Attempted several combinations involving:

• didChangeAppLifecycleState
• manual camera pause/resume
• delayed initialization
• navigation listeners

No stable fix so far.

---

The Behavior Looks Like a Camera Lifecycle Problem 🎥⚙️​

From testing, the issue feels less like a simple UI bug…
and more like a camera session lifecycle issue during navigation.

Especially when returning from routes involving:

• Payment workflows
• pushReplacement
• aggressive navigation transitions

The preview layer seems stuck even though the scanner controller itself is not fully dead.

---

What Makes This Bug So Annoying? 😂​

Because technically…
the scanner isn't fully broken.
The camera session appears partially alive.
But the preview layer becomes unusable.

Which creates that classic:
"Everything looks initialized… but the screen is black."

Flutter developers know this pain 😅

---

Looking For a Cleaner Architecture Pattern 🧠​

At this point, I’m mainly interested in a proper navigation architecture for handling mobile_scanner.
Especially approaches that work well with:

• Route navigation
• Payment screens
• Scanner reuse
• Camera lifecycle management

Preferably without rebuilding the entire Scanner Page every single time.

Something cleaner than:
Navigator.push(...)

→ destroy page​

→ recreate everything​

→ hope camera behaves​

---

Possible Areas Worth Investigating 🔧​

If someone already solved this issue, I'm particularly curious about strategies involving:

• RouteAware + RouteObserver
• Persistent scanner lifecycle management
• Delayed camera reinitialization
• Singleton controller handling
• Navigation-safe scanner architecture
• Camera preview reattachment methods

---

Final Thoughts 🚀​

I’ve tried:

✅ controller.start()​

✅ controller.stop()​

✅ dispose()​

✅ WidgetsBindingObserver​

✅ autoStart: false​

✅ Controller recreation​

…and somehow the black preview still survives everything 😂
Even multiple AI models failed to fully solve it.

So if anyone has encountered the same Flutter mobile_scanner black screen after navigation issue - especially with a clean architecture approach - I’d genuinely appreciate the insight.
Bonus points if the solution avoids rebuilding the whole page every navigation cycle 😅