UI Images to Flutter Code with new ChatGPT Vision

hello flutterlings today we will be seeing how we can create flutter code from UI designs using chat GPT so let's get started first of all you have to have stat gbd4 and you have to enable Advanced Data analysis and we can just click here and just upload this image and we have to give a prompt it's always good to put please for getting best results all right let's see what happens it's saying let me first take a look of the uploaded image and it's working right now finished working on it okay that's a image that we uploaded and uh yeah it's got the background color of the image title and Logo text Fields login button and it is asking us I'll do my best to replicate this UI in flutter based on the uh saying all these things all right it's creating it's creating the UI right now [Music] let's see let's see what it comes up with all right it's creating the text Fields text editing controller and all that stuff that's great all right it's generating [Music] so I want you to see this is our input image and uh with the vision API now it's possible to create UI with chat GPT but it won't look exactly like this but we have a starter code to work with all right all right yeah so they've created a basic thing right here what we can do now is copy this code and go to Dart pad type it right here give it copy paste it right here we can run it you can hide these things it's getting executed yeah and like all right I think it has created a rough UI for logging in from our original image it's not as good as exactly as what we we had but uh it understood it's got a login it's a login page and there are two text boxes that we have here with the same icon we have the same icon as as it is here um now this icon is a little bit different but the password icon is actually the same thing we want and it's written username instead of email well uh this is an initial version and let's check out with another image let's take a more complex image give me the letter code for this s ail please it's always better to use the please keyword it really works it's been working for me for so many times now it's really good all right so it's got the image based on the image displayed appears you should have created a you want to create a sign up UI yeah it's getting all those things from the image and it's creating it for us right now all right yeah it's got all those username email password and uh information those are the um yeah so it did Miss first name and last name but it's um I mean that's room for improvement it will of course be better I did sooner or later uh we can think it's going to be better sooner or later but the thing is it's doing its thing it's really making a difference it's taking all those UI images and converting it into code is really really good for us because it saves us a lot of time and that's a good thing so let's check out what this UA is sign up screen let's go to the dart pad sign up screen we'll just copy it from here you'll paste it here and we will put sign a screen here and run it let's see what happens there are some issues but let's see what happens all right uh so far I mean it's not impeccable but uh it's come up with it's understood that there's an email password confirmation and all that there's a button to register now it's saying sign up but well this is uh this could be used as a boilerplate there's of course room for improvement but still it's really good job all right that's it for this video I just wanted to show you um how good it is right now to create UI for flutter apps using chat GPT thank you very much for watching this video and see you in the next one thank you

Channel: Flutter Explained

Views: 2,303

Keywords:

Id: DhuNz1T0dsU

Length: 5min 49sec (349 seconds)

Published: Tue Sep 26 2023