Create custom camera widget on Flutterflow | live preview camera
ฝัง
- เผยแพร่เมื่อ 11 ธ.ค. 2023
- In case you want to create camera that can taking picture from you web cam. or you want to customize your camera preview, you can use this custom camera action.
CameraPhoto (custom widget):
github.com/yusuffirdaus/flutt...
base64tofile (custom function):
final bytes = base64Decode(base64Img);
final file = FFUploadedFile(bytes: bytes);
return file;
.
.
.
Follow my social media
ig : / ysffrds11
.
If you have offering jobs/apps to me, sent me an email to
ceripos.apps@gmail.com - บันเทิง
![Create Camera App From Scratch In Flutter [with Flash, Camera Switching, Multiple Images Functions]](http://i.ytimg.com/vi/j2xMGZ1XcMo/mqdefault.jpg)
Man you saved me a loooooot of hours! Thank you!!
Excelent !
Thank you bro 🙂
Thanks You a lot !!!
Thanks boss
keren bro
hello man im encoutering some problem's how can i save the image to firebase is it possible and im still a student im using flutterflow for my capstone project thanks!
Thanks for the video! Unfortunately I have problem. Why i get error?
: The getter 'makePhoto' isn't defined for the type 'FFAppState'. Try importing the library that defines 'makePhoto', correcting the name to the name of an existing getter, or defining a getter or field named 'makePhoto'.
Hi I can invite you as collaborators on thise example project. Just email me
this is awesome!! quick questions...when you open this on a phone, it uses the front camera...what if you want the camera to face the user? like on facetime.
I never try something like that, I think you need another library to do that
Hi Mate, can add a Text when camera is open or any other option like a frame etc in flutterflow when camera is open ?
Yes you can, just added text widget on stack widget with this custom camera widget
Hello Yusuf.
First, thank you very much for the video. I followed your steps and managed to capture photos from the camera without problems.
Now I have an issue that I am not able to resolve. I can't upload the captured image to Firebase.
When I upload images with the FlutterFlow camera function I do it without problems but when I want to upload the image that I have captured with your method, the image is not uploaded to Firebase.
To see if the upload starts, I have the snackbar with the upload status information activated but it is not even displayed.
I think it has to do with the type of variable I pass to upload.
I use the variable "imageParam" as File to Upload (all within the custom widget "bsImage") but I don't know if I would have to do something with that variable for the upload to Firebase to work.
I have tried uploading "imageParam" as Media and as File but in neither case does it work.
Could you tell me how to solve this problem?
Thank you very much in advance.
Hi I can invite you as collaborators on thise example project. Just email me
Hi, I am also wondering how to upload the image to firebase. Have you figured this out?
you have to create 1 more custom action, to upload base64 file to your own firestore. this is my custom code:
import 'package:firebase_storage/firebase_storage.dart';
Future base64Upload(String base64image) async {
// upload base64 image to firebase storeage
// Decode the base64 image
Uint8List bytes = base64.decode(base64image);
// Create a unique file name
String fileName = DateTime.now().millisecondsSinceEpoch.toString() + ".jpg";
// Upload the image to Firebase Storage
Reference ref = FirebaseStorage.instance.ref().child(fileName);
UploadTask uploadTask = ref.putData(bytes);
TaskSnapshot taskSnapshot = await uploadTask.whenComplete(() => null);
// Get the download URL of the uploaded image
// String downloadUrl = await taskSnapshot.ref.getDownloadURL();
final downloadUrl = await taskSnapshot.ref.getDownloadURL();
return downloadUrl;
}
hey, thanks for this awesome video. can you explain how you use this function? how should i set my action arguments, in order to make this function work? Thanks @@yusuffirdaus11
Hello, how did you set the action arguments? Thanks for this awesome video@@yusuffirdaus11
@yusuffirdaus11 thanks for sharing ur project, i've tryed it starting from the link you posted in another comment and and redo it following the video but i have a problem: when i click on the button the imagebs load but without the image taken, it keep show the placeholder, can you figure how can i solve it? i've checked and its always the same, even starting from ur project link, thanks!
Have you solved this problem?
@@yusuffirdaus11 unfortunately not yet
how to add custom widget on photo like showing date nd time
Thank you. The camera works on both FF and preview. But I don't know why it doesn't work in test mode
It should be, I have no idea why
I have a similar issue, though I just get “No Camera Available” on chrome and I get a spinner on mobile emulation (via browser). Unfortunately Local Run is such a piece of crap that I don’t even it still as it takes about 20 minutes to spin up a test instance and dies after a few minutes, but I will try that later when I have time.
Hey I have an error " no camera available", how I fix it ? I have all my google chrome perms enable for camera but it wont work
I forgot to mention, u cannot test on flutterflow test mode. You have to do web push org running on real device
@@yusuffirdaus11 thanks, I will try that 😉
@@yusuffirdaus11do you need to download the code for that? Or how to test on real device?
@@yusuffirdaus11 How to do this?
@@Yeet-vv7qj you can do “web push” to see the result, or you can also download the apk
Hi @yusuf. I want to discuss with you about a project I am working on in flutterflow. I stuck in a functionality and I need you for consultation or even hire you why not if you can do the job? I am waiting for your answer
Hi Oumar, you can sending me an email to ceripos.apps@gmail.com
Thanks
I love you Yusuf.
How can I change betwen diferents cameras?
For example, my mobile phone have the front and the back camera and, by default, this choose the front camera.
I would need the back camera.
Thanks!
I have added this code into the 'build()':
controller = CameraController(
snapshot.data!.firstWhere(
(camera) => camera.lensDirection == CameraLensDirection.back,
orElse: () => snapshot.data![0], // Si no encuentra la cámara trasera, elige la primera cámara disponible
),
ResolutionPreset.max,
);
You can add additional code to check if the device has back camera and use the back camera.
pub.dev/packages/camera/example
Is it possible to get a version of this that records video please?
Version?
@@yusuffirdaus11 Yes. This version takes photos. Can you make a version that records videos?
hello bro i have got the error like this please can u give me a solution to solve this
unknown error compiling custom code a common cause is a custom widget or action whose name in the code does now match the name provided in the editor
Wait a moment I will make this project public.
app.flutterflow.io/project/camera-app-c7swm6
hi. what should i do? when i click to refresh code editor with pubspec dependencies, nothing happens
you can go to developer menu (top right ) and click view code and go to pubpspec.yaml file. and see if the package already dowloaded or not
@@yusuffirdaus11 when i look it hasnt. thank you for your response.
@@yusuffirdaus11 is it possible to provide a download link to the example flutterflow app you have in the video so we can attempt to learn from it ?
@@yusuffirdaus11 I just noticed you have another video with the camera setup🙏🏿 I downloaded it and I’m working on it now. Thank you
Hello friend. The video is great. I have a problem. All program run without errors but it shows no cameras available. Could You please help me?
For now you need to running on web publish or install apk to your device
🙏 video request: can u make a video on a chatgpt app that have the streaming effect, I think flutterflow doesn't support it natively
I will figure it out brother
@@yusuffirdaus11 thanks bro♥️