UI customization #187

devtronic · 2020-02-22T20:52:20Z

wesleyguirra · 2020-02-23T01:40:18Z

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 · 2020-02-27T11:55:38Z

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

devtronic · 2020-02-28T08:52:59Z

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

tobyarevalo · 2020-03-26T14:57:51Z

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 · 2020-03-27T03:14:33Z

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 · 2020-04-09T18:32:52Z

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 · 2020-04-14T11:04:14Z

Hi. Thanks for this awesome library.

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

devtronic · 2020-04-14T11:08:56Z

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 · 2020-04-14T22:25:22Z

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

subinsv · 2020-04-15T06:34:18Z

@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 · 2020-04-15T08:05:20Z

@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 · 2020-04-15T10:04:25Z

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

AlisonLopes · 2020-04-16T21:09:51Z

Make it responsive when changing screen orientation portrait / landscape

saddemYassin · 2020-04-23T13:54:10Z

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

alexnaldo · 2020-04-23T13:59:05Z

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

saddemYassin · 2020-04-23T14:09:51Z

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

Axort · 2020-04-23T16:07:09Z

@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 · 2020-04-24T06:26:02Z

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 · 2020-05-10T20:57:25Z

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 · 2020-06-04T10:22:48Z

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 · 2020-06-20T14:00:18Z

@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 · 2020-08-09T16:50:21Z

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

saddemYassin · 2020-08-09T19:29:23Z

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 ***@***.***> 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 <#187 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACOZ7RTRYFC247QPJYUDRNLR73HVTANCNFSM4KZUQZGA> .

xi1570-krupeshanadkat · 2020-08-26T11:45:46Z

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

devtronic · 2020-08-26T11:47:45Z

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

xi1570-krupeshanadkat · 2020-08-26T11:49:33Z

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 · 2020-08-26T13:07:21Z

@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 · 2020-09-25T02:20:36Z

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 · 2020-10-09T07:41:50Z

@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.

devtronic added Feature Feature Request tracker Tracker issues link other issues for a specific topic together labels Feb 22, 2020

devtronic mentioned this issue Feb 27, 2020

Change design Scan Screen #188

Closed

natalieeeflores mentioned this issue Mar 5, 2020

Android No Back Arrow #138

Closed

devtronic mentioned this issue May 4, 2020

[Feature Request] Allow to change reader width #223

Closed

devtronic mentioned this issue Jun 2, 2020

[Feature Request] Some way to enter barcode manually when it's not scanned automatically #245

Closed

alexrosabr mentioned this issue Aug 5, 2020

The title in the app bar should be controlled by the strings option. #265

Closed

devtronic mentioned this issue Aug 14, 2020

[Question] Can we remove the scanning box from the center of the screen? #273

Closed

This was referenced Aug 23, 2020

How to customize Scanner UI? #278

Closed

[Feature Request] #277

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI customization #187

UI customization #187

devtronic commented Feb 22, 2020 •

edited

Loading

wesleyguirra commented Feb 23, 2020

phcaraujo commented Feb 27, 2020

devtronic commented Feb 28, 2020

tobyarevalo commented Mar 26, 2020

cahyowhy commented Mar 27, 2020

vitorzarzar commented Apr 9, 2020

subinsv commented Apr 14, 2020

devtronic commented Apr 14, 2020

alexnaldo commented Apr 14, 2020

subinsv commented Apr 15, 2020

devtronic commented Apr 15, 2020 •

edited

Loading

alexnaldo commented Apr 15, 2020

AlisonLopes commented Apr 16, 2020

saddemYassin commented Apr 23, 2020

alexnaldo commented Apr 23, 2020

saddemYassin commented Apr 23, 2020

Axort commented Apr 23, 2020

devtronic commented Apr 24, 2020 •

edited

Loading

daveparks23 commented May 10, 2020 •

edited

Loading

webberlin0933 commented Jun 4, 2020

bero93 commented Jun 20, 2020

Sandro-darli commented Aug 9, 2020

saddemYassin commented Aug 9, 2020 via email

xi1570-krupeshanadkat commented Aug 26, 2020 •

edited

Loading

devtronic commented Aug 26, 2020

xi1570-krupeshanadkat commented Aug 26, 2020 •

edited

Loading

xi1570-krupeshanadkat commented Aug 26, 2020 •

edited

Loading

bhammer88 commented Sep 25, 2020

kamleshwebtech commented Oct 9, 2020

UI customization #187

UI customization #187

Comments

devtronic commented Feb 22, 2020 • edited Loading

wesleyguirra commented Feb 23, 2020

phcaraujo commented Feb 27, 2020

devtronic commented Feb 28, 2020

tobyarevalo commented Mar 26, 2020

cahyowhy commented Mar 27, 2020

vitorzarzar commented Apr 9, 2020

subinsv commented Apr 14, 2020

devtronic commented Apr 14, 2020

alexnaldo commented Apr 14, 2020

subinsv commented Apr 15, 2020

devtronic commented Apr 15, 2020 • edited Loading

alexnaldo commented Apr 15, 2020

AlisonLopes commented Apr 16, 2020

saddemYassin commented Apr 23, 2020

alexnaldo commented Apr 23, 2020

saddemYassin commented Apr 23, 2020

Axort commented Apr 23, 2020

devtronic commented Apr 24, 2020 • edited Loading

daveparks23 commented May 10, 2020 • edited Loading

webberlin0933 commented Jun 4, 2020

bero93 commented Jun 20, 2020

Sandro-darli commented Aug 9, 2020

saddemYassin commented Aug 9, 2020 via email

xi1570-krupeshanadkat commented Aug 26, 2020 • edited Loading

devtronic commented Aug 26, 2020

xi1570-krupeshanadkat commented Aug 26, 2020 • edited Loading

xi1570-krupeshanadkat commented Aug 26, 2020 • edited Loading

bhammer88 commented Sep 25, 2020

kamleshwebtech commented Oct 9, 2020

devtronic commented Feb 22, 2020 •

edited

Loading

devtronic commented Apr 15, 2020 •

edited

Loading

devtronic commented Apr 24, 2020 •

edited

Loading

daveparks23 commented May 10, 2020 •

edited

Loading

xi1570-krupeshanadkat commented Aug 26, 2020 •

edited

Loading

xi1570-krupeshanadkat commented Aug 26, 2020 •

edited

Loading

xi1570-krupeshanadkat commented Aug 26, 2020 •

edited

Loading