UI customization

[devtronic]

Any ideas how can we achieve a dynamic scanner view?

• Use a Flutter view which gets the current preview image + meta information where detected barcodes are located to render the view directly in flutter. (idk about performance)
• Pass layout options to the BarcodeScanner.scan() method.
• Overlay the platform screen with a flutter screen which renders the overlay UI

This issue belongs to:

• [ ] #273 Can we remove the scanning box from the center of the screen?
• [ ] #265 The title in the app bar should be controlled by the strings option
• [ ] #223 Allow to change reader width
• [ ] #196 Configuring scan area
• [ ] #188 UI customization
• [ ] #179 Change design
• [ ] #158 How to tweak the look of the scanner?
• [ ] #152 Request - Camera outline ratio
• [ ] #143 Scan QRCode Customer View?
• [ ] #77 Scanning outside the "window" on iOS
• [ ] #69 The transition is not smooth
• [ ] #66 Scan line color
• [ ] #43 Ability to highlight the barcode in live view and allow user to tap on desired barcode

[wesleyguirra]

Use a Flutter view which gets the current preview image + meta information where detected barcodes are located to render the view directly in flutter. (idk about performance) +1

[phcaraujo]

From what I saw then, will it not be possible to change the design, even in future versions?

[devtronic]

It's just a definition thing. We need to determine what should be customizable by devs and implement this feature.

[tobyarevalo]

The default Ui from the scanner doesn´t matches the Ui from my app, i really need to change it. Try to make it custom!

[cahyowhy]

thanks for this lib, its awesome could you give me some reference about this.. about how to render flutter view inside the camera while scan the barcode

[vitorzarzar]

The best approach i've seen was the lib returning a Widget, so the dev could put anything on top of it (with Stack) without any need of implementation from the lib side.

As example, there is the qr_code_scanner

I'm new with Flutter and mobile development, so i may be saying something wrong, just tried to help.

[subinsv]

Hi. Thanks for this awesome library.

Is it possible to remove the AppBar in Android when in scannerview?

[devtronic]

Maybe native views are a good solution for customizing the UI? https://medium.com/flutter-community/flutter-platformview-how-to-create-flutter-widgets-from-native-views-366e378115b6

[alexnaldo]

The barcode reads function is great, but without UI customization is very hard to adopt it. UI is essential feature for Flutter users.

[subinsv]

@devtronic From the article

Embedding Android views is an expensive operation and should be avoided when a Flutter equivalent is possible.

So, it is a choice between customization and performance.

[devtronic]

@devtronic From the article

Embedding Android views is an expensive operation and should be avoided when a Flutter equivalent is possible.

So, it is a choice between customization and performance.

Yes, we've to evaluate what brings a better performance:

• Using a Native View for the camera preview or
• passing the raw image through a platform channel to render it directly in flutter

Never the less, this would be an optional feature like scanWithCustomPreview(...) or something else so we don't have to force the users to implement their own preview

[alexnaldo]

Another option is pass parameters for easy customizations like view size, colors, alignment etc.

[AlisonLopes]

Make it responsive when changing screen orientation portrait / landscape

[saddemYassin]

I want only to remove the app bar from the default view. Are they any available solution?

[alexnaldo]

@saddem123 , you can edit the sources (iOS e Android). Remember that this component is a wrapper

[saddemYassin]

@alexnaldo what you mean by change the sources I just import the library in flutter how to edit it?

[Axort]

@saddem123 You can fork this library, make the changes you need and then point to your fork in the pubspec.yaml, e.g.

barcode_scan:
    git: 
      url: [your_fork]

[devtronic]

I want only to remove the app bar from the default view. Are they any available solution?

What's about the flash button? If there is no app bar you can't toggle the flash.

[daveparks23]

Pretty simple to change the color of the text in the App Bar in iOS BarScannerViewControllerSwift Color of text Flash On / Flash Off

private func updateToggleFlashButton() {
    if !hasTorch {
      return
    }

    let buttonText = isFlashOn ? config.strings["flash_off"] : config.strings["flash_on"]

    let customRightBarButtonItem = UIBarButtonItem(title: buttonText,
                                                        style: .plain,
                                                        target: self,
                                                        action: #selector(onToggleFlash)
    )
    customRightBarButtonItem.tintColor = UIColor.orange
    navigationItem.rightBarButtonItem = customRightBarButtonItem

  }

ScannerOverlay.swift Corner line color orange

override init(frame: CGRect) {
        super.init(frame: frame)
        line.backgroundColor = UIColor.orange
        line.translatesAutoresizingMaskIntoConstraints = false

        addSubview(line)
    }

Scanner line color orange At the end of the draw function inside ScannerOverlay.swift file

path.lineWidth = 2
UIColor.orange.setStroke()
path.stroke()

Can someone show me where the code is for the Android-related color options? I can't find it.

[webberlin0933]

Pretty simple to change the color of the text in the App Bar in iOS BarScannerViewControllerSwift Color of text Flash On / Flash Off

private func updateToggleFlashButton() {
    if !hasTorch {
      return
    }

    let buttonText = isFlashOn ? config.strings["flash_off"] : config.strings["flash_on"]

    let customRightBarButtonItem = UIBarButtonItem(title: buttonText,
                                                        style: .plain,
                                                        target: self,
                                                        action: #selector(onToggleFlash)
    )
    customRightBarButtonItem.tintColor = UIColor.orange
    navigationItem.rightBarButtonItem = customRightBarButtonItem

  }

ScannerOverlay.swift Corner line color orange

override init(frame: CGRect) {
        super.init(frame: frame)
        line.backgroundColor = UIColor.orange
        line.translatesAutoresizingMaskIntoConstraints = false

        addSubview(line)
    }

Scanner line color orange At the end of the draw function inside ScannerOverlay.swift file

path.lineWidth = 2
UIColor.orange.setStroke()
path.stroke()

Can someone show me where the code is for the Android-related color options? I can't find it.

I have the similar problem.I want to add a straight line to make it point to the center when scanning. This requirement stems from the fact that when scanninng, the center point needs to be aligned in order to scan quickly and effectively. Finally, Thanks to the person who provided this source for solving my many problems.

[bero93]

@saddem123 You can fork this library, make the changes you need and then point to your fork in the pubspec.yaml, e.g.

barcode_scan:
    git: 
      url: [your_fork]

non related question : how to do the same functionality if i want to replace a flutter core widget with a custom one made by me

[Sandro-darli]

Hello! We already have a solution to change hide the title?

[saddemYassin]

Hello sorry for answering so late I'm not using this email in the last period.

The problem was solved for a long time now 2 months.

thank you and sorry again.

On Sun, Aug 9, 2020 at 6:50 PM Sandro-darli notifications@github.com wrote:

Hello! We already have a solution to change hide the title?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mintware-de/flutter_barcode_reader/issues/187#issuecomment-671075039, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACOZ7RTRYFC247QPJYUDRNLR73HVTANCNFSM4KZUQZGA .

[xi1570-krupeshanadkat]

@devtronic just marking the 10-15 issues closed and bringing everyone on same thread won't help. How about some solution?

[devtronic]

How about some solution?! This is an open source project so feel free to contribute!

[xi1570-krupeshanadkat]

How about some solution?! This is an open source project so feel free to contribute!

@devtronic modified readme for Custom Title, created PR. Could you help me know where in source code we have colors defined (for scanning rectangle)?? I would be happy to help put some info in readme for everyone.

[xi1570-krupeshanadkat]

@saddem123 Solution to your issue, (for Android) add these lines in android/app/src/main/AndroidManifest.xml after </activity> tag

<activity 
          android:name="de.mintware.barcode_scan.BarcodeScannerActivity"
          android:theme="@android:style/Theme.Black.NoTitleBar" />

This will remove title bar (app bar) in the scanning screen.

To just change the title use below:

<activity 
     android:name="de.mintware.barcode_scan.BarcodeScannerActivity"
     android:label="My Activity Title" />

(Replace "My Activity Title" with your desired title)

[bhammer88]

Would be a great help even we can modify the the outline colors to match out app design theme. Of course overlaying will give us more customisation.

[kamleshwebtech]

@saddem123 Solution to your issue, (for Android) add these lines in android/app/src/main/AndroidManifest.xml after </activity> tag

<activity 
          android:name="de.mintware.barcode_scan.BarcodeScannerActivity"
          android:theme="@android:style/Theme.Black.NoTitleBar" />

This will remove title bar (app bar) in the scanning screen.

To just change the title use below:

<activity 
     android:name="de.mintware.barcode_scan.BarcodeScannerActivity"
     android:label="My Activity Title" />

(Replace "My Activity Title" with your desired title)

Dear, i do not want to remove scan screen appbar, just want to change background color of app bar, please suggest how can we do? Thanks.