Create QR Code Generator App In Flutter With Save As Image Feature

In this video, we'll show you how to create a QR code generator app in Flutter with a "Save as Image" feature. You'll learn how to use the `qr_flutter` package to generate QR codes, and how to capture and save the generated QR code as an image to the device's gallery. We'll also show you how to add a text field for entering the data to be encoded in the QR code, and how to style the app to make it more visually appealing. By the end of this tutorial, you'll have a fully functional QR code generator app that you can use to create and share your own QR codes. So, let's get started! 😊
Timestamps
00:00 Create Project
01:51 Create Project Files
02:35 Create Static App Colors File
03:36 Importing Packages
04:02 Creating the Front-end/UI of the app
12:53 Writing Back-end Code
Download source code: github.com/FLDevelopers/Qr_Co...
Check out Improved version of this app on Google play store: play.google.com/store/apps/de...
If you find any bugs or errors, give us feedback.
-------------------------------------------------------------------------------------
Check out our website: www.freetrained.com/
Facebook Page Link: / free_trained
Facebook Group Link: / 1746009532359857
Please Subscribe Our RUclips Channel For More interesting Videos And Don't Forget To Share Our Channel With Your Friends.
Note: *Please Turn Off Any Ad Blocker Software or addon to support us.

[@syedanarjisfatima4893]

👍

[@sketchionic6356]

Thanks

[@FreeTrained]

You're welcome 😊

[@MuhammadBasim-pl5ty]

Thanks for help

[@FreeTrained]

Always welcome

[@ansarpaguio7433]

thanks for the help

[@ansarpaguio7433]

can you also make a video how to directly upload the qr code to the firestore, thanks

[@FreeTrained]

Video topic is noted 👍🏻😁

[@lordmy9029]

whats your extension show error / issue code on right code instead using ?

[@FreeTrained]

If you're asking about the extension which shows the error on same line of the code then extension name is "error lens".

[@kuramamini1401]

Im beginner I don't know where i can see picture location how to check and set it in future void function 😢

[@FreeTrained]

You can use built in methods to get path like "getApplicationDocumentDirectory() " method or you can use custom path like we did in this video.

[@samuelchinemerem8001]

So I adopted your exact function for a project I am working on to save the qrcode as png but I keep getting this error:
I/flutter (30489): Error: PathAccessException: Creation failed, path = '/storage/emulated/0/Download/Qr_code' (OS Error: Permission denied, errno = 13)
I have used the permisson handler to get permission but even after that the image wont save I have also added this line to my android manifest:
and still nothing works. please how do I resolve this ?

[@FreeTrained]

It is occurring because you might be using different mobile OS or your mobile device might be different.
I knew the exact folder location so I hard coded the location.
To solve this error, you need to use a package named "Path_provider". You can also use "External_Path" package.
If you don't want to save images inside your application directory, use "external path" package.
I have used the external path package in my video "Create camera in flutter from scratch". You can check that out. However, if you still don't get that then I'll create a separate video on path providers.
Let me know if you face any problems.

[@samuelchinemerem8001]

@@FreeTrained Okay thanks for your response.
I am currently using 'path_provider' but it either saves it as a cache that's inside the android/data folder or it saves it where isn't visible to the user. So how can I use path_provider to make it visible and even appear in the gallery?

[@FreeTrained]

First, saving images in application directory (android/data) is provided when you use path provider. However, if you want to save the files in outer folder (means download, pictures, etc) then you need to use external_path package. this package gives you the location of these folders.
Second, if you want to add these images in gallery then you need to tell the system that "you saved some images and add these in gallery."
For that, you need to use media_scanner package. It notifies the system to add files in gallery.
If you need more help then feel free ask.

[@samuelchinemerem8001]

@@FreeTrained alright
Thank you so much I will try what you have suggested

[@FreeTrained]

No problem 😁. Feel free to ask again

[@janmichael6869]

Hello! Im using using a package named "Path_provider" since im also encountering issues regarding like thisCreation failed, path = '/storage/emulated/0/Download/Qr_code,' but it always say that my Storage permission is denied

[@janmichael6869]

how do i resolve this? I/flutter (17638): Error: FileSystemException: Creation failed, path = '/Storage' (OS Error: Read-only file system, errno = 30)

[@FreeTrained]

Right now, I don't know which package are you using for permission handling. So, I'll give complete details to do so.
Path provider, give access to application directory.
However, if you want to store output image in outer download folder then you need to use another package called, "External Path".
This package will give you the access to outer folders like pictures, documents, download, etc.
You also need to add read and write permission inside AndroidManifest.xml file. It will tell device about which permissions are we going to implement.
After that, You need to get read and write permission. To get these, use permission handler package.
Hope this will help you. If you have any other problems, feel free to ask.

[@janmichael6869]

@@FreeTrained it says my file is saved at \storage\emulated\0\Android\data\com.example.elgivesv2\files however i cant find it?

[@firmanaidoprastyo8389]

kok error kak