Flutter Tutorial: Build Your Own Image Editing App | Dart | Flutter From Scratch

Tutorial to Build Your Own Image Editor App, Package using Flutter & Dart without using any plugin!

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:

Connect with me Here:

#flutter #dart #image #editor

[thecreativecorner]

Bhai tumne ye point sikhaya.. method ko alag class me rakhne ka ..pure youtube me pahela video dekha aysa😍💓💝

[ShahriarShahin]

Wow man, finding these type of videos doesn´t happen very often. I really appreciate your willing to share knowledge.

[K_CO_NamanGarg]

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.

[AbhinavMishraA-wcky]

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!

[ahmedelbehiry]

what an awesome tutorial!
your style explanation is amazing!
thank you very much

[zyan...]

como eu crio um app de edição de vídeo com o flutter flow?

[govindmadan]

Hey, how do you keep the quality of image because screenshot package reduces the size of the image to device resolution.

[davalien]

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)

[urstruelyshanmukha]

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.

[mamd]

i ask about package or free api to convert the image to caroonize image ?

[flexibled]

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.

[KamranKhan-jgmd]

Great Sir, please make a complete professional editing app

[voyage_finder]

what is the use of that creatorText controller

[davidmartin]

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??

[AppTech-njbr]

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 ...

[skrockybulhasanrasel]

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.

[siriusqueen]

Great Job keep it up. Thumbs up to you!

[davalien]

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?

[lifebest]

Sir how to create home service app backund php

[omarhd]

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