Flutter Tutorial: Build Your Own Image Editing App | Dart | Flutter From Scratch
ฝัง
- เผยแพร่เมื่อ 13 ก.ค. 2024
- Tutorial to Build Your Own Image Editor App, Package using Flutter & Dart without using any plugin!
Source Code: github.com/RivaanRanawat/flut...
Features:
- Pick Image
- Add Text
- Bold Text
- Italic Text
- Add New Line
- Align Text Left, Right & Center
- Change Colour
- Increase Font Size
- Decrease Font Size
Time Stamps:
(00:00:00) Demo
(00:04:31) Prerequisites
(00:04:46) Setting Up The Project
(00:08:04) Picking Image from Gallery
(00:14:31) Adding New Text UI
(00:25:00) Adding New Text Logic
(00:40:34) Creating an AppBar
(00:48:32) Selecting Text
(00:50:58) Changing Text Colour
(00:53:47) Increasing Font Size
(00:55:09) Decreasing Font Size
(00:55:40) Aligning Texts
(00:57:14) Bolding Text
(00:58:28) Italic Text
(00:59:37) Adding Lines for Text
(01:02:36) Deleting Text
(01:04:46) Saving Image to Gallery
(01:17:36) Conclusion
Links:
Image Picker Plugin: pub.dev/packages/image_picker
Screenshot Plugin: pub.dev/packages/screenshot
Permission Handler Plugin: pub.dev/packages/permission_h...
Image Gallery Saver Plugin: pub.dev/packages/image_galler...
Connect with me Here:
Instagram: / optimalcoding
GitHub: github.com/rivaanranawat
Linkedin: / rivaan-ranawat
Facebook: / rivaan.ranawat
Mail: namanrivaan@gmail.com
Medium: / namanrivaan
#flutter #dart #image #editor - แนวปฏิบัติและการใช้ชีวิต
![[LIVE] ใครคุยเรื่องบอล "พ่องตาย" #คุยให้เด็กมันฟัง EP.43 (13/7/67)](http://i.ytimg.com/vi/8bHYL8RuBqs/mqdefault.jpg)
Wow man, finding these type of videos doesn´t happen very often. I really appreciate your willing to share knowledge.
Thank you!
what an awesome tutorial!
your style explanation is amazing!
thank you very much
You're welcome!
Eagerly waiting for your video.
Awesome, Thank you so much!
Bhai tumne ye point sikhaya.. method ko alag class me rakhne ka ..pure youtube me pahela video dekha aysa😍💓💝
Awesome, glad you learnt something new😄
Thank you so much Rivaan ❤️
You're welcome Nikhil!
Awesome tutorial mr. Ranawat 😍
Thank You So Much!
Superb video rivaan
Thank You So Much Sumit😄
Thank you so much for this!
Thank you so much!
Great Job keep it up. Thumbs up to you!
Thanks!
We waiting and thank you firstival
You're welcome 🙂
awesome explanation 🔥🔥
Glad you liked it!
Waiting 😁
Thank you so much!
One suggestion: Pls zoom in your screen while coding, it really adds on a better viewer experience. Also, eagerly waiting for new projects in flutter+ node.
Alright, will make the change next video onwards, thank you for your suggestion!
Good job bro and useful for me
Thank you!
Hey, how do you keep the quality of image because screenshot package reduces the size of the image to device resolution.
Can't wait 😎
Haha, thank you so much!
@@RivaanRanawat Thank you so much for your tutorials they have helped me a lot!
@@infect3ds920 You're welcome!
Amazing
Thanks!
thanks
Most welcome!
Excellent for me
Hope you find it useful!
amazing
Thank you!
How can i add figures, like circles, triangules lines, and photo i have already design(in my casa i would like to add small goals, tshirts, representing players etc to make an app to create football tactics)
Hellow Rivaan, I added the Image cropper after the image picker, I pasted image cropper codes in the if statement( where you wrote navigation codes to move from home screen to EditImageScreen) and it croppes Well, After cropping it doesn't show the cropped Image, but it takes me back to the home page where I can pick the Image.
I need your help bro, and any one else can Help.
Awsome
Thank you!
You are creating great flutter content and a huge appreciation for it. But why you didn't make any playlist of your awesome videos on youtube. Hope you will make multiple category playlists of your content. Thanks.
Thank you so much for your kind words! Haven't made playlists as I don't have many videos yet but will make as soon as there are variety of videos uploaded!
Thanks for your suggestion!
i ask about package or free api to convert the image to caroonize image ?
Please help me! Urgently
Getting some type of name: name error with a renderview error, while running.
The app was working super good! But after I added the code to save it into the gallery it malfunctioned!
bro , u r professional
Thank you so much 🙂
@@RivaanRanawat u r welcome 🙂😂💙
wow~
Thank you!
Hey @Rivaan Today I completed this image editor app it was wonderful experience and I have learnt few topics from this. Thankyou so much I was very excited to see more videos like this. Can I expect portfolio mobile app and website.
Definitely, Responsive Portfolio Website is already in my mind😄
@@RivaanRanawat Thank you so much, looking forward for that tutorial
what is the use of that creatorText controller
Hello i wanted to ask is that can we get the flutter code of the edited image with stack and text widget and other stuff e.g when we have more than one text in the code there should be column widget and so on ...
because what i want to do is extract data afterwards !!
como eu crio um app de edição de vídeo com o flutter flow?
How can I do that, when i change to other page( with a bottom navigation bar, a drawer etc...) and then i go back to this page that it show a message with the options continue editing or delete all??
Not sure I understand... Can you please elaborate?
Great Sir, please make a complete professional editing app
Definitely!
I want to do this but with a preselected image(a football pitch, to make tactics), that when u enter on the home scren the image is already there, how do i have to do it?
In the scaffold, wrap your body with container, giving it full height and width and in the decoration property passed in the background image property.
Hey, how can we reference your work? It’s amazing! I want to use some of your ideas but don’t know how to give you credit.
Hey, thank you! You can give me credits by mentioning my name with link to this channel.
@@RivaanRanawat Thanks!. Maybe it would be useful I you used licenses on your github code (like MIT's or related).
@@DaVIDmXD1 Will include it in a week's time!
thank you
i found a solution to remove the bottom two yellow lines under the text
you can wrap the taxt widget with Material and give the color of Colors.transparent
Awesome!
Thanks... For what u have done on ma coding🍶may GOD bless u.
But how can I contact u for more...... (Coarse full stack programmer
You can contact me on Instagram at optimalcoding.
Bro please do a video on how to make a custom text editor with toolbar from scratch. Please
Noted!
Sir I have a different version of flutter and dart will it work on that??
I am even not getting your flutter version but dart version of yours is available
Yep, it will work!
After using your source code of this tutorial the image lost its Exif Data. can you please answer me why this happening?
I'm not sure what Exif data means. Would appreciate an explanation!
Sir really fantastic
From my side one request please accept this request
Please create an app useing block pattern useing API
Useing API block pattern crud operations please sir
Please accept my request
If possible release the video by next week
Noted. But can't assure you that the video might be out in a week. Afraid it might take longer than that.
Are you Removing the background of image. It would be exciting
That would have been interesting, will make a short tutorial on it! Thanks!
Please make a complete ecommerce app with admin dashboared.
Already in line!
@@RivaanRanawat Thanks a lot dear. May Allah bless you.
Thank you very much😄
Sir how to create home service app backund php
Video on it already in my To-Do List!
@@RivaanRanawat OK home service tutorial please
Thanks sir
Hi. Could you please make a tutorial on a flutter app that can be used to send and receive crypto currencies like a crypto wallet? Thanks
Can you make a discord server?
Thanks for the request! Even I've been thinking about it for quite some time now. Expect it to be there in 2.5 to 3 weeks!
This is not image editor....this is text editor
Why did you check this creatorText.text.isnotempty ? and what is a use case of this?
I don't understand the use case of the creatorText controller and why we need that? because that always will be empty until we assign some value to it.
Wow man, finding these type of videos doesn´t happen very often. I really appreciate your willing to share knowledge.