Flutter Tutorial - QR Code Scanner App & QR Code Generator
HTML-код
- Опубликовано: 7 июн 2024
- Generate Flutter QR Codes to share data whereas other people use the Flutter QR Code Scanner App to retrieve this data.
Click here to Subscribe to Johannes Milke: ruclips.net/user/JohannesMilke...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/qr_c...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/#/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
RESOURCES
Barcode Scanner App Tutorial: • Flutter Tutorial - Bar...
Delivery App Tutorial: • Flutter Tutorial - Del...
Calendar Events App Tutorial: • Flutter Tutorial - Cal...
Quiz App Tutorial: • Flutter Tutorial - 1/2...
Download Files From Firebase Storage Tutorial: • Flutter Tutorial - Dow...
Upload Files To Firebase Storage Tutorial: • Flutter Tutorial - Upl...
Signature Pad Tutorial: • Flutter Tutorial - Flu...
PDF Viewer Tutorial: • Flutter Tutorial - PDF...
Flutter Layout Basics Tutorial: • Flutter Layout Basics:...
User Profile Page UI Tutorial: • Flutter Tutorial - Use...
Login & Signup App Tutorial: • Flutter Tutorial - Log...
Google SignIn With Firebase Tutorial: • Flutter Tutorial - Goo...
Sliding Up Panel Tutorial: • Flutter Tutorial - Sli...
Staggered Grid View Tutorial: • Flutter Tutorial - Gri...
Compress Video Tutorial: • Flutter Tutorial - Com...
Video Player Tutorial: • Flutter Tutorial - Vid...
Shared Preferences Tutorial: • Flutter Tutorial - Sha...
TIMELINE
0:00 Introduction QR Code Scanner App
0:27 Generate QR Code / QR Flutter
1:44 Create QR Code Scanner Widget / Flutter QR Code Scanner
3:01 Add QR Code Overlay
4:23 Fix HotReload For Flutter QR Code Scanner
4:48 Listen To Detected QR Code
7:01 Android Setup For QR Flutter & QR Code Scanner
7:28 Add Toggle Flash And Switch Camera
SHARE | SUBSCRIBE | LIKE FOR MORE VIDEOS LIKE THIS
*********
SOCIAL MEDIA: Follow Us :-)
Twitter | / heyflutter_
Linkedin | / heyflutter
LEARN MORE
SOURCE CODE | github.com/JohannesMilke
ARTICLES | / johannesmilke
PLAYLISTS
All Flutter Videos | • Flutter Tutorial - Flu...
Widgets - Flutter | • Flutter Tutorial - Flu...
Plugins - Flutter | • Flutter Tutorial - Flu...
Animations - Flutter | • Flutter Tutorial - Tra...
Designs - Flutter | • Flutter Tutorial - Flu...
Firebase - Flutter | • Flutter Tutorial - Pag...
State Management - Flutter | • Flutter Tutorial - Riv...
CREDITS
Copyright song "Corporate Technology" by scottholmesmusic.com
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)
bit.ly/JohannesMilke 
Наука
👉Join 12 Week Flutter Training: heyflutter.com
👉Join the WhatsApp Channel to get the latest news about Flutter & HeyFlutter: whatsapp.com/channel/0029VaDNCZtC1Fu8nL2vmw3f
Source Code: github.com/JohannesMilke/qr_code_app_example
Barcode Scanner App Tutorial: ruclips.net/video/jkqR7CSeyNs/видео.html
Delivery App Tutorial: ruclips.net/video/fg2aLXNG0Bc/видео.html
Calendar Events App Tutorial: ruclips.net/video/LoDtxRkGDTw/видео.html
Quiz App Tutorial: ruclips.net/video/gSvd-i0JSsU/видео.html
Download Files From Firebase Storage Tutorial: ruclips.net/video/YA_fHCF_EYc/видео.html
Upload Files To Firebase Storage Tutorial: ruclips.net/video/dmZ9Tg9k13U/видео.html
Signature Pad Tutorial: ruclips.net/video/Vvul-W7h634/видео.html
PDF Viewer Tutorial: ruclips.net/video/uizZbJWziEg/видео.html
Flutter Layout Basics Tutorial: ruclips.net/video/yYxueTNIDlA/видео.html
User Profile Page UI Tutorial: ruclips.net/video/gSl-MoykYYk/видео.html
Login & Signup App Tutorial: ruclips.net/video/-32HIsRf26o/видео.html
Google SignIn With Firebase Tutorial: ruclips.net/video/1k-gITZA9CI/видео.html
Sliding Up Panel Tutorial: ruclips.net/video/s9XHOQeIeZg/видео.html
Staggered Grid View Tutorial: ruclips.net/video/XNwL_9ur8R8/видео.html
Compress Video Tutorial: ruclips.net/video/JUeWeZXn71M/видео.html
Video Player Tutorial: ruclips.net/video/uz4xRnE-UIw/видео.html
Shared Preferences Tutorial: ruclips.net/video/szOllHT1S7Y/видео.html
One of the things I love your youtube Chanel is your quick reply thank you and I'm gona subscribe for 12 weeks training to improve my self.
I'm asking for Qr code password is that I like to attach pdf to a link or to qr code and share it so only user with password can pen that pdf content
I watch all your videos once you uploaded ... you are a great developer I can't thank you enough😍
man, i really appreciate all your effort, you upload great material, with functional behavior and not all those animation, amimations with no purpose
Amazing tutorial! Flutter is great! Some time ago I needed a QR code reader. I end up doing it with pure android java. But I will watch your video to learn do it in flutter.
I can't believe...you are doing so great work.... 👍
This was great , all of the tutorials that I saw I could not use the customize barcode reader and all of them had a menu and where full screen which could not be change but this was what I exactly wanted thanks
Thanks a lot sir Johannes. You upgrade your last video about this and thas was great! Thank you so much for your videos. Keep it up!
Really nice video like always, keep it up!
Thanks for this!
looking forward to the tutorial for read qr from the gallery!
so great brother flutter is the king 🙌🙌
Thanks Johannes, for your videos...
You know you are Awesome...😱😱🙌🙌🙌...
Respect
Looking forward to the sharing and reading of qr code from gallery as well.
It would be fun if we could get a custom qr code feature added.
Like the WhatsApp kind (with whatsapp logo)
Can we implement that bar code and qr code scan from same camera?
Amazing tutorial btw.
Nice video 🤩thanks!
I would be interested in reading/decoding QR code from photo gallery when the user picks a photo. That would also be a very nice extension to this video series on QR code with Flutter.
Looking forward to this as well.
It would be fun if we could get a custom qr code feature added.
Like the WhatsApp kind (with whatsapp logo)
great tutorial! How can I export my QRImage in PDF format or Image format to use it as an attachment to send email?
Thank you for your tutorial, it's awesome
Thank you, Mr Tumurin! 🙂
Such amazing content
I saw that qr_code_scanner package is not updated anymore but the mobile_scanner is like the 2.0 version of qr_code_scanner package. Can you show us a tutorial or send a resource using mobile_scanner package for scanning a QR code please?
Sehr gut! Danke!
Awesome tutorial! I reiterate thank you for you knowledge sharing. In 2.3.0-17.0.pre.151 the codeline"snapshot.data!" inside FutureBuilder in Qr Scanner button options are not longer available, VS Code tells me the "data" can be whatever (Object?) so I just "cast" this expression "snapshot.data! as bool" Is my correction correct?. Also I watched the barcode128 tutorial that in their options is "ScanMode.QR", What's your choice about this qr_code_scanner & flutter_barcode_scanner packages? Before thank you for reading my comment.
Thanks, Sergio Ernesto Tostado Sánchez! 🙂 Normally adding the bool to the FutureBuilder is sufficient: FutureBuilder(...).
I prefer these ways right now:
1) QR Code Scanner: ruclips.net/video/hHehIGfX_yU/видео.html
2) Barcode Scanner: ruclips.net/video/jkqR7CSeyNs/видео.html
Thank you Johannes, you're my slime
Thank for such a wonderful tutorial, where to add url redirect automatically.
Good one bro💙. Bro can you make a video of using webrtc in flutter?
Thank you soo much
I want to download genarated QR code . How can i download this qr code as image file or pdf using flutter
Thanks , Is there a way to make MRZ passport scan using flutter
Thank u 👍
Thank you for this awesome tutorial. Do you know how I can scan a QR code by uploading it from gallery instead of using camera?
Thank You FADY! Follow this link: stackoverflow.com/questions/69691930/reading-qr-codes-from-image-file-in-flutter
I hope you will get your answer 🙂
Finde deine Videos super. Wäre cool wenn du mal das eine oder andere Video auf Deutsch machen könntest.
Need help!! I got Black screen instead of image when I try to scan and I need to pause and resume manually the camera to get image. Anyone knows any solution for that?? I am using qr_code_scanner 0.7.0.
Amazing video sir👌👌. Love ur work ❤❤
I am working on building an automated Attendance System using Qr code for my school project. The package you used to generate the qrcode only accepts a single string, I am trying to pass multiple values and when I scan the qrcode get the same value separately and not together. Is that possible with this package or do ii need another one.
Hey, @oladipupobalogun5567 🙂 solutions is shared on one of your other comments please check it out.
WOW very nice
thanks
Awesome turitotrial, pls how can you add input data from form
Thank You Ayandow Edmond! Follow this link: stackoverflow.com/questions/51317023/flutter-dart-how-to-pass-barcode-scan-value-into-textformfield-on-scan-and-up
I hope you will get your answer 🙂
Hello Sir
how can I add multiple data in QRImage?
Thanks Johannes for amazing tutorial, its very good. I just have one BUG and thats when I run app on iOS in release mode, camera is working but it doesn't scan code at first (initial) run of the app. I restart the app and then its working like a charm. Do you, by any chance know, what can be the issue of this behavior?
@@HeyFlutter Tnx for the answer but I have used real iOS device
Thank You AppTailor! Follow this link: stackoverflow.com/questions/63147988/problem-launching-an-app-in-release-mode-flutter-on-an-ios-simulator
I hope you will get your answer 🙂
I must say that it is good, but not for old devices (Android 4.4, 5.0, 5.1, etc ...) you have to get stuck in version 0.5.2 for it to work and with the uncertainty of whether it will work for these devices in the next stable version. I hope they fix that part soon and finally have a stable 1.0.0. version. In the meantime I'll keep using flutter_barcode_scanner, which seems more reliable, even though it can't be embedded in other views.
I made it but when i download qr image it is download on android emulator but not in android phone. Pls make a vdo on how to download this qr on android phone's gallery
Do you have any idea to read the QR code from the gallery instead of using the camera?
Hey 😊, Tiến Cao Minh! Check out this package: pub.dev/packages/scan I hope this may be helpful
Hallo Johannes, ich hab das Basic Sponsoring bei github für dich eingerichtet. Nun wollte ich mir den Code von diesem Video herunterladen. Habe aber leider keinen Zugriff (obwohl ich die Mitgliedschaft über den Get Access Button beantragt habe) ... habe es jetzt ein paar mal versucht. Kannst du mir da vielleicht helfen ?
Thanks, maltecast! 🙂Please check out this here: github.com/JohannesMilke/sponsorware#4-why-is-the-github-access-link-not-working-even-if-i-am-a-sponsor
Hi.. Why on my first attempt when open the scanner its not working when while the camera is open and feed is on. it's only working scan after hot restart.
Thank you, Adam Wilfrid! 🙂. Kindly restart your IDE and emulator, perhaps it will solve your problem.
Hello if it was to send the scanned image to an X server would have how and what tip do you give?
Thank You Ayrton Veloso! Follow this link: nitishk72.medium.com/flutter-uploading-image-to-server-aec76876b9e1
I hope you will get your answer 🙂
It will be great to get some video about how to wrap QRView in some container or bottom Sheet, it is very popular case for designers to put is somewhere like bottom Sheet.
Thanks for the idea, Андрей Терехин! 🙂 I have added it to my list of ideas for future videos!
@@HeyFlutter thank you! can't wait:)
It is showing that the "Project in Maintenance Mode Only" in the readme file of this package. Can we use this package for development?
Thank You Muhsin momi! Follow this link: pub.dev/packages/qr_code_scanner
I hope you will get your answer 🙂
Very nice work my brother... 👍
I would like to ask you, how can make dynamic qr app.. Is it possible?
@@HeyFlutter Thanks for your help, but unfortunately the page you sent did not open for me, there seems to be an error somewhere..
Thank You Elfatih Mahdi! Follow this link: medium.com/flutter-community/building-flutter-qr-code-generator-scanner-and-sharing-app-703e73b228d3
I hope you will get your answer 🙂
hello thank you so much for your video can you please show as haw to add password to access the content when you scan the qr code
Thanks for the idea @user-ek6bf6lk5r 😀, i have added it in my list of future videos
please provide the tutorial how can we scan the QR code by selecting image from gallery
@@HeyFlutter Have you created a video for scan the QR code by selecting image from gallery?
nice, and its still work today :) (with some drawback wkwkwk)
Thank you, Yusuf Maulana! 🙂
Thank you so much for the grate video, Can you please make a video about generating QR by Passing the data from firebase, and not by adding it manually.
Sounds great, Sally! 🙂
please help, How to return to the first screen after we found a QRCode and scan it! (not to put the result on the bottom ) thnkx
Thank You Slaheddine Daghsni! Follow this link: medium.com/flutter-community/building-flutter-qr-code-generator-scanner-and-sharing-app-703e73b228d3
I hope you will get your answer 🙂
please do state restoration..
I wasnt able to get a popup permission request for ios, so I can’t scan the QR code. Would you mind touching up on this topic?
Thank you, Poom C! 🙂 Make sure to follow the tutorial step by step and make sure not to skip iOS side integration on native side
Hi, anyone know how to connect it to firebase firestore as i want to make a attendance system with timestamp check in check out?
Thank You Noor Azhana! Follow this link: stackoverflow.com/questions/67328597/how-to-store-data-from-a-scanner-to-firebase-firestore
I hope you will get your answer 🙂
how Can we create a password protected qr code with this.
How can I make my scanner to read the QR code that has a image in the of it? Because it is not working
Thank you, BlackPatrick!😊, This is not possible with this package. Simply file an issue here: github.com/juliuscanute/qr_code_scanner/issues
Is there any way to upload an image containing a QR Code and the app tries to read it? I've been looking everywhere maybe you know . Thank you for all the videos!
@@HeyFlutter WOW thanks man🤓
Thank You CFC R.! Follow this link: stackoverflow.com/questions/50709800/read-qr-code-from-file-in-flutter?rq=1
I hope you will get your answer 🙂
Evening Sir
I'm using scanner plugin. It run proper in debug mode but when i release apk file its not run. Automatic app is closed..
And this is happening with the barcode plugin too 😒😒😒
Thank you, Session! 🙂 scanner package is incompatible with latest dart version, you can check here : pub.dev/packages/scanner that's may the reason
Can you please try to show the code above each methods because i can not get my code to work only with the snippets you show...
Thank You Christian Hyltoft!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware
Hi! I need help... the classes from qr_flutter like QRViewController were showing an error message saying it was 'undefined'. I already placed the import '...' at the top part, still nothing. I hope anyone can help
@@HeyFlutter Thanks! I already fixed the problem. I installed the wrong flutter package because I had so many tabs open 😅
Thank you josello, make sure to follow the tutorial step by step 🙂 if still you are facing the problem make sure to check qr_flutter's version that you are using
thanks for your tutorial, qr_flutter is fantastic. Unfortunately, qr_code_scanner is no longer up to date and is in maintenance mode only, zxing for Android and MTBBarcodescanner for iOS are no longer maintained. Only bug fixes and minor enhancements will be considered. The creator recommends we use mobile_scanner. I tried mobile_scanner and can use it directly on Android without changing the permissions. The only difference is that you can't change the style in the mobile scanner package. I used a stack and paint with custom-painting the camera QR code overlay.
Great, Thank you @eduardor6949!
Good tutorial. I have requested access to the source code but it is showing me that I will have to support to have access to it
@@HeyFlutter Okay😩
what if i want user to download the barcode after he/she generate the barcode
@@HeyFlutter your welcome 😁
camera stops working after first load . I kept qr image and scanner in same page with tab bar. Once the tab is changed the camera stops working. Tried keep them in seperate page as well. Its not working. Can you please help on this issue
Hello, Bibash Katel! Follow this link: github.com/juliuscanute/qr_code_scanner/issues/277
I hope it will solve your problem. Thank You 🙂
I already followed the thread but the solution did not work for me. I added a button to resume the camera. If it does not work the resume button makes it work again. It's a temporary solution but anyway it's working for now.
when trying to download the source code on github after requesting access, it is in error
Thanks, Dalison spy! 🙂 Check out this: github.com/johannesMilke/sponsorware#2-why-didnt-i-get-an-email-even-if-i-have-sent-already-a-request-on-your-website
Hey
How I can create a qr code with many textfield?
Thanks
Thank You Katia Hacene! Follow this link: medium.com/flutter-community/building-flutter-qr-code-generator-scanner-and-sharing-app-703e73b228d3
I hope you will get your answer 🙂
Is there anyone knows how can I convert those barcode result into string ? I would really appreciate it thank you
Thank You Ryo Hans! Follow this link: stackoverflow.com/questions/69278242/changing-instance-of-barcode-to-string
I hope you will get your answer 🙂
I am having an error while using this plugin, says kotlin version issues requires 1.1.15 while the current version is 1.5.1
For me a workaround was to go to the plugin's build.gradle and remove the buildFeatures manually
Hello, Hrithik Mishra! Follow these links: github.com/flutter/flutter/issues/83834,
stackoverflow.com/questions/67699823/module-was-compiled-with-an-incompatible-version-of-kotlin-the-binary-version-o
I hope it will solve your problem. Thank You 🙂
How can I show the data from the scan on another screen?
Thank You Justquii! Follow this link: stackoverflow.com/questions/62476517/how-can-i-parse-the-scanned-result-data-received-from-my-barcode-scanner-to-a-ne
I hope you will get your answer 🙂
when i wanna to download this SC a request button doesn't give me anything .
🤔🤔😒
@@HeyFlutter ur code doesn't want to download with me . Why ?
plz sir make an tutorial of installation of flutter in vs code
Thanks for the idea, Krishna Jadhav creative mode! 🙂 I have added it to my list of ideas for future videos!
QRView show black screen on flutter 3, but hot reload works fine. :(
Any solutions, please? :(
Thank you @moeurnsokchea-6848, make sure to follow the tutorial step by step 🙂
I had the same problem with recent version of flutter. Add this to your _onQRViewCreated function, this should solve the problem
controller.pauseCamera();
controller.resumeCamera();
Hi, how to scan qrcode once time a make http post request
I found solution to archieve this
Hi,
The camera opens for the first time, but after closing the app and when reopen the app to scan , it shows black screen with the scanner view borders. why is this happening, someone please guide.
Thank You Arafaat Qureshi! Follow this link: pub.dev/packages/qr_code_scanner
I hope you will get your answer 🙂
@@HeyFlutter i have the same bugs
When QR code scanning is running, if you lock the phone and unlock, u will find black screen instead of camera...
Hello, Mohammod Al Amin Ashik! Follow this link: github.com/flutter/flutter/issues/45086, I hope it will solve your problem. Thank You 🙂
hey !!
I want to know that... Can we jump to new screen with QR code ?
@@HeyFlutter I was asking that, suppose we have two screens and two qr code, now we open the apk the qrscanner will be open and if we scan qrcode1 then screen1 will be open and if we scan qrcode two then screen2 will be open.
is this possible ? and if yes how ?
Thank you, Sohan Gajjar! 🙂 yes sure, after scanning the code you can simply navigate to other screen
@@HeyFlutter How ?
I'm still waiting for your approval Mr. Johannes Mike. How many years I need to wait?
Thanks, Roberto Jr Cantos! 🙂github.com/JohannesMilke/sponsorware#1-why-is-the-source-code-not-available-on-github
Your tutorial is good and nice but the repository in GitHub is not available to everyone. I made a request to download your source code but until now I'm still waiting for the approval.
@@HeyFlutter How so soon is the approval? How do I know if I already got the approval?
why are u put future builder ?
Thank you, Tech1st! You could learn more about future builder here: api.flutter.dev/flutter/widgets/FutureBuilder-class.html
How can i use this in web flutter?
Thank You Angry!! Follow this link: pub.dev/packages/flutter_barcode_sdk
I hope you will get your answer 🙂
@@HeyFlutter Thank you so much for the attention, i will take a look in this package!!!! ☺️
how to make background blur from the edges
This will blur the whole camera portion. I need to blur the rest of the part of camera apart from scanner box focus.
Thank you 😊, Akshay Papneja! Check out this solution this may help you : stackoverflow.com/a/50164093
I came across an error
FAILURE: Build failed with an exception.
* Where:
Build file 'C:\src\flutter 2.0\.pub-cache\hosted\pub.dartlang.org\qr_code_scanner-0.5.1\android\build.gradle' line: 38
* What went wrong:
A problem occurred evaluating project ':qr_code_scanner'.
> Could not find method buildFeatures() for arguments [build_dp4el5aku3ow5o0eeqgcfw4au$_run_closure2$_closure7@162ed278] on object of type com.android.build.gradle.LibraryExtension.
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at help.gradle.org
BUILD FAILED in 3s
Exception: Gradle task assembleDebug failed with exit code 1
Please I need assistance
I've been able to fix it
Solution:
I had to update my gradle version and kotlin version..
This package can for barcode?
@@HeyFlutter thanks bro
Thanks, Akmal Dira! 🙂 Wait till tomorrow, there I will upload a video about a Barcode Scanner App: ruclips.net/video/jkqR7CSeyNs/видео.html
I recommend try some other packages for QR scanning. qr_code_scanner package isn't worth investing time, it has major bugs and you will end wasting time like me. It creates black screen on most of the android devices and camera doesn't resume properly.
Thanks for the suggestion, tanmay space! 🙂
Hi! Can you suggest some package for qr scanning?
How to save sqlite??
@@HeyFlutter thanks ❤️
Thank You Ahmed Shakr! Follow this link: medium.com/flutter-community/using-sqlite-in-flutter-187c1a82e8b
I hope you will get your answer 🙂
hello sir
Hello, simpal yadav! 🙂
*"IN. MY. OPINION. THIS. GLITCH. IS. WHAT. EVERYONE. USES. AM. I. RIGHT?"*
*"**M.LOKI.BAR**"*
*"WHAT. IS. THIS. SONG. USED. IN. THE. VIDEO?"*
*CERTIFICATED*
Thanks , Is there a way to make MRZ passport scan using flutter