Ai Image Generation App with Flutter & OpenAi | Flutter OpenAi | Flutter ChatGPT | Flutter Tutorials

[Music] hello guys assalam alikum in today's lecture we are going to learn how to build image generation AI application using fletter and open AI so first of all let me create a new flter [Music] project project name is image generation AI platforms will be only Android and iOS let me uncheck others so Android Studio is creating a new flutter project here you can see the basic flutter project is ready so first of all let me remove some extra code and [Music] comments now we need to create a screen uh let me show something here is the screenshot of our application screen you can see we will uh create like this here user will be type anything the image uh he want to generate and when click the button the application will generate image for user right now you can can see this application is in dark mode first of all we need to set our theme uh according with dark right here you can see in color scheme We Will Set brightness to dark uh brightness dark now our application is in dark mode let me change the [Music] title image generation app right uh let me remove debug Banner right now we need to create this screen in order to create a screen uh here we will create a new folder inside lib new Direct Dory or you can say it folder or directory screens and inside screens we will create our new directory named it as home home screen now inside this home folder we will create a new D file home screen here inside home screen first of all we will import material package no we will uh create here State full widget in order to create State full widget there is a shortcut stf right home screen uh let me return here scaffold right now here in home property home let me give the my home with screen right it means when application uh will started first of all our home screen will be called right so uh let me give a background you can see inside this background right so our background will be our background color uh blue gray do shade 900 right this is the background of our scaffold now inside scaffold first of all we will create our app bar right here you can see the title of abar image generation app let me give this title text image image generation app let me Center the title true now our AB bar is ready uh uh let me test the [Music] application [Music] here you can see application has been launched successfully you can see the background of the app bar let me change this one uh background blue gray blue blue gray with shade 800 here you can see this is looking good now our AB bar is ready now we will create our body her body let me give column inside column there is there are different childrens now you can uh see this screenshot basically our uh whole screen is divided into uh our body part is divided into two parts first one is this area where image and this text is showing right and another part is bottom bottom part you can see uh there is a text field and a button right so first of all we will create this bottom part part our uh text box and uh button right no uh this is column here first part will be expanded expanded widget inside expanded there will be a list view right this is our uh first part here you can see the image and text part right this is uh you can see this is an expanded widget it means uh when we will create this uh bottom area uh this text field and button and the remaining uh part of the screen will be taken by this expanded widget right it will automatically it will cover the all the remaining place right all the remaining area now let me create our bottom area text field and a button so it will be in a row inside row we will create here our text field and a button so in uh you can see this is a custom text field right now we will create this by our own method first of all expanded it will be inside expanded because it will take whole the place here you can see inside row this is button and remaining whole place will be taken by this expanded widget right this is expanded widget right here uh we will create a container in order to uh give the decoration right so for in the decoration my box decoration here B radius uh B radius will be uh 50 right and the color will be uh blue gray blue gray with shade 800 right so here inside this we will give text [Music] field right uh let me give decoration to the text field andp put decoration uh hint will be which image you want to generate right here you can can see in a bottom right now let me change the hint style and style will be text style font weight will be uh font weight w300 right right you can see this is looking good no there is a default borderer uh at the bottom of text field let me remove this borderer B uh it will be none right no we are good let me give some padding in our container bading constant symmetric horizontally 500 horizontal 15 sorry 15 no you can see it is looking good now let me move forward to create our this button right uh here let me give some space with sized box width [Music] 10 here we will create our elevated [Music] button on press for now we will uh for now it will be empty in child it will be an icon send icon send you can see here now we will change it style elevated button uh uh style form background color will be green uh with shade 800 and foreground color will be white right you can see the changes now we will give it it uh size fixed size constant size uh size will be uh 50 width and 50 height right now it is looking good now we need to give a padding right you can see it is uh there is no padding right uh we can give a padding we can wrap this row with padding widget padding right symmetric we will give symmetric horizontally 15 and vertically 5 no it is good you can see it is okay right over this part is okay no one thing is remaining uh here we need input we need a variable [Music] uh variable text editing controller right this is a variable controller we will give this controller to this text field right in order to handle with this uh input then user will press the elevated button then we need to get the uh whole text inside this text field we will get this uh text in the help of this controller controller name as input right uh let me remove first and right we are okay now our this bottom part is ready uh we can hide this right now when user will click this button after that it will show an image generated by AI here here now we will create this part inside the list view we will create an image inside image there will be a network image right there will be a URL we will give the URL letter right then we will handle the back end part then we will handle this part right for now you can leave it as it is right so you can see after make there there is a text right with padding right [Music] text we will give the text letter so you can see our basic UI is ready now we will move toward our backend part so I will we will write our backend part inside another folder let me uh make a new directory name it as Network inside Network we will create our do file API client you can name you can change uh its name uh there is no restriction uh close API client so in order to move forward we need to uh to add HTTP package uh here is a package name HTTP you can uh read its documentation right I hope you all know how to add new package in a fletter uh this is command flutter Pub add HTTP right our HTTP package has been added here is the documentation you can see if you have seen our previous tutorial uh regarding as uh chat GPT you all know what is this right this is a documentation of open AI you can uh open this URL right it will show you all the documentation here first of all we need the link this is a link here you can copy here we will create a variable constant uh static URL name it as URL uh paste this one [Music] uh sorry static static constant URL right this is our URL now here we will create a function post request post request here user will pass a prompt you can say prompt message or anything you want uh required string prompt right this function will be an Asing function right Asing function because this is Asing function so it will uh return something uh we can return uh map here we will return map future map type string dynamic it will return a map or null so here we will use symbol uh null right now here we will write our code uh regarding API we will write this code in TR cache blog here we will handle HTTP exception in cat right now if there is any issue there is any exception there is any error we will handle the in uh this in cat block right we can have debug print debug print e. message so here when user will hit this API and for example there is an error there is an internet connection is or something we will return null right so here we will start our API code first of all we will make a variable uh response you can name it as uh response result or anything you want await here there is a function inside our HTTP package function name is post post function here we will pass the all the parameters the first parameter is URL right we cannot paste direct our URL we will par it using URI do par here we will give our URL right after that we need to pass headers right in our case there are two headers let me pass headers headers here we can pass headers first header is content type uh the content type is application Jon right the second header is uh authorization [Music] right here we will pass barrier and after that we need our API key here we will paste our API key because uh let me open the documentation here you can see we cannot uh hit this API without authorization right we need authorization and for the authorization we need need open AI API key right you can see and uh this is necessary and we can generate this open AI key uh here you can see here the link platform. open ai.com API Keys you cannot access this page without uh login first of all you need to create account on open AI website then after that you can access this page right here you can see create new secret key button you can click here and you will name uh your API your key and you click on create secret key then you will see your secret key here you can uh just copy uh and paste your key here right but this is not a good practice to paste your API key directly here right uh if you have seen my previous tutorial regarding chat GPT you all know how to handle this API key this is not a good practice to paste your secret information your secret Keys uh here Direct in code we should use it more securely right for this purpose we will chuse a flutter package uh here flutter Dov this is a package flutter. EnV right so let me add this package in our flutter [Music] project flutter Pub add flutter Dov right our package has been added uh now we will see the documentation of letter. EnV here is the documentation first of all we need to create EnV file in our project root folder uh here you can generate a new file file EnV right so inside EnV you can uh here you can paste your uh secret key right let me name it as API key here now here you can paste your API key here you can see I just pasted my secret key here now you can close this uh file right now let us see the documentation here is all the documentation how you can uh use this first of all we need to include this in assets our pubs speec do ml file here here you can see uh as said let me uncomment this here let me add en V right and click Pub get now we are done let me see documentation how to use this one and first of all our main function will call after that we need to uh add this line right let me copy and paste in main function here you can paste this line right no let me import package and uh because this is a wait now we need to add snc right this part is okay now how we can access uh that API key here let me see the method this is the method how you can get your API [Music] key let me use this here right let me import the package uh import right okay now here we will give uh our variable name uh you can see in EnV file our key is API key right API key right now we are good to go our header part is complete now uh you can see in the documentation there is a body part we need to fill all these uh inside body let me copy uh yes no inside body there is a function Json in quote right here we can paste our body part right first of all let me explain this first of all this is a model so we are using Model D E3 right uh you can read about this in uh documentation everything here you can see [Music] right d E3 and second one is prompt in prompt the user will type appr prompt uh here you can see acute baby C UTS right so it will generate an image of acute baby right but here we will uh give this prompt that user will input prompt right third one is n n mean numbers numbers of images right uh last one is size here you can uh see the size here you can see our headers and body part is ready now after that we will check if the uh status code of the response is 200 it means our operation is successful our request is Success successful right and we will get our data let me check this one if uh response. status code is equal to 200 it means we are successful and here we will print whole data that we will get debug print you can use a simple print uh or debug print as you want debug print response. body it will print whole response here right but but we need here we need to convert our uh whole response into Json Json are uh Json is same as the map you can see here map now first of all we need to convert our response into Json final Json and there is a function Json decode GN de code here you can uh paste your body so it will convert whole our body into Json format right if you see the response this is the response right right here we don't need all the response we need just this data and inside data uh the first object right first object of the data [Music] right uh right let me return return Json and in Json we need data and inside data we need first one right now we are done and for example our response code is 200 then this part will be executed and it will return the data and for example the stated code is not 200 then we will return null right now our API part is ready uh we are in home screen let me create a a new function name it as send request right it will be an Asing function sing function here uh first of all we will create a new variable name it [Music] as loading it's default value will be false after that we need another variable to handle the response right because you can see in API client it will return learn us a map right that is why we need to create here map variable map string dynamic dynamic name it as response data and it will be empty default value will be empty right no here when user will click the button let me uh this is a button when user will click this button the send request uh function will be called and first of all we need to change the value of loading into true true right then uh we will call the this function of API client this function and let me make this function static because when the function is static then we can call this function directly by its class name right now here let me create a variable [Music] response a it API CL do Post request and inside prompt we will pass our input value input. text right now there are two possibilities this response can be a null or a map right now we will check if response uh sorry response not is equal to n not is equal to null it means our request is successful and we got a data right in this case let me update our response data variable to response right this response data is uh this variable right it will update it and after that it will empty the input field right it is clear the empty field input do clear right and we just missed one thing and after this request we should false the value of loading let me copy and paste it here right here we will change its value to false right here our request part is ready now uh for example when user have something in the text box and click this button we need to show loading a circular progress indicator right we will show it here uh right at the place of uh this button here here we will write our condition for example loading value is true then we will show circular progress indicator else it will show this button right I hope you all understand this right and here if you remember we leave this part here no we will update this part you can see inside expanded for example when user open application first time right it should show uh message welcome message right we can see uh initial value of response data is empty here we will write condition uh if response data is empy right then it will show uh uh message center it will show text box a message uh welcome right and in else part we will write other code for example response data is empty then we will show only this text at Center and for example there is a data in response data then we will show this list view right and inside list view uh here in network image we will update this value response data uh URL there is a URL uh you can see it here URL it will show the link of the generated image here right for now leave it same as it is right so there is uh another issue you can see uh inside AP client the size of image is 1,24 cross 1,24 this is a large image so if our internet connection is slow then uh it will take time to load this image right so we need to show uh some loading uh when images in loading state right here inside image there is a property uh loading Builder right we can use this loading Builder right its first parameter is context second parameter is child child R Viet child and third one is progress right right here this is context you know all about this context and child child means this one this network image means child and third one is progress progress tell us the uh loading of image 1% 2% and up to 100% it will show uh loading progress now we uh need to return widget here first of all uh return here we will create our container container for example there uh when image is in loading State then we will show this container and inside container we will give a color first of all we will give a height 400 and color will be gray with shade uh 700 right and then alignment center and in and child sized box uh height 7 70 and width 70 child will be circular progress indicator right now we will check here for example and we can see inside our progress progress dot culated bytes is equal equal to progress dot expected total bites if they are equal right it means our image has been loaded successfully then we will return here our child right and for example in else condition our image is not loading uh 100% right then we will show our loading here right I hope you all got it uh progress. culated loaded bytes means the loaded loaded bytes and expected total bytes if they are equal it means our image has been loaded 100% then it will show the image this child mean image and if image is not loaded 100% then we will show our a box with background color and the circular progress indicator right so inside circular progress indicator uh we need to show when image will be uh will be loading it will show as uh clockwise with progress right we need to show the progress here it's in its value right it's value so how we can show this we can show this like uh [Music] progress progress dot cumulated loaded divided by progress dot total bites expected total bites right uh in this way we can show the loading this progress bar right let me give the stroke width to uh 8 or five five right now our this part is ready now let me test the application so let me uh type some prompt here acute baby in a beautiful Garden let me test [Music] this right you can see we are uh successful you can see it has generated an image for us right now let me see the log here uh here you can see everything here is the whole response from API we just used this URL this is the URL of the image right and before this uh there is another key revised prompt we can get all this text by using this revised prompt key right let me use this uh here uh you can see it here inside this text uh response data and here use this key right you can see we are uh successful here this is the text let me give the some padding to this text setting will be 15 right so you can see we have successfully created our application I hope you all are are happy to love this one okay thanks

Channel: Spread Coding

Views: 420

Keywords: flutter, flutter ui, flutter design, flutter development, flutter tutorial, flutter ui design, flutter app developer, learn flutter, learn flutter development, flutter ios, flutter android, flutter frontend, flutter course, flutter coding, dart programming, flutter dart, flutter custom design, flutter awesome design, flutter beginners course, flutter beginners tutorial, flutter image generation, ai image generation, flutter ai image, ai image flutter openai, flutter ai

Id: 4bSbcVPV-ao

Length: 44min 0sec (2640 seconds)

Published: Wed Nov 29 2023