Flutter chat app with Gemini AI

hello guys welcome to this new tutorial it's your boy fabis and today we are going to create our own chat app based on Gemini m i mean to do this we will take inspiration from this figma design here and during this tutorial we will um talk further about how to use Gemini to interact with AI and also how to use Riv port for dark and light mode and yeah basically what we are going to have is this app and once we came here we can just say hey what's up and ask him any question you want and he's just going to reply directly and he say hello I'm jini and we are also going to change our light to dark mode so if you are ready then without further let's go let's work on the UI first of all we are going to work on this page and these are going to be the main page for our chat app so we are going to design this UI page and to do that we will create a message class in order to dist anguage the sender message from the recipient message so we are going to start with the body let's do it we got um theault application just there and we can see that we got nothing um except like just a text that display welcome to flutter guys so first of all we are going to create um message class so let's do it for fine now we are going to use this class directly in our main page and in our main page what we are going to do right now is try to create a list of message directly great let's initialize first of all list of message then add them directly in the list view so what we are going to do first of all is just to initialize list of message for nice now we are going to to use least few builder in order just to display those kind of message so let just do it for for now let just add um a container to wrap the text and we are going to work on our design yeah for so what we are going to do is If the message just came from the user we are going to change the color of the text so for example let's say white and if not we are just going to use black one okay this work right so we are going to do almost the same but in order to change just the PO radius for and let change the color also based on the sender or receiver for example okay this looks great but we can say that the message is still displaying at the beginning so what we want to do is to display just the message based on the B of the person that are sending the message so we are going to wrap our container in a line so let's just do it okay great now what we are going to do is to add the input for our um user in order so he can send just a message first of all let's just wrap our list view in expanded component so it will have us to have like er r letter because we are going to put um this list view in column and then we are going to add um there we are going to work on the uh user input so basically what we are going to do is to create first of all um text file text fil but our text fi are going to have a controller so let's just initialize the controller at the beginning and they just write okay we are going to use this one directly in our text field so let just write so first of all let's save this and see if we can just see it directly okay so basically what we are going to do is to wrap this in the baring for example nice okay I don't know if you can see it but we have it just there let me write so you can see it yeah so what we are going to do is to change their decoration of that input and rpe all of them directly in the same container as icon button so let just add we are going to replace the icon layer with the good icon and image but first of all I just use this one okay so um let so we are going to have the icon and the input in the some line that's perfect that's what we want but um now let's work bit more on the decoration of our icon because we want it to have like border radios included with the icon so we are going to add a placeholder first of like for example right your message set the border to know and add a pading for example if user decide to write anything in the input right okay so you can see that you are not saying anything expect just the input or the placeholder and I mean that's normal what we are going to do just right now is to rra all of this like all of the row in the container and try to apply the Border radius directly on the row so let just do it then we are going to add a shadow effect directly on this one okay okay I think now we are pretty good we just missed for example um the icon of the I mean the user that sent us a message so the re um the receiver icon there and just also a few details for the design uh but later for example we are going to work on that with the temp dat in order to remove or to migrate our um color directly we put directly there so this is first of all for our structure in order to have the design so let's just continue now we are going to work on the app bar first of all and try also to change the icon um that we add in the input for that I just enable the asset directly in my pope.l and I just create a folder called asset where I just put um all the asset I have so basically let's just start with the app bar first of all let's see for example for okay so we just need to change the color there of course we are going to change all of this constant later and we are just trying to build something very basic for now so here we can see that we got our up bar with u the image I mean our icon um gin GPT and also the volume for example so now we are just going to change this one with let's just use G detector what we are going to do is just to add just a detector directly in padding for example yeah great so I think um we got something really interesting now we are going to work on the um on biring page let do it and this one is l look it looks like this and yeah basically what we are going just to try to do is to um display like this title and subtitle try to display the image and just create um a button which are going to redirect us directly on the homepage so let's just do it um to do that first of all we are going to create cre a f Cod on boing the dart and these are going to be State last widget so what is St that widget basically just um some widget that are not going to require to build um itself every time for example when we are going to have changes so let's just Define Scare for for so what we are going to do is just replace this and try to call on bring page and try to restart our app okay perfect I can see but we are going to fix all of this directly by just heuse let me just try to copy this test on the design and pass it okay for for okay now we are going just to add the image on boarding image directly there and finally we are going to add the button or so so for okay so I'm just going to add a style to the button or so for okay now we are going to wrap our colum dark clean pading and what we are going to do is just to our button we are going to redirect on user click on the button you're going to redirect him to the um main page page so let just okay great so now we have something like this so directly we got [Music] our we got arrow on biring page and on us that CLI on the button we are going to redirect it to our homepage or main page yeah I think um we have something pretty interesting but later what we are going to do is to migrate our of this color in order um to have something more readable so so um let's just continue so before we continue and try to improve our UI um we are just going to add this deposes and it's called FL native Splash and this one are going to help us in order um to have our splash screen so basically we are just going to set the parameter as color and these are going to be the specify the background and also set the path of our um image that we are going to use and that is very uh yeah simple and the last thing we are just going to do is just to come directly in the terminal and just run flut P run flut and na spash screen create okay perfect so that's mean that the next time we are going to run our app and restart it directly we are going to have the new sprad screen so yeah very good now let's focus more on the implementation of the Gemini API and see how we are going to use it great so to share front color and style in our app will use themes this will allow us to to properly manage our thematic data and to do this let's just create a team. dart file and we will Define our light and dark in it so great so we are just going to Define our light mode and dark mode Team D so basically what we are just going to do is to replace um this them let me just write let me restart so as you can see when I just restart my app by effort it took directly uh this one bright do dark and this is with default value and if I just um click on my emulator and try to change directly the apparance of the theme we are going to have the light mode just there and basically that is what uh Team help us to do in our flutter app now what we are just going to do basically is to replace all the art coding uh style we just have in our app and just try to use something more useful so let's just do it for that we are just going to start with the color um let's just start with the color uh scheme for example and the color scheme are going to help us to change the color of the main component in our app basically so I'm going to use those three parameter and I'm just going to do the same or so in for the light mode Let's just add the good color directly so we are just going to use the blue one for the primary and these are going to be very similar for these two but for the background we are just going to change the background and use the dark one yeah nice so what we are just going to do right now is to go directly in our homepage and try to use um our different St if you are let's just do it okay so in order to call this parameter call scheme what we are just going to do is to use this like theme of D of context dot color scheme for example and if you want to use the primary one so we are just going to use the primary one and these are going um our flutter app are going to know directly that we want to use uh this parameter so let's just do it and we are going to better understand what I'm trying to say so let's just find our background color there let's say we want to add the background color and put the red color so as you can see now we got like the red color into our background but what we want is to use something that will change if we have like dark or light mode so let's just write theme of context of background so by writing this if I just restart my app we are going to tell our app that he just need to use this so if we are in the light mode as we can see our background is white and if you are in the dark mode we just need to change it and we are going to check the apparance so yeah that's great let's just continue with the rest of the Cod we are going to change the background also of our app and last set elevation to one in order to change deration of our app bar now we are going let me just show you in the dark mode as you can see we doesn't have um our titter didn't show up like it is still black so we are going to change also the style of our tier so let just Define or so in the temp there you're going to have like so we are going to use the parameter text theme in order to apply it to all the text we are going to have in our app so basically let's just add some few parameter and we are going to do the same just by calling text team do TI large for example and if I restart my app we can see that it's black through and if I just decide to change the mode we are going to have white as color yeah now that you understand the Broner I'm just going to copy past all the team data in order to avoid us to write all those code so let me just do it directly great so basically what I just do right now is to define a class font size and with different size like extra small small stand large extra large and with different kind of theme dat so I got my light mode my dark mode and I'm just going to use those parameter directly in my homepage in order to have something more useful so let's just continue and change this for for okay great so let me just refresh and we are going to try to see the difference okay nice but we can see that now if I try to write directly in the my input the color is still white so let's just try to change this also we are going to get back in our input decoration just there and what we are going to do is add the H style and these are going to be our placeholder style for example and with copy with it's are going to help us to overwrite the style of titter smile let me just show you yeah as you can see we got the color by the which is black but we want it to be gray for example so we are just going to set color to the gray one and if I do it you can see that it just ched there and even if I'm in the dark mode it can still um it doesn't change and still Gray so with this one if I just refresh my app now I will be able to write directly there in my input and also if I'm in the dark mode I can still right and these are going to be great yeah as you can see now we got our white and dark mode but this is not all now what we are going to do is to add um River pod for example which is one of statement management package and we are going to base on that in order to use a button to switch from light to dark mode so let's do it excellent now we are going to use rever p in order to just manage the theme we just add before so um we are going to run Pub Gat after just install FL rpod package and on it done we are going to create a new file directly in our lib called just create a new file called team Notifier for example inside team Notifier what we are going to do basically is to add a function that are going to change the tee mode based on the current state let's do it for so we are going to verify the current state and just check if the state is for example in the already in the light mode we are going to change this state to the dark dark mode and if it is already in the dark mode we are going to change it in the light mode okay great now let's just create a provider that we are going to use in our app directly yeah we just need to remove the is there okay great now we got our time Notifier so we are going to wrap in our main app directly just we are going to wrap our main with provider scope so let's just do it what you are just going to do basically there and just make sure that you you are not going to put provider scope inside my app but you need to wrap my app inside provider scope okay that's perfect now let's just add a new parameter directly in material app and we are going to call it like theme mode and this are going to use the current mode of [Music] our let just use yeah so we are going to create a VAB called team mode and this are going to refer to our provider we just create um before there so let's just use theme provider and we are going to watch it so we need to import um RP also if not we are not this one are not going to work but let's just change the Statz widget to consume widget for example so we are going to change this one to Consumer widget and consumer widget is provided directly um by rport so if we came in our build function we need to add widget and make a ref so this some taxs are going directly to know that we got a team provider there here and if we made like any changes it's are going to take it and update it directly so now what we are going to do I mean that's normal let just try to prun our app okay so now we can see that we are in the light mode but what we want to do basically is to change the mode on we click on this button for example I mean for now it's just an image but if we click on it we are going to change the the image or icon letter but if we click on it we want to change um our app in the dark mode for example so for doing that what we are going to do is directly go to my homepage yes and we are going first of all to change our stateful widget to schummer widget but for that let's just try to import rever okay and let's try to just um find okay here it is I think this one is so if I just commment this okay perfect so we are going to add a gesto detector in order to just a detector there and let's just add ontap function so if user click on it what we want to do is to call a function read so this one are just going to listen and to call the function if you remember we got a function tole time there so now they are going to say that yeah they don't know this variable and that is normal we need to change our state for we wet to Consumer stateful widget provided right so I'm just going to do it manually but um of course we can use some extension to do it also three depend so let just change the state and here so let's now try to restart our app okay and if you click on the image we can see that now we are changing directly our theme based on what we want like dark or light mode and yeah that's what we want so now let's say for example we want to get the current state of the theme so we are going for example just Cur theme and use reff read so these are going to help us to read the value of theme provider just there so we are going to get the current state and let print just to make sure okay we can see that we got theme mode light for example So based on that we are just going for example let's just let just say we want to show some icon there let's say I do this dark mode okay so I think now we are you are maybe understand what I want to do so I want my app to show icon like light mode for example if you we are in the light mode and dark mode if we want to change in the dark mode so for that we are just trying to get the curent theme so we can basically what we can do is just use this one directly um this here but let's say for example I try to do something like this you know let's say I add the function get current theme for example there and for for okay so you can notice that when I click on the icon the icon doesn't want to CH because every time we need to pass by in state so I just need to remove like the init State I mean all of this very simple and I'm just going to use like current theme directly on the build and Cur theme are just going to watch like the state of the theme and based on that we are just going to change it so if I click on it like this yeah we can see that now our color are changing p is on the team and icon we are clicking on so that's very good um now we are going to CH just um replace the red color I just put there so let just um I'm trying to just find the thing okay good so we are going to use this one primary and second so primary color is for the blue one so like just replace the okay nice so if you want it like this and if we click on it we are going to have so I think now we are done with this part now let's just Del into Gemini and just see how we can Implement Gemini uh AI directly in our app in order to ask him some few question and he's going to reply yeah great so before just try to use gni we are going to add some packages and the first one are going to be Flor do and and this one are going to help us to have some kind of local variable directly in our environment variable that we are going to Define in file and the second one is Google generative Ai and this one are going to help us to interact with Gemini directly based on the key um from Google so uh if you want to have your on key it is very simple you just need to um click on this link and we are going um to just create your own key yeah very simple I will put this link in the description as well and for example we are we just need to create a file. directly in our root our apps rout and just declare for example Google API key key and there we are just going to copy past our key of course I'm not going to show mine but once you just create your own key you can just copy p and replace it directly there perfect now we are just going to initialize flutter. on first of all then we are going to create a function that are going to interact with Google Gemini so before that let just came that directly in main do. file and here what we are going to do basically is just try to add wait that have load for example and just specify the file name you know and this file name are going to be the file. just cre there so um now like just add this one there so we are going to use a weight but we can see that our DOT find just through so before we just just click in the import just make sure to run pubget after you just install those two packages and then try to import the packet itself great let just remove this and once we got like flutter that under these are going to help us to call directly our API key uh with the some tax letter like in our hom page in order to get the API key this is very secure and it will avoid you to get hacked for example by someone so let's just continue and for that what we are going to do right now is to um we are going to create a function so the first function that we are going to create is called uh let's call it like call gini model for example and what we are going to do basically J model and this one we are going to initialize our generative model so the model we just need to specify which model we are going to use and like I was saying we are going to replace the API key just with um the SX let me just okay and this one are going to retry the API key directly great now let's create get the prompt we are going to pass content to there is a lot of feature that you can try to delve in with Gemini model as sending an image for example so I will let you just work on it um by your own and try to use it but yeah what we are going to do we just need to call the model we just declare before or and use the function generative contain and here we are going to pass the content we want and this one are going to fetch directly gini and once we get our response let's just use very simple like I mean we just got one page here so let's just use set State and we are going to add the response get from CH and just write either yeah we just need to pass first on we get this let's put this directly in try catch for example let's say we can just try to print the error for example for ourself yeah great so if I call the function called Gemini um this one are going to work but I basically just want to make sure for example if the um if the user doesn't want to CH to send empty um text for example so let's just verify the text that we get in input there so what we are going to have so if I write for example like a message I'm going to add this message first because I'm a sender and display the message itself and just say yeah hey it is me right so with this line I'm just going to show my own message there and after that I'm going to call um Gemini API and to get response from them and just add um it response and try to show it as under so there and we doesn't need to forgot to just clear the put for example okay so I think we can basically just use this one on our icon after we just click on it very simple so let's just call the function call gini just there and yeah now I'm just going to restart the app okay great so after we just um set or like our do directly in the asset and run our app um now we can just try to test it so for example let's say hey could you tell me to where FL was burn please and let's click on the and yeah you can say that he just replied directly and say yeah flutter was born in December that's very crazy right so we can ask I mean everything we want or we can change the them and say um do you know um the current American president name and he say a CH I then for example like I don't know how to ask him but yeah that's very good now we got um this and I think um we can customize it as we want and we can also try to um create our own prompt but for example let just say um we want to add um a variable that will just our icon are going to change um into circular progress indicator when we want to fit D you know if for example sometime we got like a delay as response from the API so let just add something very simple like this and we are going to use this variable directly inside our function so after we just try to call it we are going to set it through and very simple let just set it as first once we get our response there great and or maybe just there yeah and what we are going to do is just scroll down and for our paring we are just going to do something like is loading I mean if it's loading we are going you're not going to show text of course like but I was just writing it and let's say for example but and let just use S box before and inside Ty box we are just going to add a circular progress indicator hold let me just thank if I go to restart and see hey what's up okay it was fast but we get um we can get our let's say for example let's say I don't want to change this no more just hang out cation hard yeah I'm excellent and I like talking with you you can see that we got our circular button there and and I just dis this so they just try to restart yeah okay oh that's the one yeah it's because I'm on emulator so never mind um yeah so basically we got our but we can remove like those one there and yeah now if I restart I we just got like empty message there for example you can CH something or default um question for example and once you click on that like say hello for example you say hello I'm J language for developed by Google yeah perfect great so thanks for watching this video I hope you learn a lot and yeah see you on the next episode thanks bye

Channel: Flutter Guys

Views: 4,402

Keywords: flutter, flutter tutorial, flutter tutorial for beginner, flutter course, flutter gemini, flutter gemini ai, flutter riverpod, flutter riverpod tutorial

Id: FJUJ9c5u8_c

Length: 83min 35sec (5015 seconds)

Published: Mon May 27 2024