Build ChatGPT App in Flutter using OpenAI API - Full Course

how to build a chat app using flutter and open AI API this app will allow you to ask it any question and it will reply to you using the power of open AI State gbd3 model so whether you are looking to learn more about how to integrate an API into your flutter app or just want to build something fun this tutorial is for you I would like to extend a special thank you to hadika tomorrow for generously sharing his paid udemy course with us for free so let's get started [Music] also I am a 5 Stars rated instructor on udemy and I have six different courses related to flutter I covered a lot of topics such as rest API payment gateways Firebase and so on feel free to check this page and of course you will find this link and the description of this tutorial or this video so if you have used short GPT basically this is the same think okay so we can't send any message here so let's say hello uh let's say what is floated for example and send it then you will have this loader here and then you will have the answer just like that so this is basically similar or just the same as a chart GPT and we are using the Charter GPT AI okay um this API is being provided by the open AI company which is the company that created this model okay of course later on I will talk more about it now one more thing about this app is that the user can select the model and of course it shows a model will affect our results so if I press on this three dots in here so we have this drop down button which is uh was loading initially so if I press on it and now of course here you have too much models okay so for example if I use the text davinci01 and now I press here and now if I press or send any message I will send the same message and say for example what is flutter and send it and now I'm getting different response okay so if you choose different models you will get a slightly different results because depending on the company how they trained these models they might have used different data for these models to train it at different architecture I don't want to go deeply and data science things since this is a floater course but I hope that you know a bit about artificial intelligence so you have more and better understanding of how the model works and how this application works exactly okay so basically this is our application but of course later on I might add other things because the API provide us with really cool stuff such as uh generating images and searching for images for example okay so I might update the application and add more features to it but but basically the main course will be based on what I showed you okay so this was all for this tutorial I'll see you in the next one hi everyone so this lecture I just want to talk a little bit about uh the code on GitHub so the full code will be available on GitHub and you can't find it in the master Branch okay you will find also different branches related to each lecture and to each lecture you will find the source code link and the description or attached to the sources if you are watching on udemy okay so if you want for example this lecture you can press here and you can get the code I made this as a video because I know most of you doesn't read the articles so I prefer to make it clear like that thanks see you in the next one hi again so in this tutorial let's set up our application and check the packages that we need and let's add it to the pop spec.jamin file of course I already added it and in order to be able to follow this course without having any issue I want to mention that you need to have a little bit of knowledge and flutter so I want you to know a little bit at least about the provider State Management and uh how to add images what does widget means and how to add packages for example and debuffs back to tml file so I want you to be beginners and further at least to be able to join this course okay I didn't talk about it in the introduction because I know most of you might skip it so I put it here okay so make sure that you have already sees knowledge and if you don't and you want to continue watching this course feel free to do it but if you're not able to to continue with me please stop take a beginner course then come back to this course okay so now let's go to the browser and in here in order to install any packages we need to go to the pub.dev in my case as as I said I added the packages at Epub spec.tml file here and of course every time we add a new package we need to cut the process and run our application again to make sure that the application is still running without having any issue sometimes you might get any an error for example related to the minimum SDK so you need to fix it okay for these packages as far as I concerned you will not have any issue okay so here I opened four tabs let's start from this package so this is the HTTP package later on we will be using it to make API requests in order to install it you press on this tab and scroll down a little bit and you copy here and then you add the package name here below this Cupertino icon and the indentation matter here so you need to be careful okay once you save it I mean once you add it you need to save it other Plus on this icon or you can open the terminal for example and you can type flutter packages get like that and this will save this file the pops back to Tiamat file and it will download the required packages okay so now we finished the HTTP package let's go back and now I'm searching for something called provider this provider will be using it for the State Management okay so uh you go to the stop and then in delete me you can see the documentation for this provider and in my and my all courses I use this provider State Management which is really good and it is recommended by the flutter team okay so this is why I really like it now in order to install it you press on the installing Tab and you copy here and then you add it to the pubspect.tml file which is already added here same for the other packages for this one it is the flattest Bank kit if I press on delete me I can see the documentation and this package of course now you know why I will use it we will be using it of course to show a loader when we send a message okay so if I go to our application here if I say for example hello and our oops let's say how are you like that and then send the message and in here you can see the loader okay so this is why you need this package of course we can build it from the scratch but we can just use this package and the last final package that we will be using it and our course is the animated text kit and I think now you know why okay so here our application again so I'll send hello and send it and now as you can see this text is being animated so this is just like the chat GPT okay so I'll send another message give me a long text for example send it and now we will have C response soon here it is okay so this is really cool okay so it's done okay so this was all for this tutorial I'll see you on the next one hi guys this is the end of the following lecture okay so what I wanted to say is that you can find the starter code on the GitHub of course now the repository is private later on it will be public when I publish this course so in order to get this starter code you need to press all the brushes and you can find it on the starter up here okay so you can clone this link or you know how to clone it okay and moreover you can find attached also a zip file to each lecture so uh what so what I basically do is to add the lib usually for example and the assets and the pops back to channel file and compress it to a zip file and use this file you can use it as a reference and you can paste it in your application directly or or compare it if you don't want to use the final code from GitHub okay so I will put these data online so you will have access to it now I'll enjoy the next lecture hi guys and welcome to this lecture in this tutorial we will set up the structure of our application and we will add the required images and we will edit the theme okay so let's get started with a theme and to know more about it I already have also a video on my YouTube channel in here on how to implement dark and light theme this video is 30 minutes where I explained the theme and how to use it in details and you will be able to do multiple themes and different themes okay so I strongly recommend you to watch it before starting with this texture now I will close this and before that we started changing the code I want to tell you that I added the images and the asset folder then images and here we have three different images so we have the chat logo we have the open AI logo and we have the person logo so we will be using these three images later on and of course and in order to be able to use it we need to add it to the pops back to tml file uh we need to add the path just like that okay now let's get back to our code anime and for the theme let's start doing our work so I will delete all of this save it and now let's add this scaffold to background color so for this scaffold background color we need to use just the same color as e-chat GPT okay so now what I'm going to do is to show you here here's the chat GPT so I will consider here this as this area is discovered background color and this color is the card color so what we can do is to create a constant file and delete here the dirt and then we will need to define the scaffold background color and the card color so I will just copy it and paste it here and of course we need to import the material package okay so now I will copy this get back to the main.dart file paste it here and import the constants class and uh semicolon here and restart the application and as you can see this scaffold background color directly got changed okay we have this home page is being used here in order to change the scaffold background color you can add in here but I don't color and choose any other color that you want okay so this is I explained to entities and the tutorial I showed you here okay so make sure to watch it now let's continue our work so for the theming here we need to add the upper theme also so what can we do is basically add upper in here about theme and then we Define the upper theme just like that and what I want to do is to give it the color which is will be the card color okay just like that of course you can add things like elevation background color um and so on in my case I will just keep it like that one more last thing I hate this Banner so I will just remove it in our case we can add the debug for the material up so in here we say the Box show checked mode banner and put it equal to false now let's set up the structure of our files so we will I will create a folder named skins and this is 100 the main screens on our application second I will create a new folder called models and this is will handle the models for our application the third one would be the provider's file this would be for the State Management the fourth one will be the constants like that and this constants will handle our application constants okay so I will move this file to it like that then we will need the services and these services for example later on we will create an API service service and an asset manager service and you will see why we will use the asset manager later okay so for example let's say here services like that and yes this is all actually okay so I prefer this structure and it is the best for me it's it's very clear to understand and you can also add another folder which is called widgets and this is will handle the global widgets for your application okay so before that I end this tutorial I will just create one file and the services which is I would name it the assets manager dot Dart okay so basically this file we will edit and manage our images okay so in our case we have these three images so I will copy this path come here and create a class called assets manager like that and in here let's initialize the static so that we can call later on the class name and call the name of the variable here so I will Define a string and name it image path and now paste what I have like that and of course it's gonna be a string and I will remove this forward slash and now we can initialize the path for all of the images so what I'm gonna do is to cut this uh copy this I mean and then here I will Define the user image and then we can get this image path like that and then add the forward slash here and then the first image is the person image okay so we can add it just like that we do the same thing for the other two images so this one it will be the open AI logo and the last one would be the report image so I will add it like that and that's it okay so uh let us delete and the main file let's get rid of this file and let's add a new file in here and let's uh name it the chat screen which is will be our main screen so in here that's other stateful widget like that and let's name it chart screen and in here we need to add a scaffold and then we need to give it the body and as a body I will show a an image for example so to display it I will display it as a center so let's give it in here an image.asset and now we can we can call our class that we defined here and then we need of course to import it so once we import it we can get our images like that here okay now if I remove this static from here I won't be able to use it okay even if I comment this for example and I try to use it here I can't okay so it must be static take that now if I come here I will have these suggestions so let's show for example the open AI logo like that and then let's copy this name and instead of this widget let's return our widget and of course we need to import it like that now I will start the application and let's see what will happen okay so here it is we have the scaffold background color and we have this image it's showing like that okay so later on in the next tutorial we will proceed by building the chart screen I'll see you there so in the last tutorial we set up the theme of our application and this structure now in this tutorial let's start building this screen so in order to do that let's go to see chat screen file and then let's add the upper for our scaffold so I'll get back here and then let's initialize in here an upper and then we need to give it the title add the image so for the image we can add a leading and we can use MH dot asset and we need to give it the open AI logo so this logo okay and I'll add some padding to it so let's wrap it by padding just like that and I will save it and now here it is let's add some elevation for it so I will use two as elevation and then we need to add the title so in order to add the title it is easy we just need to add the title argument and then we need to add text and in here let's name this text chart GPT now save it and here it is okay now let's continue we have the chart screen here which is not appearing because I didn't send any message yet so let's say hello and now we will have this chat screen and we will have this loader and we will have this text field and this button down below what so I will get rid of this and as touch I will use a column so let's delete it and in here let's initialize a column and let's wrap it by a safe area like that and let's add the semi column like that just for the format okay so the first child will be our chat screen so in order to do this I will initialize a listview.builder like that we need to give it the item Builder context and then we're going to need to give it the index and in here we need to return something for the count I will use item count let's say of six and I will return just for now a text and let's say hello this is a text for example now save it I still have in another we need to add comma in here and that's it now I'm having an overflow error simply we can't fix it by wrapping it by flexible widget okay now I'll go back to our application and here it is and here's how it looks fine this UI will be working on it at the next tutorial for now let's finalize the main screen so when I was sending the message we show in here a spin kit loader so what I'm gonna do is to add in here a Boolean and I will name it is typing and I will put it for now it to okay um this error I mean these lines just to make it finer but later on of course we will uh we'll change it we'll be changing this value when the user is sending a message and when the response is being generated okay so in here I'm gonna do an if statement so for the F statement you can type it like that for example if it's typing we need to show our widget and if not we can show a size box dot shrink okay so in here we can show for example let's say a container and you can do an if statement just like that this is okay but if you have more widgets if this condition is being satisfied this way it doesn't work very well I mean you can optimize the code more so what I'm gonna do is to add an if statement in here so let's say if as typing and now in order to add money which is us what you want you need to add this spread operator and now you can add as many widgets in here as you want okay so in our case I will add the spin kit and um I will use the three bounce dots so uh so this one basically let's add the color so for the color I will use the white color and then for this size let's use 18. and now I will save it okay let's get back to our application and now you can see it's here it is our loader of course now if I put this one to false you cannot see here anymore anything okay I will save it again okay so now it disappeared perfect but let's just keep it true in our case and now we need to start making the text field and the bottom widget so for that we will be using arrow for the text field inside of a row you need to wrap it by flexible or expanded widgets so let's define an expanded widget here and then initialize our text field for the text field we need a controller and we need a fox node okay so in here let's uh Define a fox node or we can just rely on our case on the controller um so let's define text editing controller and I will name it text editing controller we can Define it directly like that or we can Define it in the end State I mean initialize it so let's say text editing control equal to text editing controller just like that of course the controllers need to be disposed so let's dispose it just like that and in here let's add a late so that we because we are initializing it in the end state so we can initialize that as late so in here let's add the controller just like that and then we need to add the unsubmitted so once the user press uh directly enter or the keyboard I mean press next hold down on the keyboard the message will be sent just like the WhatsApp so in here it takes a value you can name it whatever you want add in here um would be our function okay so let's say send message like that then we need to do some decoration for it so for the decoration we need to give it the hint text and of course for the decoration we need to call the input decoration and I will use collapsed and we need to give it the head Style I mean hand text and now let's say how can I help you like that or let's remove the capitalization from here and that's it now let's save it and see how it looks like um I will start it okay so here it is I know you cannot see it clearly but here it is okay so now let's add some decoration just to make it visible for the user and in order to do that let's add the hand Style like that and it is a text Style and now we can specify the color for it so we can use white color or um gray color let's say like that now save it and here it is now it is any gray and it appear better than before but now if I type something it is also again that is in Black so in order to fix this we need to add Style here and of course it is text style and we can just copy copy this okay so I'll just paste it here and then on my case I will use here white let's add semicolon here and I mean a comma and add the cost keyword and save it and that's it okay so now as you can see the text is white now what I want to do is to wrap this row by a material or you can wrap it by a container just to give it the color and in my case I will give it the card color now save it and here the card color is appearing to add some spacing we can add in here size box and give it height of 15 like that just to add some spacing between these two widgets and let's syrup Zero by some padding so let's wrap it by padding just like that now the last thing is that we need to add the second the chart for this row which is the icon button so we need to give it the on pressed which is again descent message button or function and for the icon we will use the icon of sand let's say this one and we need to add the color for it let's give it the white color just like that and that's it okay so it looks pretty much as this one we just need to edit the shot screen I mean the chart widget here and we need to add this button so in order to add the button above for the upper we just need to add the actions for it so and the upper in here let's add the actions and then we add an icon button and then for the icon we can use the mark icon so I'll just paste it here and now add the cons keyword and format our code let's add a comma here and comma here at format or code and that's it now I will save it for the last time and here it is now we have this three dots in here and the next tutorial we will start implementing the chart widget so this was all for this tutorial I'll see you in the next one hi again so now let's continue our work and start building this Widget the chat messages widget which is look like that so for that let's create a widget in here and let's name it chart widget to third like that and let's uh initialize a stateless widget and let's name it chart widget in here like that and now in order to show some dummy charge I will create a new list so in the constants here I created something and I will paste it here so basically here we have a list and here we have a map uh similar to Json files so in here we have a key called message and another key called the chat index at our case when the user sent a message will be at chat index 0 and the response will be at the chart index 1. okay so with this we can do some if statements in order to change the UI and now we will be displaying this messages on the screen so we come back to the chat widget and in here let's initialize a column and let's give it children and of course it is zero and the first child of Cicero is an image and do not forget we need to give it the children absolutely so the first child in here would be let's say asset manager dot debot image or let's start with user image okay take that let's format our code and now what I will do is to wrap this row by some padding and then I will wrap this padding by material widget just to give it the color okay so like that and let's give it color and for now I will give it the card color like that now what I will do is to use this chat widget in here for the list view dot Builder so instead of this text let's use our chart widget like that now restart the application and let's go back and now it is like that and we are having an error okay so let's add height and width for the image here like that and here it is it looks like that now next to this image we need to add our text so let's add text here and let's say here will be the message save and here it is now before that I continue working on this because the text is a block and it will be always and black what I prefer to do is to create a text widget so this text widget I will add this file now here and I will explain to you so basically here we have a text we have the label for the text and in here we have this type so I'm giving for this style the color which is can be nulled here I'm giving it the font size and you can also make it nullable but in my case I put default value for it here equal to 18. and finally default weight so now this text widget we can come back here and we can use it here we need to import it of course and we need to give it the label and let's say hello here our message like that and now as you can see if we have it like that and the color is white and you can give it the font size color add font weight and you can add other Arguments for it for now I will just keep it like that and it would be nice if we add some spacing between the image and the text and in order to do that we can simply add a size box between two widgets just like that okay perfect so now let's start showing our messages so we need to show these messages so for that we need to use this chart message in order to pass it to this widget so basically what we can do is the following so we can use initialize in here a string add another integer to know the chart index so the first one would be the message and then we will have the end the chart index like that now let's add the field parameters here and of course we got an error here because we need to pass it in here so what I'm gonna do is to pass it directly so we can call now the chat messages let's make sure that it is imported okay now in here we need to give it the index and then we need to give it the key which is in our case the message and let's remove this cost then we will need to use the chart index and it is the same but let's make sure of the keys so we have the message like that and chat and X okay I'm still having an error it is because this one an object we didn't specify the type of this paste or map in here so what we can do in this case here we can convert it to a string and for this one we can convert it to a double so what I'm gonna do is to say double dot parse paste this and convert it to string and actually it is on it so just like that perfect so now we have it I will start the application okay now it is working okay now let's do some if statements in order to show the correct images so the first thing would be that we need to check this color so what I'm gonna do is to check the chart index if it is equal to zero we can show the scaffold background color and if not we can show the card color save and here you can see it so the first one is a user then the board user template okay let's now show the correct image and for that we can do the same if statement so let's say if it shot index equal to 0 we show the user image and if not we show the bot image save and here it is now for the label we need to show the message so paste it here now it's not const anymore save it and here it is now it is working correctly but we have this overflow or error and later on we need to add the animated text to the reply from the bot so in order to avoid this error let's wrap this uh text by an expanded widget like that now as you can see we have this image in the middle and in order to fix it which can't just add the cross access alignment to Center and it will save it uh oops it should be start sorry like that and now we have it in the beginning perfect now the last thing is that we need to add the buttons for in here the like and dislike button so what we can do is we can add the if statement as I showed you before or we can just add an if statement like that so if it is equal to zero let's show a size box which is very optimized and then it is if you use this widget it's better than using empty container okay now you can use in year 0 and for the row I will just add the code for it here like that okay and in here it should be like that and save it now here it is it looked pretty much just like the chat GPT okay perfect so with this we finished the main things and side of the chat screen in the next tutorial we'll start implementing this button so when we press on it we are showing the bottom bar so it will start working on this I'll see you on the next one hi again so let's keep going and now let's start implementing this model bottom sheet so let's go back to our application and for that let's go to the Chart screen and we have this function here so we can start writing the code to show this model bottom sheet so the function it is named show model bottom sheet and if I hover on it it is a future so it would be better to await it like that and for the Builder it takes a context like that and now we need to return something okay so in here we need to return our widgets so in our case we have a text which is uh the chosen model text and then we will have the model drop down widget so we have this text then we have this drop down widget so for that I initialize this row and the first child of course would be the text to show The Chosen model so it will be like that let's import the text widget and add the cost keyword here like that and we haven't an error let's add the semicolon like that and that's it now let's save it and press here and now something happened but we cannot see it so let's start fixing it so let's add the first thing padding here I will add 18. let's add background color for this bottom sheet and now let's try and here it is now we can see it here in my case it is routed and to make it rounded we need to add the shape and uh it would be something like that so we need to add the shape and we need to give it this argument throughout the rectangle border and then we can specify the Border radius in my case I used vertical about the radius just to give it on the top you can use different things such as only for example old and so on okay now I will save it open it again and now it is rounded now we need to implement the drop down button what I would prefer to make it in another tutorial so let's implement it together and the next tutorial I hope that you try first to implement it by yourself then see the solution with me see you in the next one and the last tutorial we have implemented this model bottom sheet now we need to define the drop down button here but before that we get started we wrote this quote in here which is a function and for me I prefer to keep the logic outside of the UI so for that I coded this function and now we can create a new file and the services and we can name IT services or it will for example I would name IT services the dirt in here and we know we can create a class called services in here and then uh of course here capital and then we can define a static method which would be a future of type void and now we can name it let's say show model sheet and now since it is the future we need to add the async keyword here so it will be like that and now the error is gone now we can paste what we have and we can import the data acquired packages so now we need to import the material package the constants class we need to pass in the context and we need to import the text widget so now let's pass in the context so we can pass it as a required argument so just like that now the error is gone now we can use this class and Order to call this method so in here we can await and we can call the services class and show this model bottom sheet now restart the application and then press here and here it is still working just like before now we need to create the drop down button for that I will create a new file here and I will name it drop down dot chart and now we can create a stateless widget or stateful widget and uscy and now we can name this drop down widget or model Search Group down widget like that okay so now we need to define the drop down button like that and we need to give it the items and we need to give it the function unchanged so for the unchanged it takes a value and we need to do something so what can we do is um I would convert this to a stateful widget and then we need to define the current model or a string for example but in my case I will Define the current model because we will have a default model and we will have a chosen model so we need to overwrite this connect model and later on it will be clear for you so don't worry so let's say any current model let's say model one like that and then here we set state the current model and put it equal to the value just like that okay now we have an error on the value we can convert it to a string like that and that's it now we can give it initial value or we need to cover this value and we can put it equal to the current model the statement current model not models like that okay so what left in here is to add the items which is a list of drop down menu items so we can create this list of items somewhere else and then we can call it here so we can Define it any constants for example anyways these are in our case now we will use dummy data but later on we will be fetching it from the API so now for the dummy data I already created a list of models I will paste it and the constants file here if I come back to the drop down file and here and I overrun it it is a type of this type so what we can do is to create a getter for it and the constants class so in here we can create a getter and let's name it get models item like that and here we need to return something and we don't have class so we don't have to add the static and we need to return something as I said so let's define a list of this type so I can copy this and say for example models items and let's set it equal to this list and then we can call generate to it and to generate we can call the models dot length like that and let's add the semicolon in here just for formatting okay so we need to return something in our case we will return the drop down menu items like that and we need to give it a child in our case it will be a text I will use the text widget and we can give it the label and in our case it would be the models and we need to percent the index like that let's give it to size font size of 15. now format our code and what we can do in here also we can add the value and the value will be also the models and X like that and now we can return this model item here and now the error is gone so what we can do is now we can get this and use it and here for the items just like that and we need to import this class and that's it now we can use this widget inside of the services next to this text field so in here let's wrap it by flexible widget and the child would be our widget like that and import it and for the flex argument I will give it to now save or restart of course press here and now I have it here okay of course we need to add the background color so for the background color you can add the drop down color and put it to the scaffold background color and for the icon we can use the color of white color okay now save it press again and here it is it looks like that now just one more thing is I want to add for this Row the main axis alignment and put it space between and now it looks like that okay as I said this data will be we will be fetching it later on from the API and soon we will start with the API since we finalized everything for the UI for this application okay the last thing left for the API is to animate this text just like chat GPT as I showed you before but this thing will keep it later on when we start generating the responses okay so this is for the UI part I'll see you next with the rest API we now arrive to the part that I think most of you are waiting we will start integrating the openai API and our application so in order to do that you need to go to this link this thing you will find that attached to this tutorial so now let's go to the documentation then once it is loaded scroll down and the API reference you can press here on the introduction and here you will find everything you need of course here the tabs you can press directly on this for example and it will take you to the next one okay to the one you need if you need the models for example you can directly press here now let's go step by step for the authentication you need something called API key and I suppose that you already know what is the API key and what is rest API and if you don't please watch the courses I made about the rest apis and you will understand it perfectly okay so we need this authorization and rdbeer add our API key so we need this API key in order to get this API key we need to press here and then press on view API keys add in here you can create a new secret key and you will have it for now I will go back and then if we want to answer a question we can go to making requests so here they are talking about the API key and and here we have an example so this is until here what we called a base URL and how did I know this if you compare for example the models request here it is the same URL so this is the base URL we have let's go back here again then we will need to add this content type then we would need to add the authorization as I told you then we will need to add this to the body okay and if you see here we have this model and we have the name of the model so this is why we need to fetch the models because each model will give us different output perfect so now before that we actually start using it in our code we can test it using the postman so for that I will open the postman and then press here file new then HTTP request in my case I will copy this URL then paste it here the method is actually post method then for the authorization you need to press on the bear token and add your token here then let's go back we need to add the content type and it is application Json so copy all of this then go to the postman then go to the header here and then scroll down and in here and the key paste what you have and and fix it like that and then add the value just like that okay and be careful of this spacing so the authentication that we added here the authorization for the video token here it is appearing also in here okay and you can edit then let's go back and finally we have says Json data so let's copy all of this then go back to the Post mod we press on the body this API takes raw data and we paste our data here and then we press send and here we got the response so we have the model name here and here we have the message okay so if I change this for example hello what is flutter and send another request we will get this okay and this token if I change it for example to 100 hit send and now I have default answer that's showing here okay so now I will remove this temperature because we were not using it will not use it I mean and we're still getting a response now what I wanted to show you is that for example let's say change this name and send and of course we should we should get an error and here it is and of course on our codes we need to make something to handle the errors so I will explain it for you in details later on but for now I will just keep it like that and now let's go back to the documentation and here let's try the model also so let's copy this and in here it shows it is a get method Let's uh press on the plus button paste it here and be careful of the spacing and then we need the authorization only so here in the authorization just add the Builder token and now send the request and now you will have it here so this request actually is returning the whole models the whole model that we were showing here so later on we will fetch it from the API and we will display it here and the ID actually what matters so if I come back here in this case they used this model here if I search we can find it here as an ID okay ID and root okay so in our case we need to save this ID now before that I end this tutorial what we can do actually as for example I would go back to the Post method because it is shorter and I will copy this and here we can do for example Json to Dart parser let's say and now you can go to this link and paste your data here and press the generator and in this case it will generate the modeling class for you okay and you will have this Factory Constructor here the from Json and to Json also this is a fast tool you can benefit from it but in our case I will explain it in details for you and we will write it I buy our hunts we won't take it from here okay but I just wanted to give you more information so this is why I'm talking about it so I think this was all for this tutorial and the next tutorial will start fetching the models stay tuned and I'll see you there hi guys and welcome back as a tutorial it starts fetching the models and our application so for that let's head all back to our code and let's create a new file let's name it API services to charge then let's initialize it so I will name it API service like that let's create a static function it will be a future and for now of type avoid um we can name it get models like that let's add the async keyword and in here we can start writing our function now to be able to use the API we need to make HTTP requests so for that we will be using the HTTP package and to handle the errors let's wrap it by a try catch like that okay if I never occurred I would print for example errors and let's print it just like that okay now in the try block we need to make our request so we call the HTTP package then the get method we need to give it the URL okay and in our case it is a Yuri and the URL is this one let's copy it and now we can paste it here like that but as I said it is a unit so we need to convert this to a UE simply by calling unit parts and paste what we have then we need to add the API key as I showed you here and in order to do that we need to add the headers for this get method so here we have this headers parameter and then we need to give it a map and the first one is the authorization like that and we need to give it a bitter and our API key so I'll paste it like that and finally we need to put our correct API key for that we can create a new file let's name it API consts dot art and in here we can put the base URL which is this one so let's say string Bass URL and we put it here just like that and then we can put the API key and uh after this tutorial the API key would be different so make sure to put your API key do not use mine because I will remove it after finishing this tutorial so here I put my API key and then let's go back to the API service and now instead of this we can't call our base URL and in here we can put our API key just like that after getting this response we can decode it and we can print it to see what we have so we can save this and a response put it equal to this function and now we can print this response so now let's print this response but first we need to decode it so and when we record it we will get M up as you see in here because the response is a map okay let's keep going so let's say map in here or you can just Define a bar so let's say response like that and call Json decode and now give it your response dot body take that now I'm having error here let's add a weight keyword here and now that's it this is a future function so we must add our eight keyword here now we can print the Json response so let's say Json response and now let's print it like that and that's it so what we can do is to call this method and the sum and somewhere for example and for me I will call it for the set message so here I will call the API service Dot getmodels and of course we need to await it and we need to put it in a try catch block Now Catch like that and if there is another let's print the error just like that now let's restart the application and let's see what will happen okay here's our application let's pray let's press here perfect here it is here our response no error occurred and we have our response just like what we have in here we have this data so we have it here also data and inside of our data there is this ID and so on and this data is actually a list okay perfect now before that we end this tutorial I will do one more thing is that we need to handle the errors if you remember in the postman when we handle the errors I mean if I made a wrong career URL we know we will get an error so we will get an error here and a map it has message type and so on okay so what we can do is and the API services we can check this response or the response body here what we can do is to check this response if there is another and this error it must match the error here okay so what I'm gonna do is to check if this is null it means that we don't have an error so let's say if it is different or not it means that we have an error and we got a response as an error we kind of throw http exceptions and we can give it the message in order to access the message we need to access the error then access the error message just like that so in our code we copy this and then we copy this message and we can give it here like that okay and moreover we can print this so print let's just make it like that and it will print it and now what I will do is to change this URL restart the application and then let's test that and see what will happen here it is now it says Json error and here we have the message okay and it's being printed twice because an hour code we also added I mean in the chart screen here we also printing the error okay so I will end this tutorial here at the next tutorial we will go deeper on our code and we will create the model for our models okay so we will create this model class and save what we have and display it I'll see you in the next one hi guys as this tutorial we will continue this function and start creating the model class for the models and do other work so let's get started for that let's create a new file in here and let's name it models model.dart and then in here create class name it models model like that and here see small like that and then we will be using the final string ID this is what I care about if you want to read something else we can add for example created out or the root so I'll show you this once here again in our case as I said we need the ID and that's it you can access the root which is here and you create that object and so on okay so in my case I will get these three arguments so I would paste it here and create the model Constructor no one more thing if you remember I would copy this go here and go to the Json to Dart parser and paste our code here and the generator in here you have this construct resist Factory Constructor in here which is will get the data from Json and convert it to your model that you want so in our case we will be using the ID created out and the root let's get back and in here let's create a factory Constructor at we call the class name then call from Json you can name it whatever you want and in here it will take a map because the response is a map string and it will be dynamic and in here we can name it Json you can name it whatever you want and then you can return in here your models model let's format it first okay so for the ID you can access this this is a Json and access the ID okay like that I know for now it's not very clear when we finish this code it will be better okay so first one would be the ID then we will have the root and then we will have the created at like that now in the API service I want to return a list of models so I said avoid let's return a list of models model and I got another because we need to return something here we can't return for example the Json response but we need to return something that make sense and of course this is another because the type is different so what we can do is at the models model we can create a new function in order to do the work so what I am I'm going to do is to create a static method and uh it will return a list of models model okay I will name it models from snapshot and it will take an argument a list and I will name it here model snapshot okay and here I'm getting another because we need to return something so let's stop over the model snapshot and map over it like lupine and then here we can return something or is this SS Arrow which means that we are returning something so we can directly write it here like that and then we can't call from Json this Constructor that we made here and then we need to give it our data take that and then we need to convert this to a list here we need to convert it to a list and that's it and the error is gone okay to make sense I will name this data okay so this data is actually our map here and its name is date also perfect so now I will go to the API service add in here we can return what we wrote so let's type models model dot models from snapshot and now we need to give it a list so what we can do is create an empty list and I will name it temp initially empty and then we can Loop over the Json response data okay as I said this data is a list it has multiple models it has a lot of models so what I'm gonna do is to Type 4 I and Json response and in here we access the data okay then let's add to it I okay or I can name this I for example value okay and what I'm gonna do is to print it here so let's say for example temp value and then it will be planted now to to show it clearly I will use log okay and I will comment this and in here I will use also log like that and I will comment this and I will give it to this step perfect now I will restart the application or still having an error because we didn't return anything if we have an error so we can use the throw like that the error that now is gone I know you might not understand this clearly now I will just restart the application test it and then I will explain again everything for you so restart it and then press here and let's see perfect so this log is being called okay and we have too much things and here we have all the models so now to make it clearer for you what I'm gonna do is to print data ID so basically I will look over this list the data list and print all the IDS okay so in order to do this let's add the value like that and give it the ID like that and uh do not forget we need to access now I will start the application better press here and let's wait as you can see here we have the list of the models okay so now it might be clear for you so we have the list of the models like that what what I did here basically is to initialize an empty list and I opened all the data items to this list and this list I passed it to our snapshot says function so here we have we give it this list and in here we are looping of resist list which is basically the temp list that it has all of these data add in here we are calling the factory Constructor that it will have access to the ID value and everything so basically these two is similar to what I printed in here so this step it has the values only without the IDS and then we used it here and then we look over this list and then we use this from Json in order to get our data okay I hope that it's clear enough for you now and if it's not please feel free to ask anything and again I hope that you already watched the course that I told you about so I really hope that you already watched this course it's freely available and I explained more in details for answers course so I hope that you check it out okay so now I think it would be better to stop working here and at the next tutorial we'll start implementing the provider class and we will start showing our data and the drop down widget okay I'll see you in the next one hi guys so now let's proceed and start showing the models here in order to do this let's go to the drop down widget and then I will cut this code and I will paste it here just for reference and now we will be using a new widget at called future Builder as is the future Builder it takes a builder argument at the future function so for our future function of course now we know it and we can use this function we get models function for this Builder it takes a snapshot and context so let's give it the context and the snapshot so like that now let's do an if statement let's check if the snapshot it has an error so if this is the case we can't return a text let's say in the center we can return a text and you can use our text widget and as a label we can't give the error or we can call this snapshot dot error dot string okay we can do other if statements such as we can check if the snapshot is null or is it snapshot has no data so if this is the case we can return the empty container for example or size box dot shrink so what I'm gonna do here directly I would add the return statement and then we can check the snapshot dot data if it is null or we can check the snapshot Dot data.lanks if it is equal to zero or we can directly check if it is empty I didn't even need to do an ALT check like that and if this is the case we can return a size box dot shrink like that let's add the consequent and if it is not the case let's return our drop down widget so I'll paste it here now again and remove this and for this drop down widget we can access now our data so for this get item we need to change this so what can we do exactly is to copy this and for now I will comment CS because we won't use it anymore so in here we can type it like that and the length would be the snapshot.data length same for this one here and same for this one here now I'm getting an error we need to use in here the ID and if you are wondering how can I access the ID here it's because in here is this function is returning a list of models and to make it clear for you what can we do basically is to add to add it just like that okay and we need to import this class same for this one we need to return the ID okay and now we don't have any error anymore so let's restart our application and let's see if it will work and now we are having this error so this error basically because of this name you need to use the name that it is already found so in my case I will use the text differentiate 003 since we can't find it here okay if you remember it is here in the route and it is here for the ID so we can you can use any other models such as this one for example okay let's paste that uh instead of this one restart the application and now it should work perfect here it is but uh okay we can view all of these models now so it is working perfectly but the wrong thing is that we have an overflow error so how can we fix this is we can for example wrap this by a fitted box now save it and yeah the error is gone let's make sure so press here again and here it is perfect now the error is gone now I want to show you something for example if I choose this um this is text let's say and press here and press again here we got again this text DaVinci zero zero three as our chosen model but for me I already choose the DaVinci one so we need a way to save this model that the user already choose so in order to do that here comes the state management and its importance so we can use the provider State Management in order to save the value of the chosen model for example and later on when the user want to choose it again we can get this value and directly give it to the drop down list okay so uh I don't want to mix this tutorial so I'll end it here and then in the next tutorial we will implement the provided class for the models stay tuned and I'll see you there so as I said in the last tutorial now let's create a provided class for the models so for that let's create a new file in here and let's name it models provider like that like that and we need to call the dirt and uh and here we need to initialize the class and I will name it models provider and uh we can use with change Notifier but for now we will not really use it but I'll just keep it like that for now okay and if you don't know too much about this State Management I will try to explain here as much as I can but again this watch that course that I told you about what I would do is to initialize a list of models model we will not really use it but I will just keep it for you if you want to make identification as a sub so let's create a getter for this this so we say in here this model so I'll just copy this and we say get and get models paste like that and now we need to return the models list now let's define a string here and let's name it current model like that and initially let's put it equal to text DaVinci zero zero three now let's also create a getter for this one so what I'm gonna do is to copy this paste it at the here it would be a string add in here we need to return our current model and in here I will say get current model like that now we need to also set this model so when the user choose a model here I want to set this current model equal to the new model or a new chosen model okay so we can in here create a Setter function so let's say current Set current model and we need to pass in the new model so any it is a string and uh let's name it a new model and in here we need to call the current model and set it to the new model like that and now the provider you can think about it as like a listener so when there is a change we need to tell the provider to listen to this Exchange in order to do this we need to call the notify the center function and in order to be able to listen to a widget the provider need to be a parent of this widget and our highest point is the material app which is the highest widget it is above of all the widgets that we have so what can we do exactly is to add our provider above of this widget so let's wrap it by a widget here and we can say multi provider and in here it takes the provider's argument and for this provider argument we need to add our model so in order to add it we need to define something here called change Notifier provider um and they create here we don't need this and we can return our models provider oops models provider just like that okay so now this provider will be able to listen to all the changes below of the material app now let's go back to our models provider and now I will create function that we will not use so basically the thing that we will use are these and that is we will not use it but I will just keep it so that if you want to fetch this model somewhere else you can directly get it from this provider okay so I will just create a function now to set this model list so basically what can we do is to create a future and then list of model so without this feature will yield a list of models model now we can name this function get all models and it will be we need to add this async keyword and we we need to return something okay so now we can set this model list equal to if you remember and the API service we are returning here our list so we can use this function in here directly so we can call the API service dot get models like that and of course in here we need to await it and now we can return our models list now of course this function we need to use it so in the chat screen we will using it in here sus function and also we were using this function and the drop down button so in here instead of using this method we need to use the provider method so in order to initialize the provider we need to initialize it and the build because we will require the context of course you can access the context here also if you are in state a full widget but we need to create an anal function but for now let's just initialize it in here so final models provider and then we need to call the provider package and now we say off oops we need to ample this provider package and now we call off we need to specify the type it is models provider and then we need to give it the context and now I don't want to listen to it so we can call false here and that's it now we can call this models provider here and then we can call this function they get all models function okay that we just initialize it in here now restart the application and let's make sure that everything is still working correctly okay everything still working now if I choose other close it open it again we didn't fix this problem yet the old current model still appearing so we need to fix this in order to fix it let's go back to the to here and what can we do is to remove this and make the string nullable and it won't be a problem because if you check here for the value it is nullable okay so to start with and the model provider we created a function to set the model and we are using here not file designer so in here we can call our provider so we name it models provider and let's call this set function and in here we need to give it our value like that perfect and now we need to fetch the value that we have the current model that we have so what can we do is to set the connect model here equal to the modelsprovider dot get current model now let's test it and make sure that it is working okay let's see now I will choose other close it open it again and now here it is we have other I will try again I will choose if DaVinci open it again and here it is now we have the correct model here perfect so I will recap what we did we created this class in here we created this current model we also created a getter for this current model and a Setter for this current model okay this we didn't use but later on if you understand this concept you can use it as what you want so I gave you the code for it as I said the provider is a listener so in order to be able to listen to any other widget it needs to be apparent and and the higher widget so it will be apparent for this widget in order to be able to listen to it so this is why I added this models provider above of the material app widget and finally we use this provider here and because we don't have to listen to it because we will fetch it just once and no changes will appear so we are using the function to get the models from the provider because we need to set our list here so this is why I use this function and then we are fetching the current model here by getting the get model from here and initially because we initialize that like that so initially this text DaVinci zero zero three will be our current model okay so if I change this for something else and restart the application this one would be changed of course now let's go back and finally we are setting here the model is provided to the new model okay so simply it is like that and if you have any question please feel free to ask me this was all I'll see you on the next one where we will start implementing the messages see you there in this tutorial let's allow the user to start sending messages so for that if I go back to the API page so here and and the make and request tab here you have the documentation so I showed you this before and we used it in the postman so for that I will open it in the postman because it would be clearer for you so here we have the base URL and then here is the extension of the URL then we added the authorization which is the bearer token and we have it here and then this we can paste it for the body as row data and I explained this before so here the body and I put it here okay now when I send request we will get the response as follow so we have here the ID object and the modern name for example we are using the text definition 3 if you remember and then we have the choices and here we have the text that we need to display it for the user so in our case we mostly interested with z-text and in order to access the text we need first to access the choices list then inside we need to access the text field okay and here they used text as a key and this is the choices it is a list so it might have more than one item so let's get started and let's type this in our code I just wanted to say that for example if you go back to our code and go to the API service just try to play around with this function and try to build it by your own first so here you can use the post method and fill up everything else so you will understand better now to get started I would go to the constants add here and here if you remember we did says chart messages list we have here key called message and we have the chat index so we can create a new file and we can name it chart model dot Dart and this is will be the model class for our chart so let's say we can name it for example chart model so and in here as I showed you we will have the string the message string and of course it is a final and then we can add the chart index so I will name it here chart index like that and now we can create the Constructor for it so let's say chart model and now in here we can give it the required message and then they require the chart index just like that so this is done now we can proceed and start building the function and the API service so what I'm gonna do is that I will copy this function and I would add the comments here and then I will paste that and let's change this name let's say send message and it will take two different arguments which are the message so let's add the string here and we can name it message and then we can add the model ID okay like that and now if I go to the postman in here and the body we have this model and if you remember we allow the user to choose his model so this would be dynamic and then the user will send the different messages which is the prompt so we will allow the user to send different messages so this is why I'm passing it here okay now let's continue for this one it is a post method and the base URL we have it like that but then this will be different so in here in our case it will be like that and now for the header if you remember we had to add in here the content type and we have the authorization okay so for the content type I will copy it from here and it will be application Json so let's go back and we can keep this one just like that and then here we can add the content type take that and we need to give it the value just like we did here just like that now I didn't get anything by myself of course everything you will find that ends as documentation okay they put it here now let's get back to our code for this post you need to give it a body and in our case the body I already showed it to you so we have it here so basically we can't just copy this we need to call Json and go to it and paste what we have here of course the model would be the model ID we are sending The Prompt would be the message that we are sending and the maximum token I showed you the difference and I'll show you again now so now we have long test as a response but if I put it for example 5 and send another request it will give us a short answer it won't give us the full answer okay but in my case I will just keep at 100. let's add a comma here and here now format our code okay so now you will get a response and it will be a map again and for the error handing it is the same case so now if I make any error here for example let's say like that and send I will get the same response as before okay so these lines we need it also now in our case as I said before we are interested in the choices so we are interested as this list and we have the text as a key let's get back what I will do is to delete all of these like that and then let's do an if statement if we have response or if we have the choices so what I will do basically is to check the Json response that we already decoded and then we give it three choices key which is from here and then we can check the length because as I said it is a list and if the length is higher than zero it means that we have a choices list so we will have the text absolute now what I will do basically here is that I want to print in here what we have so I will use log and then let's print it let's say like that for example and then we access the text and now let's add the concatenation like that and then we need to access the text here like that and in here we are returning this list of models but of course at our case no we would return nothing for now okay so now we have our function and now let's go back to the Chart screen add in here that's called the function send messages and uh send message and we need to give it the required things so the message will be the controller of this text field dot text and then we need to give it the model ID and for the model ID we need to get it from the provider so we didn't Define the provider here yet so what I would do is to get it from uh from here so I'll copy this and then we need to listen to the changes so I'll keep it like that and now we need to import this and import the provider Library or package and then we get it just like that okay and I will log the error better than the print now let's restart the application and let's see what will happen okay now press here I will print something here so let's say request has been sent for example okay so here I got this error when I pressed so uh let's get back to our code it's because for this list that we have the choices list we didn't specify the index here so I will use the first index and restart the application now and now press here now request has been sent let's wait the response and now yeah now it is correct here we have the response perfect so now before that I finalize this tutorial what I will do is the following first at the chart screen that set State our typing and put it let's say equal here to true and then let's add a finely block and again put it equal to false and of course I'm getting an error because it is a final we changed it here so now I restarted okay and of course now it's still showing here we need to change this to false now restart the application again and now it is being shown like that um something is wrong so let's hit check and here at the if statement all these three dots should be appearing okay so all these these uh the three dots should be inside of the F statement so uh the closure would be here okay now I will start it again and let's see here it is now it is working let's test it for the uh let's press here and now here it is here is the loader and when we have the response it should stop so let's wait perfect here it is and the response is correct in here okay so before that I end this tutorial let's go back to the Chart model and if you remember in the models model in here we have created this from Json Factory Constructor so let's do the same for the chart so what I did is that I copy the code from there and in our case we need to use chart model and we will have the message and then we would have the charts index so for the chart index the key it was shot index so I'll keep it just like that chart index add in here instead of the ID we need to give it the message and of course we don't need this and in here it should be our chart model so with this we did our from Json now I think you already know what I want to do is that we need to return in here a list of shots so let's return it here so let's define a list of a chart model and of course I got an arrow because we need to return something so now inside of this if statement I will comment this line for you and then let's define a list here of a shot model on here capital l so let's say list of chat model let's name it list or chat list let's say and initially it would be empty and then this chart list let's put it equal true I mean let's generate a new list from the choices list that we have okay so the elect would be this length of course and now we can't call our chart model and we need to give it the message and the ID and the chat index I mean okay first that's for multiple code and now it's clear perfect so for the message again we need to access it just like that okay and instead of zero we can access it by the addicts and the index is coming from here and as I said this is the choices it is a list so it might has more than one choice okay so more than one item in it okay and for the chart Index this is a bot so it will be always one because we agreed to to put the user on the index of zero and the bot on index of one and finally here we need to return our chart paste and that's it now is this a chart list we can access it from from the message function here that we already type so we can Define for example let's say final list equal to this and if you check the type here it is list of a chart model because this function is returning list of a chart model okay so we will manage this list and the next tutorial and we will start showing the items on the screen so I'll see you in the next one hi everyone this is an interesting tutorial where we will start showing the messages on the screen so the message is that we are showing here are these chat messages so let's comment it and now of course we'll get some errors in the chat screen because in here we need to use the list that we need to add our messages to it so previously here when the user sent a message we were doing this and we can save this this response to a list and it will be of type chart model so what I'm gonna do is I will copy all of this and then just add this and now what I'm going to do is to define a function here and I will name it send message okay so it will be future of type void like that and I will name it send messages or send message fct like that and paste past paste what I have so this function it will take the model provider as a required argument and in here we need to remove this semicolon okay so it would be like that now let's remove this final list and we need to Define something as it states here so not enabled we need to Define it here so that when we set State the value will change so let's say list chart model like that and let's name it chart um checklist and initially it would be empty and now this is a chart list we can use it here and we can use it here and for the item count we need to use it shortlist.let and in here of course we got an error because we can access the message like that and then we can access the chat index like that okay and it is already on it so we don't have to use end dot parse okay perfect so now let's set this chart list equal to this response here and now to affect the changes on the screen that's called set State here like that and now I will restart the application and of course this function it needs to be used here and we need to await it okay and we need to give it the model provider which is we have like that and the same thing we need to put it for this unsubmitted in here so when the user press enter of course the message will be sent now restart it again and let's type hello for example and send now we have this loader and then we only get the response from the boat okay so let's say hello again and let's see what will happen send and now we got different response okay to make it clear hello what is flutter let's say and press enter and now we got different response okay so now we are displaying the responses on the screen but I want to show all the messages and in order to do that let's get started by adding the message which is coming from this text field so we need to append it to our chart list in order to do that in here inside of the end State we can call the chat index dot add and now we can add the value that we want we will add a chart model and the method message will be the text editing controller the text and for the chat index as we agreed it will be zero okay so this is the first step now I will send this message here it is now it's showing here okay so once it is done our message has been replaced and this is because we are setting our chat list like that so what we need to do is I will cut this and then we can call add alt here and paste our code like that and one more final thing is that here I wanna clear my controller now let's restart the application and let's see what will happen so let's send a message hello let's say okay that text has been cleared and now our message still available here and we have the response now let's say hello again for example perfect so we have the response here now let's say hello like that send and now I need to scroll by myself to see the response so this will be fixing it later on so we will allow the user I mean we will scroll this list until the end so that the user don't have to scroll it by himself and now I want to add this tutorial by unfocus this text so when the user sent a message I want to hide the keyboard just like that and this is the purpose of the focus node so let's initialize here a fox node oops Fox node and let's name it Focus node just like that and now we can initialize it here and it will be equal to focus node just like that okay now we need to dispose it and this fox node we need to give it to our text field so here we need to give it defox node just like that and finally for our message here recall on Focus now save oops we need to restart it because this value we are initializing it at the end state okay so let's say hello and press enter and here it is now we cleared the text and we hide the keyboard perfect so in the next tutorial we will scroll the list to the end and after that we will animate this text and after that we will implement this using the provider State Management okay so I'll see you there hi guys this is an easy tutorial where we will scroll this list automatically when we have the long text for example if I send hello something and when we receive something it will not scroll to the end okay so I want to make it scrolling automatically okay so let's get started and in order to do that let's define a late scroll controller and let's name it uh list scroll controller like that and now we need to initialize it here so let's say list scroll controller equal to scroll controller and like that and this controller also needs to be disposed like that and now this controller we need to give it to the list view.builder where we are showing the messages so we give it the controller like that and now we need to type the function in order to navigate the controller so this function I will scroll down and we can Define it here and let's define a void function and let's name scroll list to end like that and now we call our list scroll controller and then we call animate 2 and we give it what we need so the offset recall the list controller and here we give it the max scroll extent so it means that I want to I want it to scroll to the end the duration you can define a duration here like that and you can Define it in days seconds minutes whatever you want I will put it two seconds and this is a cost so let's add it and finally at the end we have this curve and if you type curve curves like that and then you will have multiple animations in my case I will use is out you can try different once add you can choose what what suits you the most now this function we can use it and we send messages here and The Finity so basically we can put it here and the set State now let's try it so I will save it oops we got an error because we defined this controller the list scroll controller and it is in the end state so it didn't get initialized correctly now let's send a message so let's say hello give me a long text let's for example send and now let's say again hello give me another text okay it didn't scroll down but now if I say for example hello again and now hit enter let's see what will happen now it's scrolling automatically I didn't touch it at all okay so here it is our code is now working and the next tutorial we will animate this text I'll see you there hi guys in this tutorial I want to animate the chart response so in order to do that let's go to the chat widget and in here we are displaying this text widget so now we need to use the animated package or animated text package that we added in the pubspected here modified file when we added the packages so in order to use it here we need to check if it is the user so we can return this text widget but if not we need to return the widget to animate the text so in order to do this there is something called animated text kit and now you need to give it the animated text and this is actually at least so in here you say diaper animated text so you give it the message and I will trim it like that now I would start the application and let's see so let's say hello and here is the response it's being as you can see it's being animated but we cannot see it clearly so we need to add some a decoration for that and in order to do this we need to wrap it by default text Style and now we can give it style in here which is basically a text style so let's say text Style and then let's give it the color I would give it a white color and then for the font weight we can give it font weight dot uh 700 and for the font size let's give it one size of 16 and now let's add the const and that's it now save and here it is now you can control the animation here so you can add other attributes here so I will add the repeating animation put it to false to not repeat the animation and repeat forever I will put it false also and I will say display full text on Tab I would put it to true in our case and the total repeat count I will put it one and I think this is enough now save and if I tap on it it will continue the text okay you have it has other attributes you can play around with it and for the default text style you can add the star that you want okay so I think this is all for this tutorial I'll see you in the next one in this tutorial I will Implement a provider for the shots we don't really need it in this application but if our application has many screens and I want to navigate to any other screen with push replacement then I come back to this screen the list of messages will not be available anymore so this is why it would be better if we use the provider State Management and also if you want to display it and another screen it should be easier for you so for that let's create a new file and let's name it charts provider to Dart and here let's say cross Charter or chats provider whatever and I will add the change Notifier and in here it should be capital s no in the chat screen and here we Define this chart list we are using it to display it and the list of YouTube Builder okay and then here we are appending the user message and then we are appending the AI message so this is basically what we will do we go back to the provider we initialize a list just like initialization of this list paste it here import the class and now we need to create a getter for this list so let's type get or we can just copy it from here paste this here and then the type would be osys type and in our case we will return the chat list and let's say get chat paste like that so here we created the cutter for it now we need to create the setters as I showed you we have and the chart screen we have here we are adding the user message and then we are adding the bot message so let's create two functions want to add the user message want to add the both message you can do it in the same function but just to make it clear for you I will do two different functions so here so here I will do add user message like that and let's give it a message as an argument so like that and then here we can use the same code we used here paste it here and now of course instead of this text we need to use the message and now we need to call the notify listener in order to tell the chat provider to listen to this changes here and display directly changes on the screen now for the second one here for the both message I will copy this it is the future function so let's type future of type void and then let's say send message and get answers like that and it will take the string message and then the chosen model so also required string model or let's say I will name it chosen model ID to make it clear for you and now we need to add the Asim keyword here and we can paste our function just like that we need to import the API class and here we need to give it the message and here we need to give it the chosen model ID perfect so now this chat provider we need to add it in the main just like we added the models provider so just like that we need to import it now and that's it now we are ready to use it so edit shot screen let's go up and now I will copy this paste it again and now let's define the charts provider okay and here let's name it chart provider like that now we can use this provider in order to add the user message so here we are adding the user message I will comment it let's now call the user message but in here we don't have access to this but so we need to pass in the chat provider as an argument here so let's say chat provider and now we will have access to it so let's say in here add user message and in our case we need to give it the message that we have which is the text editing controller to text just like that and now for this one we need to give it I mean we can call the chat provider and then Dot let's say call this function and of course we need to give it the text and we need to give it the chosen model so we call this model provider actually here it is and I will comment assist line and that's it now let's make sure I mean first we need to add the chat provider now still having an error of course we need to add it also here and now restart our application okay I will send a message after that I restart send and now nothing happened so let's check what's going on and here it is a future function so let's await it and here we need to add the notify listener also like that now restart the application and let's see so let's say hello and now send okay something is happening but it's not showing on the screen and this is normal so now we need to use its chart provider instead of the list that we were using it here so let's comment this and now I will add comments for you just to keep it so now we can get the chat list dot length and we can use it instead so I will comment this and I will comment this for you and now paste it like that and then we call the index here and then called the message and I will copy this and do the same one same thing here and that's it now I will save here it is okay so now I restarted the application and I will test it again so let's send any message so let's say hello send and now our message appeared perfect now let's see the answer okay perfect we have the answer also so now we implemented the chart using also a provider so we don't manage it just locally we can access these charts any and any other screen okay so with this tutorial we finished everything related to our application I just want to add one more tutorial about the errors just to display the errors if we have an error we can show a toast or something and as I said in the beginning of this tutorial I might update this application and add other features I will see what to do and I will see what your suggestions about this app see you in the next one as this lecture I will finalize everything so let's show errors for example if there is another happening so when the user is sending a message let's show an error here and the catch block knock just log it so for that I will show in a snack bar so in order to show it you call the scaffold messenger dot off context then dot show snap bar like that and now you need to give it a snack bar and you need to give it the context you can use I mean the content and you can use the text widget and in my case I will use the error and uh for the background here you can use the background let's first format our code like that and then here for this snack bar you can add the background color and it would be nice if we show the red color like that and now I would make an error for example I will I will just for example cut this now restart the application and try to send a message hello for example send and here it is now we are showing this now let's make sure that the user cannot send an empty message press here the user can send an empty message so we need to figure out this so in here I will revert the changes let's go back to the Chart screen and now I don't want the user to send it an empty message so what can we do is in the send message here we can check the text ethnic controller the text if it is empty or not so let's do another statement here if it is empty and here's this easy case let's return so the code will stop here restart the application and let's see if it will work so let's say let's keep it empty send perfect no I cannot send a message if it is empty and of course you can for example show another scaffold so it would be nice to say for example here please type a message like that and let's add the cost keyword here okay and now press here and here it is it shows please type msh and now if I type something of course our code will be executed okay I'm getting another because I didn't save this as well now if I restart the application it should work perfectly okay now let's say hello send and it should work here it is it is working correctly now I want to test if we choose to for example different model would it be correct or it would be always the first default model so in order to know this we can go to the API service and then NC send message we can print the model ID so I will log the model ID like that save and then I will use now the other for example and let's make sure it's being chosen okay here it is now let's add a new message for example hello and now here it is our model ID is Ada okay now I will use another different model let's say for example text other zero zero zero one okay press hello again send oops okay let's type hello and now send and now here it is the model ID is text other001 okay so this is all I hope that you like this course and if you like please consider uh starting the repository and thanks a lot for attending this course and uh I'll see you in the next one hi everyone and welcome back I'm glad you're here so as this tutorial we will fix two different things the first one is that for example if you send hello or any other question let's say you would get weird response so this is the first thing we need to fix it then we need to allow the user only to send one message at a time to avoid spamming so when the user send a message let's uh we need to let them wait to get a response then after getting the response we can allow him to send the other message so let's start doing this so we go to the chat screen and the send message function so we can search for this function and now and here if you check this text controller and here we we were using it for the message we are passing the text here which is okay but here I cleared this text editing controller and then I'm using it again here which is wrong okay because this text is already null because we already clear it here I mean empty not null but so it's wrong to use it like that so basically what we can do is simply Define a string let's say here and let's say message and we can put it equal to the text editing controller to text and that's it now in here I can use the message and again in here I can use C message now I will restart the application and I will send hello and let's see what will happen okay let's send hello okay so now I'm getting a better response because he said in here hello world remember this is not exactly chat CPT this is this one text DaVinci zero do you see so let's ask him about flutter he should give us some good answer so let's say what is flutter okay now here it is here's a very good answer we can ask him any question for example let's say um what is rest API and absolutely you will get something correct at least perfect so here it is now the second second thing is that I would don't want to allow him to send multiple messages so for example if I say hello and then say test and directly send it to it's it's hard to to test it actually because the response is very fast but yeah um I'll try again up okay so what I'm going to do is that I will avoid this fox node just uh and I will start the application and let's send the let's send a Hello message like that and then let's say Y and send it again see directly I have these two messages here and this is wrong I don't want this case so what we can do is that I will copy this if statement and if the user is typing because if you remember we defined a Boolean called typing so if this is the case we can show the scaffold of course this is scaffold you can make a dynamic just to reduce your code if you want but I'll just keep it like that for now and in here let's say you can't um send uh multiple messages at the time okay now save it now I will say hello and directly send something else and see now I got this error message so with this I think our application is perfect and before that I finish I will uncomment this and that's it now I will save it and send this again and that's it our application is being great I hope that you like this tutorial and if you like please leave 5 Stars rating and don't forget to subscribe I'll see you on the next one

Channel: The Flutter Way

Views: 62,739

Keywords: flutter, Android App, iOS app, mobile app, UI speed code, flutter app design, flutter responsive ui

Id: BB59SwaQjrQ

Length: 142min 7sec (8527 seconds)

Published: Mon Feb 13 2023