Flutter Google Gemini Chat App Tutorial - Flutter Gemini API Chat Application Guide

in today's video I'm going to be showing you guys how to create an AI power chat application using the power of flutter and Google's Gemini API we're going to be building an application that's going to allow us to interact with the Gemini API with either just text or an image and we can ask questions in both formats our application will provide us with the ability to ask the chatbot any type of questions for example how can I learn flutter and then as soon as we send our quy to the actual API it's going to reply to us with a streaming response and I'm going to show you how you can stream the respon resp to the user like it's being shown on the screen besides this we'll also take a look at how we can have image based chat with the actual Gemini API for example if I send this image to the Gemini API and say describe this picture you're going to see that the Gemini API is going to analyze the picture that we've provided and then tell me the answer to my cury which in this case it correctly identifies the picture as a beautiful Harbor in Monaco so to get started the first thing that I'd like to let you know is that links to all of the resources that I mentioned within this video as well as a link to theour code can be found in the description below so feel free to take a look at it if you're confused at any point with that done let's take a look at the dependencies that we'll be using to build this project and then we'll move on to the coding part so in total we're going to be using three different packages from pub. deev the first is going to be flutter Gemini package and this package will make it very easy for us to communicate with the Gemini API so just copy this package come to the pope.l file and paste this under the dependency section like so besides this we're going to be using the image picker package and this is basically basically going to allow us to access our devices gallery and then pick images from there and finally we'll be using dashore chatore 2 which is an awesome complete chat UI that's going to make it very easy for us to build this chat interface within our flutter application so let's copy that come back paste it in and that's pretty much all we had to do so while flutter pop gets does his magic what we can do is actually get the API key that will be required to initialize our actual Gemini package so to do that what you can do is head on over to the p.de page flutter _ Gemini and here you can scroll hold down to the point where it says set up your API key as you can see here and then here you're going to be provided a link on which you can click and it's going to take you to a new website that's ai. gooogle dodev and here you can apply to get an API key for interacting with Google Gemini before we actually take a look at how we can get the actual API key let's actually take at the pricing of this API so Google has very generously allowed us to have a free tier when we're working with the Gemini API and basically it's going to be free unlimited request the only C is that we're going to be limited to 60 requests per minute on the API key that we have if you want to do more than 60 requests per minute then we'll have to go onto a pay as you go plan so now that we have a good understanding of the pricing let's come back to the ai. google. page click on get API key in Google AI studio and it's basically going to take you to the AI studio and there you'll be able to get an API key so to get an API key all you'll do is come to the leftand navigation bar here you're going to click on get API key then you're going to to click on create API key and then you're basically going to search for a Google croud project like so generate API key in existing project like so and that's basically going to generate the API key for you and then once you've copied your API key just minimize the browser come back to the lip folder here I'm going to create a new file under Li I'm going to call this cons. dot then what I'm going to do is basically say that I'm going to have a con string it's going to be called Gore API unor key and I'm going to set this equal to the API key that I was provided and do command save and that's pretty much all we had to do so now with this then we can come to our main. file and here in the main function I can basically initialize my Gemini package so to do that do Gemini Dot and this class is going to come from the flutter Gemini package in it and then the API key to this function is going to be the gni API key that we had defined in our constat Dart file so now that this is done that's pretty much all I'm going to be doing before proceeding onwards with coding before that I just like to test the application make sure it's working as intended so I'll start debugging this application and once the application is running on the simulator then I will resume the video if you get an error while building the application which says multiex support is required what you can do is come to the Android folder then come to app build. Gradle and then here what you can do is scroll down to the bottom where you see the minimum SDK version and here you can change the minimum SDK version to 21 like so and do command save with this you can start the debugging process again and hopefully this should fix the multiex issue for you and you should should be able to run your application on the simulator so now that the application is actually running on the simulator we can be confident that the actual configuration process was done correctly and now we can move on to the coding part so to get started with coding I've created a stateful widget class called homepage for which I have a build function that just for now returns a scaffold and we're going to be implementing everything from scratch for the scaffold the first thing that I'm going to be doing is basically setting the ab bar property just to make our app look a bit nicer and it says Gem and I chat in the app bar now and now we can move move to the body so I'm going to set the body property to be a call to a function called build UI like so and now that this is done I will basically Define this function undor build UI and then within this function all I'll do is say that I'm going to return a dash Chad widget instance like so and this class is going to come from our Dash Chad package so now that this is done we basically need to give this Dash chat object three different parameters the current user what happens when we send them message and the messages that it needs to display so we'll take a look at these one step at a time so the current user is basically the user that it's going to think of as the user that is logged onto the device or is the user that's sending the messages and dash chat is basically going to use this to differentiate between the messages that the current user sends and the messages that are received from other users so to fix this what I'm going to be doing is coming to the top and here I'm going to be creating a chat user variable and I'm going to call this current user like so and then I'm basically going to be setting that equal to chat user and then I'm going to set the ID to be zero and the name here could be whatever you wouldd like so what I'm going to do is say that the first name is going to be user and since we're going to be interacting with our Gemini API I'm also going to create a user for that so that we can differentiate between the messages that are shown whether they are from the current user or from the Gemini API and I'm going to call this Gemini user and then I'm going to do the same thing I'm going to set that to a new instance of chat user the ID is going to be the one the first name is going to be Gemini and then I'm also going to set the profile image URL on this so I'm just going to copy and paste that in and this is basically going to help us display an image as a avatar for the messages that we get from jni user so now that we have the current user and J user defined what I can do is come down to the dash chat object and set the current user to current user then we can Define what happens when on send is called and I'll explain to you what on send is but for now just do this create a function that doesn't return anything call it send message and then it's basically going to take in a chat message I'm going to call this chat message and then open up the functions body and then set the on send to be send message like so so whenever on send is called we'll basically run our send message function and pass the chat message to it and finally for the messages list what this basically means is the actual messages that are going to be displayed on the screen once we have some to display so for now what we'll do is that we'll create a list which is going to store all of our messages and we'll initialize to be an empty list so to do that I'll come to the top of my class I'll say list of chat message I'm going to call these messages and I'm going to set that to be an empty list like so and then that's pretty much it then I can come to the bottom make sure that I've set messages to messages and now we are actually ready to implement the chat logic so to implement the chat logic it's going to work as follows when the user comes they're now being displayed with the power of Dash chat in input field they can input any kind of text within this field so hey how's it going and as soon as they press the send button what's basically going to happen is that on send is going to call which is basically going to call our send message function and we'll get this chat message object passed to us which will contain all of the information regarding the chat message so the first thing that I'll do is that I'll take the actual message that we receive and then add that to the actual messages list so that it's displayed on the actual chat UI so to do that it'll be fairly simple all we have to do is basically call set State and I'm going to say that the messages list is now going to be equal to the chat message that we've just received and then I'll say dot dot dot messages like so and do command save and for those of you that are confused with what this dot dot dot syntax mean it basically is called the spread operator and what it's going to do do it's that it's going to take the messages list and it's going to basically take all of the elements from that list and add that to this new list that we've added here so that's basically what it's doing so now that this is done the next thing that we need to do is basically take this chat message that we've received pass it on to Gemini let Gemini do all of the things that it needs to do and then whenever we get a response from Gemini show that to the user so how are we going to be doing that well firstly I'll Implement a TR catch block just to make sure that if for some reason we get some kind of an exception or an error that our application is not going to crash and in the cach block I'll just say that print the error once that is done the next thing that I'm going to do is create a string that is going to be our question and this is basically the question that the user asks and I'm going to set this equal to our chat message. text like so now that this is done the next thing that I'm going to be doing is basically taking this question and passing that to Gemini well to do that firstly I need to create a variable that will store for a reference to our Gemini instance so to do that I'll come to the top of my class and here I'm going to say that I have a final Gemini Gemini variable it's going to be set equal to Gemini do instance like so and that's pretty much all we have to do and make sure that you import the Gemini class from flutter Gemini and do command save and now we have access to our Gemini instance so so I can come at the very bottom and now we can start working with this Gemini instance so I'm going to do Gemini Dot and then on the Gemini instance I'm going to have a function that I can call that's going to allow me to stream the response from the Gemini API and that's going to be called stream generate content and there are many other functions that you can call on this instance such as stream chat and there are other ones as well such as just chat but we're going to be using stream generate content and then for the text here I'm going to pass ask the question and then what I'll basically do is that I'll attach a listener to this stream and this listener is basically going to be fired every time an event happens on this stream so what now we have to do is basically two things since when we pass our question to Gemini it'll start generating a response for us and then we'll get the response in various different events so as soon as it generates a little bit of the response we'll get that then when it generates a bit more of it we'll get that so what we need to do is keep adding the responses that we get from the API to the last message that's within the chat because that's the message that's going to be from the Gemini API well to do this what I'll do is that I'll say that we're going to have a chat message optional variable and it's going to be called the last message in the chat and then we'll do the following I'll do that we'll take the messages list and we'll get the first element from it and if we don't have it then we'll return null then I'll try to check and see if the last message is from Gemini because if the last message is from Gemini then I'll just add the response that Gemini gives me to this message otherwise if the last message was from the user then that basically means that I need to create a new chat message and add that to the actual chat UI so then we can do last message is not equals to null and then one other thing that I'd like to do is make sure that the last message is from Gemini so to do that I'll do last message. user like so is equals to Gemini user and then we can open up the if block otherwise if this is not the case then we'll do the following then we'll just create a new chat message call it message set it equal to a new instance of chat message for the user say that it's going to be our Gemini user for created ad what I'm going to do is date time do now and finally for the actual text I'm going to do the following I'll take the actual events that we get and extract the contents from it take all of the parts and combine them into a single string so how can I do that well to do this what I'll do is that I'll create a string variable and I'm going to call that response and I'm going to set that equal to the event that we get and then on the event I basically want to access the content then on the content I want to access all of the parts so the different parts that combined together to make up the content and then I want to basically combine all of these parts together into a single string so I can do that by using the fold function it's going to take an initial value which is going to be an empty string and then we're basically going to have the previous value and the current value that we need to add to our previous value and here I'm just going to return a string which basically takes the previous value and concatenates with it the current value like so and that's pretty much all we had to do and in the case that contents is null then by default what we'll do is just return an empty string like so and that's pretty much all we had to do and I'll also add a null of your access operator here and then we'll take our response and we'll set that to be the message here like so and do command save and now that this is done what we can do is actually just call set State and add this message to the messages list so that it's display to the user so to do that it's basically going to be simple all I'll do is set State and here I'm going to do messages is equals to the new message that we've just created added to the start start of the list and then the remaining messages that were already in the messages list and do command save so now with this done let's actually take a look at the logic and how it's working and then I'll show you where the problem is and how we can fix it because for now we'll just get a part of the response not the complete response so let's restart our application let's write a message hey how are you like so and if I send this message you are going to see that a response should be generated but it's not showing me the complete response and the reason for that is because as soon as the first event is provided to us because again we're listening to a stream we're going to check to see the last message we're going to have a last message but the last message that we're going to have is not going to be from the Gemini User it's going to be from our current user so then it's going to come to this El's blog it's going to create a new message add the response that we get from Gemini to it and then set the state here but what I want to do in the case that the last message is from Gemini then what I want to do is just update that message with the new response that we've gotten so how can we do that let's take a look at it so this is going to be in the first if blog where if the last message is not null and the last message is user is the Gemini user then we just want to append the new event text that we get to the message so to do that it's going to be the following the actual Logic for generating the response will still be the same so let's just copy that and paste this here so basically looping over the event do contents parts and then just combining them into a single string and then after that is done what I need to do is get access to my last message so how can I do that well to do that I'll say that the last message is going to be equal to our messages list and then from there I'm going to do remove element at the Zer index so that's the last most message message so the first message in our actual list of messages is going to be the message that was the most recent one that's displayed at the very bottom so that's why we're removing that message from the Zer index so it's going to remove that message and put that into our last message variable and then what I can do is the following I can just say the the last message. text is now going to be equal to the new response that we've just created and then what I'm going to do is call set State and this time I'm going to say that the messages are going to be equal to a list where we're going to set the last message as the first element in the list and then the remaining elements after that like so and that's pretty much all we had to do and I can add an exclamation mark here as well since I know that last message is not going to be empty so this should pretty much fix the issue for us now if I restart the application and I write a message here like hey how's it going and send the actual message you're going to see that as soon as we get a response it starts to send me that information one weird issue that you can see in the actual responses that we're getting is that instead of just getting the text we're getting a textual representation of the list that is the parts list so how can we fix that well to fix this what we'll do is basically come to the event. contents. parts. fold function and then here where we concatenating the previous value with the current value and here we'll do dollar sign previous so we'll keep the previous value like it is but for the current one we'll do current. text I believe and then do command save that's pretty much all we had to do so let's copy this logic paste it here as well and do command save restart our application and now I'm going to say hey how's it going and now if you send the message the response we should get is provide information and assist users to the best of my ability um and then what I can do is also add a space here since I can see that the space isn't being added automatically so let me just do that do command save and then I can say how can I learn flutter and if I send this cury hopefully there should be a more detailed response and now I can see another issue and this issue is that when we get a a new part of the response given to us then we're completely overriding the existing content that was within our last message so the fix to this should be if I come to if the last message is not null and the last message is from our Gemini user then we get our last message we generate our response we said the last message. text2 oh it needs to be plus equal response we basically add the new response that we get to the previous um content that was already within the last messages text so let's do this let's restart our application and now if I do how do I learn flutter question mark send it it's basically going to give me a streaming response there we go so now we're getting a streaming response it's not overwriting any of the information um and it looks great so now what I'd like to do is basically implement the functionality of sending a image to the actual Gemini API and then ask a questions regarding that so I'll show you how to do that now so to do that what we'll be doing is firstly adding the functionality of picking an image from the gallery so to do that I'll come to my Dash chat object on this I'm basically going to define the input options it's going to be of type input options and then I'm going to define the actual I believe trailing list on this it's going to be a list of widgets I'll say that we're going to have just one widget which is going to be an icon button when this icon button gets pressed we are going to do nothing for now and the icon here is going going to be icons. image like so and also want to make sure that I put this within an icon widget so let's do that by doing icon icons. image then all shift F command save there we go we can actually see the icon image being shown to us so let's click on this and let's see that nothing happens for now so now within onpressed what I like to do is basically call a function called send media message so to do that it's going to be the following I'll create a new function at the bottom of my class I'll call it send media message and then I'm going to say that it's going to be an async function and it's going to take no parameters I'll create a reference to our image picker and this class is going to come from our image picker package and then I'll instantiate a new instance of image picker once this is done I'll say that we'll get an x file optional variable which is going to be file it's going to be equal to A8 picker. pick image and then the source here is going to be image source and then I can do Gallery so basically pick an image from our Gallery with this done we can actually test the code so let's click here and it should open the gallery for us and start opening it because we haven't set the send message button to be called so let's come to the top icon button when on press this call we'll call our send media message function like so command save click click on this it should open up the actual gallery for me I can select an image and nothing happens for now so now that we have access to our image the next thing that I can do is basically construct a chat message so to do that I'll do if the file is not equals to null then what we can do is say that we're going to have a chat message and this is basically going to the chat message that the user sends so I'm going to call this chat message equals to and I'll here create a new instance of chat message the user will be our current user the created ad is going to be datetime doow like so then the text is going to be and I will say that whenever I give an image the question that I'm asking on that image is the following which is describe the this picture let's just say so describe this picture like so and then once this is done I'll also set the media property on this so this is basically going to define the actual media files that we've attached to our message so it's going to be a list and I'm going to add a Chad media object to it and the URL here is going to be the files path the file name can be empty and then the type here is going to be image like so and that's pretty much all we have to do and now that we've constructed our chat message we can actually send that to the send message function and then the rest of the logic can be handled there so once we have created our chat message then I can doore send message like so and here I can pass the chat message message and that's pretty much all we had to do so now what basically is going to happen that when send message is going to be called we'll basically get a chat message what we'll try to now check is if our chat message contains any kind of media attachments within it if it does that that basically means that we need to pass that file along with the actual question that we get which is going to be extracted from chat message. text and then send that to the Gemini API so to do this it's going to be fairly simple the first thing that I'm going to do is basically check to see if the chat message that we get its media's list is not empty and if this is going to be null then by default we'll return false so if this is the case that basically means that an image or some media file was attached so what I'll do is basically create now a list of uint 8 and is going to be optional and it will be images like so and then within the if block I'm going to do is equals to A List which is going to have one element within this which will be file and it's going to be the Chad message Dot and then I will access the media's list do first Dot and it's going to be the URL and here I'm going to do read as by Sync like so and that's pretty much all we had to do so what I'm basically doing is constructing a file instance from the URL of the first first element that is within the media's list of our chat message and then I'm reading that as by Sync so that returns to me a 8 list and then that's basically going to be the only element within our images list since we can p multiple images if we'd like then I can come to Gemini Dost stream generate content and then besides sending the question I'll say that we'll send the images and the images property is going to be optional so if we don't send any images then it's just not going to consider them and then I'll here set it to images list that we've defined and that's pretty much all we have to do and do command save so that's pretty much all we have to do so now we can test if our application works as intended so to do that I'll restart my application firstly I'll just write a generic question so I'm going to do hey how's it going and then send the actual question and hopefully we should get some kind of a response I'm doing well thank you for asking how are you doing and then I am going to send basically a picture message so let's try with this picture first it's a picture of Henry caval let's see what the Gemini API tells us um there we go it correctly identifies the person in the picture to be Henry caval he is an actor who has starred in movies such as Man of Steel and The Witcher so that's great let's try another image so we could try this image and hopefully it should be able to correctly detect and tell us what the actual clet of the image is so there we have it it says that the picture shows a beautiful Harbor in Bodo and one final test we could do is say what day is it today send it and it doesn't tell me anything and that's exactly the kind of response I expected because it can't provide any type of real-time information just wanted to let you guys know that since its knowledge was cut off in April 2023 so the most it knows about the world events is up to the events that happened within April 202 3 so with that that's pretty much it for today's tutorial I hope that you enjoyed and learned a thing or two about how to create these powerful AI chat applications using the part of fter and the Gemini API as always if you enjoyed the video then please don't forget to leave a like on the video and subscribe to my channel so that you get notified every time I release a new video and stay happy stay healthy keep learning keep growing and I'll see you guys in the next video bye-bye

Channel: Hussain Mustafa

Views: 7,843

Keywords: flutter google gemini, google gemini flutter, google gemini ai flutter, flutter ai chatbot, flutter ai chat app, flutter ai app, flutter ai projects, ai flutter app, ai flutter, google gemini api, google gemini api tutorial, gemini tutorial flutter, gemini ai tutorial, gemini tutorial, google gemini, gemini google, how to use gemini, gemini flutter, fluttergemini, flutter gemini, gemini ai, flutter ai, flutter, flutter_ai, gemini

Id: PoZ9iRL16As

Length: 27min 50sec (1670 seconds)

Published: Sat Mar 30 2024