Overlay for QR code scanner using Flutter

Question

I want to implement QR code scanner like exact GooglePay:

I can implement the AppBar and showModalBottomSheet. But I still can't figure out how can I implement the overlay design widget (four different color borders in this case) for QR code scanner.

I have tried many packages but most of them are outdated or deprecated. qr_code_scanner is the best package for QRView and QROverlay but it is "Project in Maintenance Mode Only" so I cannot use it.

I then tried using mobile_scanner package which is good but it won't provide overlay for Scanner.

I just want to design QR Code scanner overlay design for my flutter app.

Answer 1

You can use Stack widget to add a new widget visually above your scanner.

Then you can write your own overlay widget and put it above scanner widget in stack like that:

Stack(
  children: <Widget>[
    QrScannerWidget(...),
    OverlayWidget(...),
  ],
)