How To Add Image Cropper To FlutterFlow | No Code Limitations

Поділитися
Вставка
  • Опубліковано 28 лис 2024

КОМЕНТАРІ • 69

  • @Ali-Ideas
    @Ali-Ideas  2 місяці тому

    Join my community for exclusive Q&A and live sessions:
    superpeer.com/aliideas
    We're just getting started, and I truly appreciate your early support!

  • @shyshiney
    @shyshiney 3 дні тому

    you are god. saved my life. thank you so much.

  • @AldrichCarrasco
    @AldrichCarrasco 7 місяців тому +2

    Excellent video. Please do more complex tutorial with Flutterflow + Supabase.

  • @Nosh-v1i
    @Nosh-v1i 9 місяців тому

    OMG, I love this so much ima a beginner please make more videos like this!

    • @Ali-Ideas
      @Ali-Ideas  9 місяців тому

      So happy that they’re helpful , more to come

  • @robinsola1115
    @robinsola1115 Місяць тому

    works great, how about having the rectangular selector instead of circular??

    • @robinsola1115
      @robinsola1115 Місяць тому

      Let me answer my own question here if people are after the same answer, simply set the part of the code withCircleUi: true, to withCircleUi: false,

    • @Ali-Ideas
      @Ali-Ideas  Місяць тому

      You’re the best

    • @robinsola1115
      @robinsola1115 Місяць тому

      @@Ali-Ideas your channel is great! got a new subscriber!

  • @SatyaVinay-m3g
    @SatyaVinay-m3g 4 місяці тому +1

    Good evening sir, i have tried this, but i am not able to see the bottomsheet and cannot crop any picture, i have followed all the steps clearly but cannot see the outcome.

    • @satvin-18
      @satvin-18 4 місяці тому

      Even i am facing the same issue

  • @IspyrGameDev
    @IspyrGameDev 4 місяці тому

    Hiya, great tut, been looking for one for awhile, unfortunately even with updated dependices I'm receiving this error. Any ideas?
    Error: Couldn't resolve the package 'crop_your_image' in 'package:crop_your_image/crop_your_image.dart'.
    lib/custom_code/widgets/image_cropper.dart:14:8: Error: Not found: 'package:crop_your_image/crop_your_image.dart'
    import 'package:crop_your_image/crop_your_image.dart';
    ^
    lib/custom_code/widgets/image_cropper.dart:40:28: Error: Method not found: 'CropController'.
    final _crop_controller = CropController();

  • @youtubers
    @youtubers 4 місяці тому

    thanks for this tutorial and i like how you answer on comments, i have small issue: when i add the custom widget to the component it come with solid color like the container and (not working in test mode it shows the component only)

  • @BoxOutCeltics
    @BoxOutCeltics Місяць тому

    Just liked and subscribed, and I NEVER subscribe lol. Quick question: Can you change the shape of the cropper to something other than a circle, such as a rectangle, or do you have to use a circle? Thanks for an awesome video.

  • @Rourymhf
    @Rourymhf 5 місяців тому

    Thank u dude, it works great

    • @onedayapp3534
      @onedayapp3534 5 місяців тому

      which crop_your_image version did you use?

    • @Rourymhf
      @Rourymhf 5 місяців тому

      @@onedayapp3534 I can share the code if u want

    • @Rourymhf
      @Rourymhf 5 місяців тому

      @@onedayapp3534 lastest version

  • @happyboss555
    @happyboss555 7 місяців тому +1

    Any solutoin for setup the maximum size limitation of video uploading?

    • @Ali-Ideas
      @Ali-Ideas  7 місяців тому

      You can do it with a custom action

    • @ProducerIV
      @ProducerIV 6 місяців тому

      And maybe combine it with a video compressor? Would love a tutorial for that!

  • @LUDICRUMPTYLTD
    @LUDICRUMPTYLTD 6 місяців тому +1

    the code doesn't work anymore - Compilation error 86 packages have newer versions incompatible with dependency constraints.
    How do I fix this
    thanks for the video

    • @onedayapp3534
      @onedayapp3534 5 місяців тому

      same here, did you fix it?

    • @Ali-Ideas
      @Ali-Ideas  5 місяців тому

      The video is from a fee month ago
      If you use change the package version it should work

  • @PetVitalityApp
    @PetVitalityApp 7 місяців тому

    Awesome, great content! What if I want to return the image not as an image path (url), but as a local image file so that I can manage it on my page after cropping?

    • @PetVitalityApp
      @PetVitalityApp 7 місяців тому

      What i've done is to convert it to base64, pass it, then reconvert it back to file in the receiving page. Not very elegant

    • @Ali-Ideas
      @Ali-Ideas  7 місяців тому

      Yeah I think it’s now possible to directly pass localffuploadedfile bytes in the callback

    • @PetVitalityApp
      @PetVitalityApp 7 місяців тому

      @@Ali-Ideas I made it at last, thanks for the confirmation. Opens up for a whole lot of other widgets for me!

  • @LSSteinmeier
    @LSSteinmeier 6 місяців тому

    Hey, Awesome video. But i need a square instead of a circle. Is that possible aswell? Thank you in advance.

    • @Ali-Ideas
      @Ali-Ideas  6 місяців тому

      Yeah
      You can change the circular overlay

    • @LSSteinmeier
      @LSSteinmeier 6 місяців тому

      How exactly can I do that?

    • @Ali-Ideas
      @Ali-Ideas  6 місяців тому

      find cropStyle and change it to CropStyle.rectangle
      If you need more help you can reach out via email

  • @Sheehano98
    @Sheehano98 8 місяців тому

    Nice feature. Do you know how to have draw over image on flutterflow? And save they image

    • @Ali-Ideas
      @Ali-Ideas  8 місяців тому

      Yeah
      That should definitely be a custom widget
      Depending on features you want there are different packages and solutions for this

    • @Ali-Ideas
      @Ali-Ideas  8 місяців тому

      If you need help with it let me know

  • @ElderMarx
    @ElderMarx 6 місяців тому

    What would it be like if this were with users registered on Supabase?

    • @Ali-Ideas
      @Ali-Ideas  6 місяців тому

      You need to change the upload logic

  • @i_tune
    @i_tune 5 місяців тому

    Condition action1 :- Uploaded local file 2 is not showing. What to do?

    • @Ali-Ideas
      @Ali-Ideas  5 місяців тому

      Could you elaborate more
      What is the error ?
      If you need more help please reach out via email

  • @YashModi-b1j
    @YashModi-b1j 8 місяців тому

    I tried it and its working but there are so many things that you don't cover in this video.And when bottom sheet is dismiss then it will crash.

    • @Ali-Ideas
      @Ali-Ideas  8 місяців тому

      Could you share the error logs . I will update the code

  • @PrinceSingh-z9v4i
    @PrinceSingh-z9v4i 8 місяців тому

    Amazing brother, it is possible to make a note taking app in flutterflow, can you make a project based video

  • @otwinztv
    @otwinztv 7 місяців тому

    Hi, this seems like a great tutorial. However I'm getting an error which is "Target of URI doesn't exist: '/flutter_flow/flutter_flow_widgets.dart'". I tried eluding it from compilation but which got rid of the error but the widget was not working and I received a blank background. Do you have any tips?

    • @Ali-Ideas
      @Ali-Ideas  7 місяців тому

      Hi
      I just updated the code on Github , can you try it again ?

    • @otwinztv
      @otwinztv 7 місяців тому

      @@Ali-Ideas Hi, thanks for the quick response. The code compiles correctly, however I still get a blank screen when testing the functionality. I'm pretty positive I copied all the steps correctly. I'll try to play with it some more though. Do you have any ideas to why I might be having an issue?

    • @otwinztv
      @otwinztv 7 місяців тому

      Nevermind, I got it working! I just had to fix some width and height limits! Thank you!

  • @morgane5534
    @morgane5534 7 місяців тому

    lorsque j'upload l'image, la qualité est beaucoup affectée dans le image cropper. Est ce que tu saurais comment fix ça ?

    • @Ali-Ideas
      @Ali-Ideas  7 місяців тому

      I believe that's the default behaviour of crop_your_image package

  • @onedayapp3534
    @onedayapp3534 5 місяців тому

    I have this error: Type: InvalidType
    The method 'uploadData' isn't defined for the type '_ImageCropperState'.
    Try correcting the name to the name of an existing method, or defining a method named 'uploadData'

    • @Ali-Ideas
      @Ali-Ideas  5 місяців тому

      Hi!
      you need to enable firebase storage to fix this issue

    • @eznaaa8525
      @eznaaa8525 5 місяців тому

      @@Ali-Ideas I have enabled firebase storage before trying this custom widget but I encountered the same error. Can you make a video about this one?
      Here's the error I got:
      Target of URI doesn't exist: '/backend/firebase_storage/storage.dart'. Try creating the file referenced by the URI, or try using a URI for a file that does exist.
      The method 'uploadData' isn't defined for the type '_ImageCropperState'. Try correcting the name to the name of an existing method, or defining a method named 'uploadData'.

    • @eznaaa8525
      @eznaaa8525 5 місяців тому

      Solved.

  • @Priviroom
    @Priviroom 5 місяців тому

    Hello,
    I'm having a problem: the widget doesn't have an image, it's empty. How can I fix this bug?
    thanks in advance and congratulations for your tutorial.

    • @eznaaa8525
      @eznaaa8525 5 місяців тому

      Don't set the widget to infinite. Set it to 350 by 500

    • @Priviroom
      @Priviroom 5 місяців тому

      @@eznaaa8525 thank you so much, you save me in my project, I love you so much man

    • @Priviroom
      @Priviroom 5 місяців тому

      @@eznaaa8525 but I have another problem, sorry, when I press the crop button, it loads infinitely but doesn't update my state management, do you have a solution?

    • @eznaaa8525
      @eznaaa8525 5 місяців тому

      @@Priviroom I added this snippet in my code.
      Future uploadData(String path, Uint8List image) async {
      try {
      final ref = FirebaseStorage.instance.ref().child(path);
      await ref.putData(image);
      final downloadUrl = await ref.getDownloadURL();
      return downloadUrl;
      } catch (e) {
      print('Error uploading image: $e');
      return null;
      }
      }
      here's the link to the full code.

    • @Priviroom
      @Priviroom 5 місяців тому

      @@eznaaa8525 sorry, I think that on youtube, the links are not displayed but. so 2 solution, send me a link in comment but in an incomplete way not to be detected by youtube (ex no http or .com) or then by email

  • @jaguarconsultoriadigital8147
    @jaguarconsultoriadigital8147 9 місяців тому

    Grateful

  • @penguinneo
    @penguinneo 9 місяців тому

    What a great video. Can I crop a photo to a square?

    • @Ali-Ideas
      @Ali-Ideas  9 місяців тому +1

      Thanks
      Yeah you can set the aspect ratio on the custom widget , needs a tiny bit of coding )

  • @catoshimeowmoto
    @catoshimeowmoto 7 місяців тому

    Please make one for supabase. 😢

  • @cyberarcher
    @cyberarcher 9 місяців тому

    I have a feeling you gonna be big someday 🫣

  • @PrinceSingh-z9v4i
    @PrinceSingh-z9v4i 8 місяців тому

    Amazing brother, it is possible to make a note taking app in flutterflow, can you make a project based video

    • @Ali-Ideas
      @Ali-Ideas  8 місяців тому

      Thank you for the support
      Will do project based videos for sure