Building A Fruit Rap Quiz App In Flutter Using Google's Gemini AI Model | Unpacking Flutter Packages

what's going on what's good what's shaking what's popping all that good stuff my name is Trey hope you can call me Trey Co though and today I'm going to be talking about something that is very prevalent in the news right now I'm sure you've heard about it and it's AI but I'm not going to be talking about open AI chat GPT I'm actually going to be talking about another AI model by Google which is called Gemini and luckily for me and you they created a flutter package that allows us to incorporate Gemini the AI model in our own app so I'm going to be demonstrating just what we can do with this AI model and see the capabilities that it can possess to make our apps even better so without further Ado as always let's jump into today's [Music] video so like I said earlier we're going to be using Gemini Google's AI model and I thought it'd be a good spin to actually make an app where we're using it so in this demonstration we're going to be using AI to Generate random wraps about fruit so we're going to make a fruit RP quiz app that's a tongue twister but just rock with me okay so essentially it's going to Generate random wraps about whatever fruit we pass into it and then we're going to prompt the user to guess what fruit that this wrap was generated off of so it would be a good way to both demonstrate how to use Gemini as well as just uh set up a very simplistic flutter app as well so before we get into the demo today as always I want to give shout outs to the videos that I watch to get some more insight on this uh I try to make it a personal goal to watch at least three videos of whatever topic I'm about to discuss just so you know I don't go into a completely dumbfounded but uh first I want to shout out akit Madan my apologies if I mispronounce your name but he did a pretty good video where he was building a mobile app with flutter and Gemini so I thought that was pretty impressive very helpful uh shout out to my guy EMT at flutter Atlanta um they had a meet up where they were discussing how to incorporate Gemini into their flutter app uh and that was a pretty lengthy discussion so that was good as well uh there's also a gentleman by the name of Tyler Co he also Incorporated Gemini into like a a game show host type app so uh another good resource there as well and then finally a gentleman by the name of cod per I think I'm pronouncing that right um but he created a floter app as well where he Incorporated Gemini so a lot of these were kind of based around I guess like conversations or or game show type Vibes but they were very insightful on getting more information on exactly how to use Gemini with flutter last thing before we jump into the video today be sure to like comment and subscribe if you haven't already that way we stay connected and I can be sure to give you more content of what actually helps you as a developer all right so we're in our flutter app uh I have have a basic flutter app set up I'm going to just go over some of the configuration that way I can save us a little bit of time so first let me say that the package that we're using is flutter Gemini version 2.0.3 uh published 25 days ago 207 likes 140 pup points and 94% popularity so it'll be perfect for what we are trying to accomplish today so over here in the pspec yo file I have the dependencies that we're using certina icons that's just for basic icons in the app flutter Gemini as I just discussed so that we can use the Gemini API flutter River pod that way um this is the state management that I'll be using for this app don't get too caught up on exactly why this is important um any state management will work but I chose to use River podes because that's what I've been using lately uh gap which is going to help us with some UI spacing between widgets Google fonts which is going to help us change the theme of the app and then L which will allow us to add animations to the app and and I will explain let's see I have L up right now so I just came across L but I guess it's like I don't know how to explain it like lightweight SVG animation type things but as you can see here I have some save for the app but just some moving animations that'll make the app a little bit more uh user friendly so um in my personal opinion I think lot files are pretty pretty cool um I would get the paid membership because the free tier doesn't offer the best options for animations but just keep that in mind that when you go to L files that you might want to get the paid membership to take advantage of some of the best animations that they provide all right so that's the ppec got Yo um within the main do Dart simple setup um we're only calling the normal functions widget flutter binding just to make sure all the widgets um have been binded properly and then a basic material app that has a center that says fruit wrap because that is the name of our app then we have a fruit model because we are going to be using 10 different fruits to prompt the user and each fruit object will have a name a color and a l Builder which is essentially the widget that will display the animation that's cor that corresponds to that fruit and then finally the globals directory which is just all the constant files or uh the global variables I should say we have this array of fruits and we have 10 fruits that we'll be working with apple banana blueberry cherries coconut kiwi Mango Steam papaya Peach and pear and then of course their color and their animations and we also have another one for the fruit baset which we'll be using for like a loading spinner type so that's all that there is for the global setup so we're good there let's go ahead and run this app so far just to see what we have all right we have the fruit wrap uh app loaded up very basic right now very ugly also uh also I forgot to add uh the assets are um the L files are downloaded as Json file so you'll see all these Json files within the assets but all right we have our app loaded up like I said very basic it's just a center widget with text in the middle that says fruit wrap so let's go ahead and add actually jump into the the application so the first thing that we need to do is add API key because when talking to Gemini we need to authenticate ourselves that way um you know just not anyone is using the the API unwillingly uh let's see here so we can go to uh Google AI studio um I'll drop a link in the description but essentially you just want to sign in with your Google profile and then from there you'll go to get API key now you can well you would click create API key I already have one created so I'm going to skip that step but just know it's very simple you just hit that button it generates it and then it says not to share with anyone here I am about to share M with you but I'm most likely just going to deactivate this API key once this video is done but just know that we need to copy this API key and come back over to our app and then we want to add this to our globals directory okay so static const uh Google API key all right and then we also want to update the theme of the app because uh I want to make it look uh a little bit more user friendly so we'll change the theme say theme data text theme and it's going to be uh Google fonts because we're using Google fonts for our theme and there's a cool font that I came across comfor text them I think that's how you pronounce it uh this no longer becomes a con because we are using this class this object and we'll replace that with with a con all right and then last but not least we need to actually initialize Gemini that way we can use it throughout our app so within here uh we'll just go under widgets flutter binding and call Gemini doet uh I need to import it first all right andit and then it's going to ask for API key so we'll call our globals class import that all right import that globals at Google API key and then we also want to turn on uh enable debugging that way we can get some extra information while we're using Gemini all right so that's all we need so far um refreshing this won't do anything cuz we haven't changed the UI yet so that's cool but now we're going to the next step which is creating the demo page that is going to be the actual page where we're hosting the app where everything is going to be happening at so I'm going to go ahead and create a new uh page a new widget essentially so I'll call new demop page. Dart and I'm going to be using River pod so uh I won't get into too much detail exactly the syntax of everything with River pod but just know that it's a state management that will allow us to update the state of the application while we're working with it so I'm going to make this a going to use this actually state for widget even though it's not a stateful widget I'm going to change some things it's a consumer State widget and that didn't work let me try this again State full widget here we go demo page and it is a consumer state for widget and is consumer State here we're going to change the build method as well okay so I know I just did a lot but essentially I'm just creating uh a widget with a state that's using River pod which is consumer state for widget uh let me add my imports back here all right great so now we got that let's go ahead and update the y um we're going to return a scaffold for right now with a app bar and the title will be text widget that says fruit wrap okay now uh let me add this Cass modifier here so now we can go back to the main. dart and actually replace this Center widget with the demo page and add our import all right so now if we refresh cool we got fruit wrap app I'm going to make this text a little B because I don't like how it just looks kind of kind of thin so we say style text style font W on W bold all right cool we can knock that off our list and I'm actually going to move this into the demo page cuz we're pretty much done with the main. dart file for now we'll touch it again in a little bit but right now we're good all right so now we can actually jump into using Gemini so we're going to be using the AI the AI the API for streaming generative content this is when we prompt Gemini for something and it feeds us responses back based on whatever we asked it okay so I'm going to come down here uh actually within the demo page we need to create an instance of Gemini so I say final Gemini equals Gemini do instance uh need to import this instance and then I'm going to create a method a void method called stream generative content okay and we need to create a prompt to ask it first okay so let's just ask it who was the first president so we'll say final uh cons prompt equals who was the first president all right we have our prompt now we can actually call Gemini and then use this method stream generate content pass in the prompt okay and then we'll add this listener on here because we're going to want to be able to know once we actually start getting responses we want to change the state but that's going to happen later in the app but just know right now we are generating responses based off the prompt that we give Gemini okay so that's there uh but in order to display it we could try to create our own widget but with flutter Gemini the flutter package they have uh a widget that displays the responses in like a type texting format so it looks like it's typing on the screen it's pretty cool so we'll be using that so so let's go to the body and we'll create a column with children take that widget out all right and there's a Gemini response type view and it has a few things on here to keep uh or that we're going to be working with so uh if I can get it the format right oh that's what uh right now we just return the container I spell container okay so as you can see here the Builder has a context a child response and loading so we need to watch out for two scenarios one is if it's loading we don't want to really display anything and it's a Boolean so we can do a simple check that says if loading then we want to return a circular progress indicator okay that handles the loading State and let me format this a little bit I can't do that all right next thing is the response if the response is not no that means we actually have a response because response is a noble string meaning that we may not get a response for whatever reason we may have not asked the right question the API key stop working whatever it may be um the response may be null so we're first going to check if it's null so if it's not null then that's when we can return the text of the response okay now if it's not loading and uh the response is no then we'll just return return a size box which is basically just a blank screen for this widget all right cool so we got that widget out the way but now we need a way to actually call this stream generative generative content method so we just add a elevated button below the widget elevator button the on press will call stream generative content and the text will say uh generate all right add the cons there all right cool our button is way too high right now that's because we need to wrap this in an expanded widget to take up all of the room of the column all right and now our generate button is too low so we can wrap this in a safe area widget oops didn't me do that uh wrap with Widget safe area cool now our widget in there so let's try generating content so if we hit generate we got the uh circular progress indicator and then it says George Washington because remember our prompt was who was the first president so once it got its response it now printed it out to the screen I personally don't like how small it is so I'm going to uh make the font size a little bit bigger text oops look a little better all right let's try another prompt let's say um give me a recipe for Thanksgiving without using a turkey all right spinning indicator and once it's ready it'll start spitting out information for us it should all right roasted prime rib with garlic herb crust okay so as you can see we got our response uh the problem is you see that the response is a little bit bigger than what's being displayed on the window we can fix this by wrapping this in a uh single child view uh single child scroll view sorry single child scroll view all right now we can scroll the entire response okay it's a pretty long recipe all right and then let's also add some padding to this because it looks a little a little tight on the edges um I think I will wrap this in the padding first and then the padding Edge insets all 32 all right cool so now we got some padding and we got our responses coming out um on the screen so that's good so let's goe and take this off the list all right so we have some responses coming back but now we want to actually have it generate a random wrap about the fruit like I said earlier it's the fruit WAP app so we want to generate a random WP let's let's have it generate a WP about apples so for the prompt we're going to change this to say give me a short wrap about the fruit apple but do not use the word Apple in the wrap and the reason I'm adding the second Clause of this prompt is because if we're guessing what the wrap was about we don't want the fruit name to be in the wrap itself so you got to be very specific with the prompt that you give Gemini so it says give me a short wrap about the fruit apple but do not use use the word Apple in the wrap all right let's try this and see what we get all right in the realm of fruits I arrange Supreme a juicy ore with qualities that gleam a vibrant Hue a crisp and sweet bite on the epitome of Summer's Delight I hate that WAP but as you can see here gave us about I'd say was that 16 bars if my map's correct but it's producing the wp how we wanted to perfect now since it's a fruit rra app let's go ahead and change this circular progress indicator to instead use the animation that we got from LTE so so I'm going to return instead a globals uh I need to import that uh fruit basket so now when we generate we have this cool animation of bouncing fruit that uh makes the screen just a little bit more appealing to look at while we're waiting for the responses to be generated yeah it's pretty I like L I'm rocking with L all right so we got our fruit wrap prompt and fruit animation now let's talk about how we can kind of modify the prompt to um our liking I guess just add some configuration to it so one of the things that we can do is change the generation config so we'll create a generation config object within the prompt and on the generation config um there's a couple things well there's a few things that you can uh modify but the two that I think are probably the most uh important or the ones that you can um that would affect you the most is first the temperature so temperature represents how random or how specific the responses will be so it's based on a scale of 0 to one the lower the value the more specific and concise the responses will be they won't really uh derive or divy off into another type of rra but if it's a a temperature of one that means we want a different W almost every time very random okay so let's see what that looks like when we have a temperature of zero to begin with so with the temperature of zero it's probably going to be similar reps like I said so we'll see it says yo check get the king of the fruit game going try it again all right taking a little while I'm going to refresh this yo check get the king of the fruit game generate again yo Che get the king of the fruit game let's try it again yo Che get the king of the fruit game all right you see how the wraps kind of start off the exact same and I'm pretty sure that the entire WAP didn't really change too much uh throughout the different bars but if we change it to a temperature of one we should get different responses every time taking a little while so my internet might be a little bit slow with the generation but let's give it three more seconds okay taking too long refresh that generate all right from the trees and Brace I emerged with Grace a juicy orb and then the response I guess had an issue there and in stop let's see what rap we get this time this internet is making it very slow to fetch unless there's another issue here yeah I think uh okay not sure why it's giving that air let's try to generate again give me a short wrap yo check the king of the fruit realm let's try it again green or yellow I stand out in view all right different WP let's try it again y check it is the forbidden fruit so sweet so you see how the bars they pretty much switched up every time we hit the generate button that's because the temperature was at its highest capacity so we're going to get a random response every time all right so that's good we'll keep it at one because we wanted it to be a quiz so we want it to be different for the user that plan and then we can also change the max output tokens and the tokens represent um how many characters are coming back in the response itself so um I believe one token corresponds to like four characters I think something like that and then like 100 tokens represents roughly 60 to 80 words so if we have a lower Max uplet tokens amount we would get a shorter wrap back so let's generate that now uh that was a little too short all right so this is our wrap with 100 Max output tokens it didn't even finish the the wrap but if I were to add 500 for the max output tokens I should get a much lengthier WP as you can see here yeah he he started going in a little bit okay so we're going to keep it at 500 because we want the user to have enough information to actually guess what this fruit is about or which fruit that this wrap is about let's take that off the list now let's modify the safety settings that's another configuration that you can modify on the prompt um similar to generation config um we're going to be passing in the configurations but this one is going to take an array of safety settings because you can have multiple safety settings so let's add our first safety setting uh and choose a category we'll choose hate speech for the category and for the threshold we'll choose block nine Okay so with the categories is a enom but it's four different categories we have uh harassment which is negative or harmful comments targeting identity and or protected attributes we have hate speech which is content That is rude disrespectful or profane um sexually explicit which contains references to sexual acts or other lewd content and then dangerous which promotes facilitates or encourages harmful acts so you can add safety settings for all categories for this WP I'm going to just make sure that we don't have any hate speech coming through and then you can modify what threshold you want the the blocking to occur so if you have block none you'll always show regardless of probability of unsaved content block only High block when there's a high probability of unsafe content block medium and above block on medium or high probability of unsafe content block low and above block when low medium or high probability of unsaved content and then finally uh harm block threshold unspecified the threshold is unspecified blocked using the default threshold so for this uh hate speech we don't want any of it so we'll we'll set it to block low and above block low and above so any type of haast speech that's coming through it most likely will be blocked okay all right so and like I said we can add multiple safety settings so we can add another one for harassment all right now I would try to demonstrate that but since these or RS about fruit we're not really going to have any harassment or hate speech coming through anyways so we can go ahead and continue on now I want to uh create a UI State Notifier because in River pod um since the State Management we want to be able to know the current state of the app while the user is using it because right now when we click generate the view like the buttons is still is acting as if there's no state to the app like it's not loading it's not finished Blas Blas so we're going to create a UI State Notifier that is going to be responsible for listening to changes of the state of the app and we're going to have three states starting out first state is not started that's the first state that we are on the app when you load the app then we have loading which we will use whenever the uh Gemini is fetching responses and then finally we'll have load in which means that all right now we have some responses coming back it's not complete with all the responses but it's no longer uh doing its query so to speak so excuse me so I'm going to create a new folder called notifiers and in here I'll create UI State Notifier Dart and going to create an En for the UI State and we have those three states that I started three states that I stated we have not started loading then we need to create the Notifier we'll call this UI State Notifier and it extends a Notifier from River pod and it's going to be of type UI State because we're listening to changes of the UI State all right let's add our missing override as you can see here it's expecting a UI state so this is the build method is saying all right what what is the state of this Notifier by default when it first starts and obviously you guessed it it's going to be not started so we're going to set this equal to UI state. not started now within here we need to go ahead and create a provider uh the way I try to explain providers and notifiers and I could could be wrong in this analogy but I think notifiers are essentially like data and functions that exist in some other world in another galaxy and it has the information we need but we can't access it because it's in another galaxy but providers are essentially a portal or a window that allow us to kind of put our hand through that window and then grab the Notifier or data from the other world that we need anywhere in the app okay so providers will give us they allow they provide the Notifier okay so I'll create a new file called providers. Dart class providers and we'll make a static uh final UI State Notifier equals uh let see Notifier provider we're actually going to call this a UI State provider not a Notifier all right and then we need to specify what is the Notifier that we're using which is the UI State Notifier and then what state is it managing which is UI state then we need to instantiate the UI State Notifier by calling UI State Notifier new and there we have it now we have our provider and then within the demo page we can now listen to changes on that state Notifier uh youi State Notifier so let me change this out take this scaffold and we're going to instead return this all right so we have the Notifier and the provider created for um controlling the UI state so now we can actually listen for changes to that UI state within this widget so whenever changes happen we will automatically Force rebuild the entire widget and give us the updated button that we want we can do that by creating a UI State variable uh and we'll call ref. watch so we're going to be watching for any changes to this Notifier uh providers dot let me import that provid ersate Notifier provider okay cool and uh something to keep in mind is that uh I went ahead and in between scenes I added the uh provider scope to our app just something to keep in mind if you don't have this provider scope around your entire widget you won't be able to use River pod so make sure that you add that okay so now that we have the UI State uh we want to change um this button to not be that button all the time so we can actually create a function that will return a widget let's call it build button it'll take in a UI State and then oops and then we're going to create a switch statement to go over all the possible states that we can have so for the not started State we want this exact button so we'll just replace this here uh oops return elevated button but instead of generate let's have it say let's get started all right and then for the loading State we don't want the user to actually be able to interact with the button so we'll set the on press to null and we'll just have this say loading and then finally for now we'll let the loaded button uh it won't do anything but it will just say uh loaded loaded all right oops all right now we just need to replace this build button call where we had our button at which was I think right here is that right expanded yeah that's right and then we're going to pass in that UI state that we got from our notify okay oops all right so now when we hit this button let's get started you see that the button never changed even though it should and the reason is we're listening for changes to the state but we're actually we never actually change the state like we need to so in order to do that we just need to go to where we specifically make these actionable calls and update our state so the first area where we would change the state is once we click let's get started so within here we're going to uh still call this stream generative content method but first we're going to call ref. read providers dot US state Notifier provider. Notifier do uh oh we need to update the state so in order to do that we need to go back to our Notifier and add a method that updates the state so come down here just have a void method that says update state it takes in a UI state and essentially what we're doing is we're just saying the state of this class I know I'm saying State a awful lot but we're updating the state of this class to be the UI State that's passed in all right so now in here we can call update State and we're going to set the state to loading so once the user selects let's get started we're instantly going to go to the Loading State and we also want to update um in within the listener because we want to update it state to load it because we're going to assume that once Gemini has responses coming back that the user is ready for the next phase of the question okay so we'll just have this here um for updating it to the Loading load H State all right so let's refresh this and see what happens now when we hit let's get started button turns to loading and then it says load it once it's done okay let's try that one more time let's get started loading loaded Perfect all right we knock that off our list uh and we're actually updating U State as well so now what we want to do is we want to prompt the user to ask them all right what fruit is this rap about and in order to do that we're going to create a text field that will accept the user's response keep in mind that since it's a text field they have to enter the name of the fruit exactly how it is so if it's Apple they can't throw an extra s or they can't lowercase it has to be spelled the exact same way um I'm very strict for this app just for this demo purpose all right so first thing we need to do is create a controller that is going to be responsible a text editing controller that's responsible for controlling the value that is given to the text uh input and then we know when we want to display the text field we want to do it once the app is loaded in the loaded State cuz we're not asking the question before they got started or why is loading so down here in UI loaded we will instead just return a text field I'll add the controller to that all right so we got our text foot down here uh doesn't look very pretty needs some padding so what we'll do is wrap this in some padding Edge inset we just do horizontal all right Edge in sets symmetric horizontal and we'll do 32 and then the child will be that text input text fi all right let's see what that looks like all right so we got some padding there that's good but let's add a few more things um I'm going to update the decoration to be to have an input decoration because we're modifying how the input looks uh let's change the label text to say um let's see what fruit is this wrap about okay you see now it says what fruit is this have about cool and then I also want to change the border so I'll say border we'll give it a outline input border border radius circular of 30 all right it's looking a little bit better now still got our our texting ability good now we need buttons that are going to allow us to clear the text field as well as submit their answer and we're going to modify the prefix widget which is going to be a icon button uh the icon will be icons. cancel and let's see we need to add the on press the on press method is essentially just going to clear the controller and let's make that class as well perfect so now when we type we hit X clears it out for us and we want to do the same thing for the send uh which is going to be the suffix and uh it'll for right now it'll clear as well um but we'll change the icon be say all right so right now all it does is clear when both buttons are pressed but we have it set up how we need to all right so let's knock that off the list now we need to check and see if the input that the user has given us matches the fruit that was selected all right so now up until this point we've been generating a wrap of only apples but we have 10 fruits to choose from so let's go ahead and create a global fruit variable within this class that will be selected once the uh generate content method has been called The Stream generative content method has been called so I'll come up here under the text edit controller uh it'll be a late variable because we don't need a fruit uh assigned to it right now on initialization however by the time we do need fruit we need it to have a value and it will all right so let's add the import and now we're going to go to our stream generative I hope I'm saying this right right uh but now in here we want to assign that fruit to be a random fruit in our uh a list of fruits remember those are these troops right here in our Global directory okay so in order to get the random value we're going to use the math. dark class the random object which will give us a random index or random integer between zero inclusive and the max value which would be the length of the array which is exclusive meaning that it will give us a random number between since we have 10 fruits it's going to give us a random number between zero and nine because the max the value of the size of the array is 10 but that's exclusive so it's going to be one below so 0 to 9 which will prevent any oneoff errors when we're Sig signing a random fruit to the variable so let's say Goals fruit and then random let's do our import oops random random why is not doing let me see random. next in I might already had it okay random. next in and then the max value will be the length of the array of fruits global. fruits. length all right so now we're getting a random fruit and we can now replace the instance or the uh the Apple Tex with the name of the fruit okay and this will no longer be comp because we're using a variable with in here now all right cool let's try this out now and see what type of uh wrap we get so now it's giving us a random wrap didn't generate anything let's try this again all right yo check it I'm yellow and sweet a healthy treat hard to beat shaped like a bolt with a creamy interior um perfect for breakfast or a fruity Elixir I'm guessing that's a banana all right so and we can check and see we can cheat real quick let's see here uh let's see the API call said give me a short W about the fruit banana but not but do not use the word banana in the wp all right cool so we're getting a random fruit now we need to check and see if the input that the user gives us reflects the actual fruit that's there so within the submit method here on the set method still going to clear the field so we'll put that back in there however now we want to say if controller. text equals fruit. name debug print correct that means they got the answer right otherwise we'll say incorrect all right let's get that terminal back open so we can see this all right so now we know it's banana so I'm going to type in banana hit send it says correct all right now I'm going type in something that's not correct potato which isn't even in the list and we get incorrect spell that wrong all right good so the check is working perfectly so we'll take that off the list now I want to instead of just the debugger can print correct and incorrect but that's not user friendly the user has no idea what's in the debugger so let's go ahead and create new states that will represent when the user is correct or incorrect on their guess so let's go back to the UI State Notifier and in here I'll add two new States um correct and incorrect all right now since we added more to the enun value our build button method is uh giving us some issues because it doesn't know what to do when those two states have been reached so we'll just exhaust those last uh States down here at the bottom I think you put at the bottom oh ad missing closes okay there we go and the thing is when we're either correct or incorrect we don't even want to display any buttons at the bottom we want to change the entire screen so what we want to do instead is for this method uh we just want to return a size box no matter if they are correct or incorrect we just return uh a size box which is like I said a blank screen all right cool and then within the build method of this widget we can check to see if we are correct State equals UI state. correct so if we're correct we're just going to return a center widget with a child that says correct all right uh add the comp here and we're going to do the same thing when they're incorrect but we're going to say incorrect all right let's refresh this and let's see we are updating the state we hit send oh now we need to like uh we did previously we need to actually update the state so we'll do that within here instead of printing out correct or incorrect uh if the control. text equal to fruit. name we go to the correct State and if not we go to the incorrect State all right so let's try this let's get started all right crystal skinned and sweet to the core a juicy treat more than you adore smooth as silk a delicate Delight dripping with nectar oh so bright Apple's cousin I'mma guess H that's tough a peach no I'm going to say a pair correct all right cool so we got the correct one on that one let me try giving an incorrect answer so I'm going to type uh we don't have watermelon as an option so I'm just going to type in watermelon watermelon incorrect oh I'm spelling these wrong today but oh well you get the uh the picture so we're going to the states properly so we can take that off our list now and the last thing that we need to do is we need to make this a little bit more visually appealing so let's actually display some cool UI when they're in either correct or incorrect States so we're going to uh create a widget that we use that will let us know if the user's answer was correct or not and then display some information about their answer so we'll create a new directory called widgets new file called uh result view. Dart CL result view extends a consumer widget just rip the pot stuff don't worry um override and right now let's return a container now the result view is going to need two things like I said it's going to need to know if the answer was correct or not so we can create a Boolean value called correct and then we also need the fruit because we need to know whether they're right or wrong what fruit was actually the one that they were trying to guess so final fruit fruit okay do our import and then add our Constructor and then we need to require these when they're pass in. all right should be good there take this Frame so all right and then in here let's replace the Center widgets with our new widget result View and the correct value for the correct state will be true and we'll pass in the fruit or whatever it is at the time and do the same thing for the incorrect state but correct value will be false all right so I forgot which state we were in but as you can see we got this little pink Square not exactly sure why a empty container displays this but uh let's go ahead and modify this container uh we want the height to be as high as it can go and the width to be as wide as it can go and let's let's say the color is let's just make the the color of the fruit so fruit. color all right so uh I forgot what fruit I selected but Brown is clearly the color associated with that okay so now that we got that in there we can actually modify the colors a little bit to say all right if we were correct we want to see the color of the fruit that we picked right but if we're incorrect we'll just display a red background to represent an air So within here we just say if correct show fruit color otherwise show colors. red all right so we were incorrect on our guest because we see red here okay all right uh what else can we add um let's add a child let's add a column uh let's actually add the fruit animation from L okay uh so we'll say fruit dot [Music] L all right cool so we were on coconut it's a little too high for me so let's bring that down change the main axis alignment to Center all right perfect now it's in the center now let's add some text that says all right uh we'll say bingo if they were correct and then sorry if they were incorrect so let's add a text if correct say bingo otherwise we'll say sorry with a sad face all right and we need to add a theme to that text because right now it doesn't have any styling so we'll say style equals steam. of context. text ste. headline large all right cool and I want that text to be white actually so I'm going to do copy with color color. white and then make sure to add the exclamation point here because headline large could be known all right perfect says sorry uh let's add another message here that will let us know um if they were correct we'll say um you picked fruit name whatever it is and if they're wrong we'll say uh the answer was fruit name okay looking good that text is a little too big though so we'll try headline small all right cool now let's uh add some space we'll use that Gap widget that I talked about earlier um the cool thing with gap is when you're using rows or columns in flutter typically to add space uh in a row since it's horizontal you would specify uh a size box with a width or if you want to add a space in a column you would uh specify a size box with some height but what Gap does is you just specify how much space you want and it can automatically determine whether it's in a row or column widget so it just saves you some boiler plate code so we'll give it a gap of 32 and then we'll add a button at the bottom that will allow us to restart the app and try again so what this is going to do you guessed it we're going to update the state so ref. read providers import providers. State Notifier provider. Notifier do update State let's see here Ur state do um not started let see here oh I got to import that my state do notot started all right let's let's see here what it complain about oh the child and it should say try again think that's right do I have it right oh I think I added too much on there okay that should be good all right cool answer was coconut so let's try again uh let's try a new one yo listen up is the sweetest fruit of all a juicy crystal explosion that will make and then it stop generating for whatever reason I don't have enough information to go off of I'm going just say banana all right sorry the answer was pair try again all right we going to get one of these right uh yo check it all right that's not enough let's refresh this we'll take this off our list as well all right let's get started all right um I think it's something with the internet that's making the response is a little bit shorter right now maybe it's not fetching it all the way like thring it air so we going to do a little cheat real quick um make a wrap about Apple so we'll type in apple All Right Bingo you picked Apple's try it one more time with another fruit uh we're going to do is that Peach yeah Peach Bingo you pick Peach all right cool so I'm not exactly sure I I I need to do more research on that but I'm not sure why the respones kind of just stopped like that I feel like there's some type of error with something or I don't know if it make my safety settings or what um but uh you get the gist of it this is essentially how you would make use of Gemini um for this app let me try typeing banana one more time bingo you pick banana all right so like I said that's how you use Gemini and create a simplistic flutter app with some cool loty animations to go by his side so that is essentially how you can use Gemini and incorporate it into your flutter app specifically of course it's a standalone application so you don't even need flutter to use it you can just head over to um I forgot the exact URL but you can actually just mess with the prompts yourself but if you do want to incorporated into flutter use the flutter Gemini package is very helpful um as always I hope this video was helpful as I said earlier please like comment and subscribe if you haven't already as I plan to just continue to dive more into different topics especially things that interest me um like AI so I'll keep doing demo projects like this um keep learning keep growing you know what I mean so as always until next time this is try codes signing off have a great rest of your day

Channel: Trey Codes

Views: 1,161

Keywords:

Id: Ju_YUEhQ6Ig

Length: 51min 4sec (3064 seconds)

Published: Thu Mar 21 2024