Flutter - Image Filters WITHOUT External Package | Flutter UI Design Tutorial

Поділитися
Вставка
  • Опубліковано 6 жов 2024
  • #flutter #filters #mobileapp
    In this Flutter UI Design Tutorial, we will be taking a look at Creating Image Filters in Flutter without using any External Package. We will be using ColorFiltered Widget and using its power to create Quick and Easy to Implement Image Filters.
    Github: github.com/ret...
    Medium (Article): / etdkhhlntab
    feColorMatrix (What is): developer.mozi...
    feColorMatrix (Create your Own): kazzkiq.github...
    🔥 Auto-Generate Flutter Custom Paint Code TRY THIS FREE TOOL👇:
    👉 Flutter Shape Maker: fluttershapema...
    🔥 Learn About the MOST IMPORTANT WIDGETS in Flutter 👇:
    👉 Widget Essentials Series: bit.ly/3GpfiYw
    👉🏻 Product Hunt: www.producthun...
    (Your UPVOTE Means a lot! 🙌)
    If you find this video useful consider Supporting @RetroPortal Studio :
    👉 Buy Me a Coffee: www.buymeacoff...
    👉 Patreon: / retroportalstudio
    Social Links @RetroPortal Studio :
    👉 Twitter: / theretroportal
    👉 Medium: / retroportalstudio
    👉 Instagram: / retroportalstudio
    👉 GitHub: github.com/ret...
    If you like the tutorial, please hit the LIKE and Subscribe button and also consider supporting me on Patreon or Buy Me a Coffee for More Flutter Tutorial on RetroPortal Studio.
    Thank you for Watching! Happy Coding :)

КОМЕНТАРІ • 43

  • @RetroPortalStudio
    @RetroPortalStudio  4 роки тому +1

    If you find this video useful, consider Following me on:
    Twitter: twitter.com/theretroportal
    Instagram: instagram.com/retroportalstudio
    LinkedIn: www.linkedin.com/in/parasjainrps
    Happy Coding! ✌️😁

  • @zeusjackson5865
    @zeusjackson5865 3 роки тому +9

    Note: If the image loses quality after conversion, you need to increase the pixelRatio of the repaintBoundary in the convertWidgetToImage() Function. for example: pixelRatio: 3 or 4 or ...

  • @santiagomamani6111
    @santiagomamani6111 4 роки тому +2

    I love how simple and understandable are you explanations. Great video and channel!

  • @benjaminli21
    @benjaminli21 2 роки тому +1

    Thank you man, this is a great and straightforward tutorial!

  • @小林春斗-f4f
    @小林春斗-f4f Рік тому +1

    Great video! Thank you!

  • @rikhiljain6889
    @rikhiljain6889 4 роки тому +2

    Great video... helps me a lot...
    Keep making such great video that really help...
    Looking forward to see your more videos...
    Thanks

  • @علياءاسامه-ت4م
    @علياءاسامه-ت4م 2 роки тому +1

    Thanks ,great tutorial

  • @pratikpitale5310
    @pratikpitale5310 3 роки тому +1

    Woohh impressive voice .. crisped and to the point

  • @kbyo2006
    @kbyo2006 2 роки тому +1

    Thanks for another great tutorial 💪💪

  • @DexterTalha
    @DexterTalha 4 роки тому +1

    I was looking for this.... Thank u.... 3rd like😁

  • @carlosboyanosky8044
    @carlosboyanosky8044 4 роки тому +1

    Excellent as always

  • @johngorithm7602
    @johngorithm7602 4 роки тому +2

    Love it ❤️

  • @mich_k_kim
    @mich_k_kim 3 роки тому

    Thank you for this awesome tutorial!

  • @ahzeemkhatib3105
    @ahzeemkhatib3105 4 роки тому +2

    Great tutorial ❤️❤️ !
    But one thing that as u shown image on ua video there is scroll bar down the image...
    How to add that in this source code ??
    U have that source code ??
    Plz provide us

  • @jithinjohnson5703
    @jithinjohnson5703 3 роки тому +1

    very help full tutorial

  • @search_me_tilak
    @search_me_tilak 4 роки тому +1

    Best ♥️🔥

  • @zhenfu4556
    @zhenfu4556 2 роки тому

    Awesome video. BTW, how generate a list of image? I see the beginning video there is a list of image at the bottom of image. But the final product I don't see the a list of image at the bottom. Thanks.

  • @hft3004
    @hft3004 4 роки тому +1

    WOW , thank you ~

  • @srjlove2102
    @srjlove2102 4 роки тому +1

    Cool feature

  • @LifeLesson_Guru
    @LifeLesson_Guru 4 роки тому +1

    Amazing

  • @aliakkawi4759
    @aliakkawi4759 4 роки тому +1

    Awesome

  • @jeremiaholuwaseun7327
    @jeremiaholuwaseun7327 2 роки тому

    Nice one! Pls how do i save a list of images to Uint8list after applying Color filter?

  • @tasya_nabila
    @tasya_nabila 3 роки тому +1

    My app didn't show the picture. What might be wrong?

  • @althafaralijaffarali1803
    @althafaralijaffarali1803 4 роки тому

    Thank you for your awesome videos 🤩Bro I have a doubt. In real time apps we have more images or more number of members (in chat ui). How could we add those images (in filters) or members (in chat app) continously like it happens in real app and use the same code for all of them ?? How to code it? Could you please tell me or make a video 🙃.

  • @arishsiddiqui5496
    @arishsiddiqui5496 4 роки тому

    Bro thank you for this video it was amazing👍👍 and I have learnt a lot. But I have a question can we convert this matrix color to mode color? Bro can u please help me out..

  • @gaganyadav9569
    @gaganyadav9569 3 роки тому

    Hello there! Thank you for this video and an amazing explanation.
    I am trying to do the same thing using ColorFilter but to a video file. Now the issue I'm having is to export this video WITH color filter to a new video file. Any help would be really great :)

  • @dalevenco1912
    @dalevenco1912 2 роки тому

    Hello,
    How can I save the image to Facebook, Instagram and Twitter after editing. Thank you for your response.

  • @shivamshrivastava5019
    @shivamshrivastava5019 4 роки тому +1

    Bro is there any way to render flutter animation as video and save it to gallery...If yes , then can you tell me how....*PLEASE REPLY*...thanks a lot for such contents😊😊❤❤

    • @RetroPortalStudio
      @RetroPortalStudio  4 роки тому

      Hey! Glad i was of help! I don't know what your use case is but i came across this package a few months ago and i think that may be what you are looking for pub.dev/packages/widget_recorder ✌😁

    • @shivamshrivastava5019
      @shivamshrivastava5019 4 роки тому

      @@RetroPortalStudio Thanks a lot for your reply and help, but I have seen this package, this package do record flutter animation but doesn't render flutter animation in mp4 format.
      My Use Case: In my app user will be asked to insert image in animated container, and there will be some sort of animation with the user's image...I want to render that animation for the user and save it to their gallery in mp4 or video format.
      Hope you understood my problem.
      I will be grateful if you reply me again and guide me to solve this problem.
      Once again thanks a lot @RetroPortal Studio❤❤😊😊❤❤

  • @shivarajsajjan3000
    @shivarajsajjan3000 3 роки тому

    How to apply sharpening filter on image in Flutter.?

  • @mouradouddah5934
    @mouradouddah5934 4 роки тому +1

    thank you pro

  • @Bucharestvibes
    @Bucharestvibes 2 роки тому

    what about video filters

  • @bestsexcare1745
    @bestsexcare1745 Рік тому

    I need this same for video

  • @PlayingCode
    @PlayingCode 3 роки тому

    Hey bro I did the same as explained but my code gives a lot of errors
    1.>
    A value of type 'RenderObject?' can't be assigned to a variable of type 'RenderRepaintBoundary'.
    Try changing the type of the variable, or casting the right-hand type to 'RenderRepaintBoundary'.
    2.>
    A value of type 'ByteData?' can't be assigned to a variable of type 'ByteData'.
    Try changing the type of the variable, or casting the right-hand type to 'ByteData'
    pls help me

  • @mazekaty-3700
    @mazekaty-3700 3 роки тому

    can use with videos ?

  • @harryr7083
    @harryr7083 Рік тому

    How can you do this on a video?

  • @samirkrishnach3691
    @samirkrishnach3691 4 роки тому +2

    Why that one dislike

  • @fullstack_journey
    @fullstack_journey 4 роки тому

    do you know of any way in flutter to apply a perspective crop + warp, like that done in camscanner, I've figured out the cropping part which returns 4 points but not sure how to do the warping the points so it extends to the edges, I don't know native java otherwise I could have used opencv java ;_; thanks.

  • @fortheloveoffood6540
    @fortheloveoffood6540 4 роки тому

    how can we get image from camera?