Build AI Mobile App with Flutter and Google Gemini💜

hey there this is akan welcome back to a new video and as I promised that I'm going to bring AI apps uh development projects in this on this channel and I'm fulfilling my promise because I am back with another beautiful video where we are going to learn how can you build AI applications using flutter and this Google Gemini Pro API right so uh I am fulfilling my promise and I hope you are also fulfilling your promise that you have to code along again I'm telling you in this video that you have to code along don't just watch this video you have to code along with me right otherwise you won't understand anything right you have to code along with me and one more thing I would like to give you one suggestion for watching this video that don't watch this video as a whole right watch this video in Parts this is this video is going to be long and it is going to be full of uh speed Breakers and a lot of things right that can actually make this video boring so you have to watch this video in parts right and one more thing there is a package also right flutter gini package also there is it is there and you can also directly use this use that package and build apps no need to understand this whole thing that I'm going to make you understand in this video right so I'm not going to use that package in this video we are going to do things from the scratch I'm going to tell you how can you use a gini API itself right if you use the package then it's of no use right you you will learn abstracted things you won't understand how the things are getting done in the back end which API is getting called so my motive or my purpose of making this video is to to teach you those apis whichever apis are there there is Google gini pro API and there is Google gini Vision API which helps you work with images right so that is my suggestion that uh it's okay if you work with package after watching this video but just for this video focus on the apis and focus on the implementation part that is very important for this video okay and before we move forward I'm very very happy to announce a new course that I'm launching it is not on flutter it is on Full Stack mobile app development that means with flutter we are going to learn nodejs expressjs uh typescript language then Postman for API testing and render for Server hosting right so it is a full stack course and it is already out I started teaching here the back end part is completed front end part is starting today so I'll recommend you to uh enroll into this course as soon as possible because discount is limited to number of seats right and with this course uh even if you don't purchase this course I would recommend you that you join my community it is at AK shit. rp. Club link is in the description you join this community where we are uh discussing a lot of stuff regarding flutter backend full stack jobs then we have a special chat where you can chat with me directly so I'll recommend you that you still join this uh Community it is free of cost and then if you feel that you require this course for full stack development then you can enroll but otherwise the community is free of cost okay so without wasting more time I think we should now get back to our work that that is that we have to play with this Gemini so first few minutes first few uh like half hours half an hour or 45 minutes I'm going to invest in playing with this API so that you know what is exactly inside this API and then we are going to think like what kind of app we have to build right okay so this is the website right deep mind. google.com directly scroll to the bottom it's a very beautiful website I was just amazed to see the animations and the look and feel of this website it's very beautiful right in at the bottom you're going to get this link ai. gooogle dodev right just go to this link right and here you are going to get two buttons read docs it's your choice if you want to read docs and you can just keep on watching this video I'm going to cover almost everything that is this inside this gini right okay now click on not this docs we are interested in getting the API key in the Google AI studio so if you have worked with openi you know about openi playground right similarly for Google gini we have uh this uh makers. google.com which is kind of an AI playground to work with or to play with Google Gemini right Google gini or Gemini I don't know uh I call it gemini or sometimes I call it Gemini it's your choice right it's your life it's your choice okay okay perfect now on the left hand side I can see some uh menu uh and here I have some buttons getting the API key which I click and I can see my own API key which I created for just testing purpose in your case you won't see this API you have to create your own API key for that you have to select an account or a project in the Google Cloud right gcp Google Cloud platform so uh you can just create a simple it's very simple right I don't teach that because it will become the video boring it will make the video boring right so just have to click some buttons and your API ke will be ready so this is my API key I would recommend you to create your own API key right so this is my API key now let's get back over here I can see uh create a new a bot which what I can say bot or a prompt or a kind of a playground so I created two Bots which is space bot it uh it is trained on spot uh like space data and I have the space playground so I was trying stuff before watching before creating this video so this is just a playground we are going to create a new playground don't worry about it okay so now below that I see uh certain buttons that is like getting started and all so getting started again it it is going to take you to uh the docs documentation is there then prompt Gallery it is very important guys please check this prompt Gallery it is like full of uh resources you can see some readymade uh prompts are there some rade playgrounds are there recipe Creator object identifier so if you want to take references go ahead and play with it like I I won't play uh in front of you because uh I I want you guys to play uh yourself right play with this Google gin uh playground it's very beautiful okay now let's get back right and now let's try to explore the right hand right hand side section first of all we get model it is drop down and in this model we get like uh two options one is gin BR if you want to work with text and gini provision if you want to work with images so if I select this then you can see I can work with images right temperature so if you decrease the temperature your Bot is going to give you or your AI model is going to give you certain answers it is not going to experiment things it is not going to give you creative answers but if you increase the temperature if you increase this temperature then you are going to get creative answers so increase the temperature whenever you are building some uh poems applications or stories application where you want creativity from the model but if you want facts the real data the factual data then you can decrease the temperature so that model returns you the true data and it does not experiment things right below that in the advanced settings we have this top K and top p uh you can see output length uh like how many tokens you want in the output this is output length then top top K and top p i want you guys to uh find out the meaning of this top and topy and put it in the comment section right just need to go on chat gbd and like ask it what is top key and top in llms right large language models and it's going to give you the answer right so experiment these two things I have told you what temperature is that most important part is temperature only okay so this is how the Google AI playground looks right now let's try to do some stuff with um text Data like text prompts so how this video is going to flow first of all we going to uh try this prompting in the space playground itself and then we are going to clone the APS in the postman and after that once the API is the image API image analysis API and the text API is working then we are going to uh start with a flutter application so I hope you are agreeing with me that this flow is correct and till now if you are happy with this video just write I'm happy in the comment section okay okay perfect okay very good and if you have any doubts regarding the course which I just launched put it in the comment section I I'm happy to answer okay perfect now let's try to create a new playground so you can see if I just click on view all yes I am I'm having unsaved changes so I have these two playgrounds okay don't worry about it let's go to my library or create a new uh uh it will be free form prompt I just want a free form prompt okay and I can see a new Untitled prompt here I am after coding the one thing that I like is space so again I am going to create a space playground and the app which I'm going to build will also be related to like space or uh universe or something right so you are free to do anything if you like history if you like Harry Potter just go ahead and create a Harry Potter bot it's your choice right it's your life okay perfect so over here I'm going to create a space playground space AI playground space AI playground right no description it's not required and over here I'm going to ask it a question uh how or what is uh or can you tell me can you tell me some something about Andromeda galaxy Andromeda galaxy galaxy perfect now at the bottom uh if it is visible to you at the bottom you see this run button right so just click on this run button and wait for the Gemini to uh create some answers you can see it is super fast it has started generating the responses so all the blue part which you can see it is all uh the generated response and it has given me a lot lot of factual data about uh androa Galaxy right again you can decrease the temperature because here I want facts I don't want creativity right perfect so this is good this is very good right now what I can do is I can uh click on this text uh not text it is test input uh not test input I would like to create click on get code because I want to see the curl request I want to see the API request so that I can actually clone this request in my post man so if you click on get code you are going to see some uh things like curl then JavaScript python Android then Swift again uh if you want to use packages so you can see in JavaScript they have used this Genera VI package python also they have used this Genera VI package package again package package package for flutter also we have a package search for flutter G you're going to get a package but again the purpose of this video is not to teach you how to work with package package anyone can code with the purpose of this video is to teach you the depth of this gini Pro API so that you can code any kind of app right you not dependent on in package perfect now let's click on this curl and over here I can see first of all I need to get an API key which is right and over here I can see it's a post request this is my endpoint content type will be application Json this is my body so request body if you have not watched my HTTP Basics video do watch it it is very important if you are like any developer web developer app develop anything you need to get like you need to know about the basics of HTTP package or protocol all right then you have certain things so what is this temperature I already told you then over here safety settings you are having some things which are set right so block medium and above block medium and above that means the uh prompt or the generated data which I'm going to get from Gemini should not contain any harassment uh things like right because I'm not creating any bad app I'm creating a very good app which is going to give you facts about space so it should not contain any harassment it should not harass any person or any Community again hate speech it should not generate sexually explicit cont should not generate or handle then dangerous cont should not contain so anything that is marked medium and above should be blocked by this uh model right so this kind of data I don't want from my model to be generated perfect so this is my curl request now what you can do is uh so this was like free prompt right this is free form so if I click on chat prompt uh yes I have un changes that is fine so over here you can set like user or model right so two three things are there there one is your user like me you and all model will be the model the mod the the AI model which is generating some content okay perfect now I'm going to write something here uh so that because I'm creating kind of a chat app right not a free form app I'm creating so that's why this is necessary so what I'll do is write something the user could type right so as a user I'll say uh can you tell me something about Andro meta Galaxy now we are taking the shape of a chat chat app right so this is kind of a chat app now if I just click on build prompt now you can see it is kind of working as a chat right because over here I can see my data then on the uh left hand side I I can see the generated data that's how chat app work right on the left hand side you on the right hand side sorry left yeah on the left hand side you have the generated data on the right hand side you have your own data right okay perfect uh yeah so I can see uh very good response it has generated right so that's what I wanted now what I'll do is I will try to clone this API request in Postman okay so this is good now I can write another data the model response the users input okay so what is this uh session okay that is fine that is fine okay we we need to work over here itself right so if I just write another question that is how far how far is it from Earth now You observe one thing I have not uh explicitly defined that I'm talking about androa Galaxy I I have written it so what it does is whenever you are working with chat then it not just takes your current prompt it also takes your previous data whatever you are you have been chatting in the chat app like this generated data the previous question and all so now it knows that I'm talking about androa Galaxy right so if I am just writing how far is it it is going to understand that it means the androma Galaxy right so that's the beauty of the uh llms right it it knows the previous data also now if I just click on send it is going to generate the and Galaxy is about 2.5 million light years away from the earth right so now it knew that I'm talking about the androma Galaxy right so this is beautiful this is really really beautiful I loved it okay perfect now again uh it's time to see the code so let's click on get code and over here I'm going to click on curl right in the curl you'll see I'm I'm making a post request right it's a post request then this is my end point this is my whole end point and at the end I need to insert my API key content type is there equal is there then you can see contents in the contents I see the role user can you tell me something about this was my question then again in the contents I have again a message uh a model which is generated by model it is not my uh data it is a model generated data so this is the whole response that I got from model then again after that I asked asked one more question how far is it from Earth and then again the model generated one text right now that's how things work like that's how um this gini API works now it's time for us to go to postman create a collection and clone this text generation API right so let's go to postman so this is my Postman I already have some collections but I see one empty collection that is gin API so I uh I request you to create your own uh collection gini API in the postman Postman is a very simple tool again I've covered this Postman in my premium course if you want to buy it you can if you want to learn about Postman I I don't recommend you to just for learning Postman you buy my course Postman there is a lot of open uh and free content out there just watch a YouTube video and you'll know what is Postman simple terms Postman is just an API testing tool okay perfect now over here I've created a collection I'm going to click on add a request so this is just to clone your apis or test your apis right so this API is going to be a post request and I have to save this now I have to enter the Endo so just go over here and copy this Endo okay copy this endpoint go over here paste this endpoint now you see as soon as I paste this endpoint in the parameters I'm having this key it's an API key so I'll go over here I'll click on Cut I go to uh get API key I'll say okay and I'll copy Cy this API key paste this API key right over here save it okay now go to body and now if I just go back and I lost my data so I'll again write something like uh how what is and or where is androma Galaxy where is Andromeda galaxy I'll ask this it is is going to generate some data it has generated now let it generate right and now I'm going to click on get code and now I'm going to C go to curl and now I'll try to copy this uh body so starting from after EO you have this quote and you have this curly bracket just start from that Curly bracket and go to the end of this curly bracket okay so now I've have reached to the end I I'm just going to copy it click on Cut go back in the body uh you have to uh in the body I think it's not visible let me decrease is it yes okay so in the body uh go to this and click on uh this raw body right and this text will become Json right because you're passing the Json request body okay now let's just paste that data right over here okay now as soon as you paste that data you are going to see that I'm having this role uh in the contents right in the contents you have certain models so this is my first model this is my second model this is my third model right so these are the models now first model you see it is a user generated model second is model generated model third is the user generated model and over here you can see in the text I can enter a input right in the input I can ask any question which I expect the model to answer so this is good right I'm I've entered my AP ke and I'm all set so let's try to write a question here uh so I'll write how far how far as androma Galaxy from Earth in uh kilometers okay that's a very uh rubbish question but let's try to hit send I want to get the response back okay I'm expecting a response back let's see let's see okay beautiful I got some candidates this is just a model right we are going to make a dart model of it don't worry about it we got some candidates in the content I can see content part then I'm having some parts right so this is this is this is this is part that is generated andx is 2.5 million Li liers away to convert this distance to kilometers we can use following formula and there is some formula formula that have been given okay so it has given me the uh and you see it is a role and a model so in the output I got one response I got one part and I got one um model which is a model generated model like model generated output now what I can do is I can take this model I can take this whole model and you can you see over here we have to continue the chat right the whole purpose of this app is to continue the chat in the parts uh in the parts okay wait wait wait wait wait uh the role is there the contents is there this is my content then you see the rle yes in the contents uh after you see this is the first content this is the first question that I had ask this is the second model or in the list and this is a model generated thing this is the third thing right this is the third model I have to insert the fourth thing which will be the response which I've got right the response I've got and then I have to ask my question which will be the fifth model in the list that's how the chat is going to get continued I hope you got it now let me just save it now let me just save it because when I'll be working with flutter I would want all of these apis as resp responses one more thing one more thing just watch it I I need to save this example so just click on Save exam same save as example right so just click on this save as example this is going to save your example name this API so you see new request call it as text generation text generation with gini with gini chat text generation I would say chat generation with ap uh gini okay perfect this is beautiful okay uh I think I think let me just save it also copy it okay let's just rename this okay no no no no something is going wrong I'll say chat generation with gini perfect now you know how to build a text chat app now if I if you know this API that and you know how to work with API in flutter you can go ahead and start building your text chat app the now the main part image how to work with images in uh gini so let's go to again let's go to uh playground AI playground right and over here you see um okay just a second what I have to do now is add a new text no no no so now I have to work with okay okay okay got it so what we have to do is for the image uh for the image I think we have to because in the text chat I'm not able to find the image right I'm showing you how I'm thinking about it so what we can do it what we can do is for the images we can use the free form right it's not stopping us right we can use the free form and we can build because in the if I just do this chat thing right in the model I'm not able to get the vision API I want the vision AP to work with images so that is fine not a not a problem nothing can stop us building this application right so let's go back let's go back right let's click on create new free form prompt let's click on free form prompt and yes it it it is fine if it is not saving because we have created a postman collection now we are good right no no problem over here we can see Vision API so let's click on vision and now I can select the image right let's let's just image so this is my image okay so let me select my own image let me select my own image why is not selecting what is going wrong here uh why okay it's it is selected now okay so this is my image right this is my image and now uh like above this image I'm going to ask a prompt who is in the image okay who is in the image who is in the image okay who is in the image now I'm going to click on this run so let's click on this run and temperature I want it to be full be full creative right insert me whatever you want to do do with my photo I'm okay with that just click on run and let's see what we get I want very creative answer right that's why I have increased the temperature so let's see what we get let's see okay the image contains a picture of an Indian male okay why how did it know okay Indian male wearing glasses with short black here who is looking into the camera his name is Shivam why my name is not Shivam my name is AKA okay so I'm going to say to it below that uh but he's akit he's AK he a but yes he's a proud Indian yes he's a proud Indian he's a proud Indian okay uh can you think about his expertise his expertise and I'm I'm going to just give it some uh hint okay expertise he likes he likes building apps so what can be his expertise in okay let's just write this much let's write run okay let's uh click on run and now I'm very excited to see the output okay as an Indian guy who wears glasses and likes building apps a a software engineer okay that is fine that's a good answer I wanted it to generate like uh Hey can be good inflator or reack native but okay that's a very uh smart answer he's a software engineer okay fine I'm I'm happy with this output right okay perfect so that's how you work with images you can give multiple images too that's not a problem Okay now click on get code and click on curl right over here you see this post request right again it's a post request but again over here you see it's a gini Pro Vision model we have selected not gini pro below that you see contents then Parts this is my first part that is my text then this is my next part which is the uh inline data in the inline data I'm having mind Type image is a PNG so image/png then you have to pass the base 64 encoded data of your image I'll tell you how to do it don't worry about it if I'm here you don't need to worry about it I'll give you everything okay so text again the image contains a picture of an Indian mail this was a text which was generated and after that I wrote some uh data so in like what happens in free form in chat we had like user model user model user model right right like a chat app in free form it's not like that in free form it is going to consider as a chunk whether you created that data or model created that data it's a single chunk okay so that's the beauty of this free form so it has combined all the text so it is just about images and text right so if I had inserted one more image so after this text you have this one part as image it will contain it will just copy this and paste it and put another image then text okay text it is not going to distinguish on the basis of who create who wrote that text or who added that image okay now let's go to postman over here in the jini AP I'm going to add a request image analysis with gini Gemini or gini I don't know okay it is again a post request save it let's put the end point uh let's put the end point let's copy the key from here parameters this is my API key perfect perfect perfect okay now uh we need to go to body let's go over here and again let's copy the whole map of the body click on draw this will be Json and paste that and reduce the size of this response window this is my text and this is my image this is not enough okay uh this is not enough yes why it is not enough because we have to code this image into B 64 right so what I'll do is I'll go on internet right and I'll search convert image to base 64 just search about it and you will get this uh link base to image to uh B 64 just click on it not this I I I like this website base 64 image encoder right over here you need to drop your image right so just click on it and so this is my this is my image just open it so this is going to generate the data which of your image which will be Bas 64 encoded so just click on show code and over here you see this uh data right base 64 and all and all and all so this is my whole data so just copy to clipboard right go back to postman and over here just remove this whole data which is currently there paste your Bas 64 data right and one more thing one more thing one more more thing over here at the top image/png that is fine and you need to remove this thing also you need to just put the data so just remove this thing and this is your base 64 inut very important guys just focus over here otherwise you'll get a lot of issues in the post man itself you won't reach the flutter stage so just think about it right just focus over here so data this is my base 64 inqu data image/png is my image perfect and below this uh data below this data I'm having I'm having the text the image contains a picture of the Indian mail and I'm going to remove uh I'm going to remove this text right I'm going to remove this whole part because I want this uh thing to generate about it I asked I have asked I have asked a question at the top who is in the image and I have put the image that's it now I want this uh API to generate the uh response so I think I am good let's just save it and let's hit send let's see what we get okay thinking thinking okay I got the data this is p I'm not P I'm I'm akit okay this is p if any p is watching this video uh do you look like uh me okay so just tell me in the comment section if you look like me so this is p uh who runs a popular YouTube channel P Sharma okay where he uploads Tech and photography related videos okay okay I am now curious to go on YouTube and uh search about P Sharma okay let's go to YouTube and search for PE Sharma okay P Sharma blogs does he look like me no guys he doesn't look like me okay okay that is fine that's interesting uh I think it did some Google research uh Google search and then found the matching images or something but yeah yeah this was interesting guys this was interesting to know okay I'm lost now okay just a second yes perfect okay that is fine right this is p who runs a popular YouTube channel P Sharma where he uploads Tech and photography related videos okay perfect so that means our image analysis API is also working fine and now we are now we have worked with text generation uh chat text generation and image analysis I hope you're liking this video and this is quite interesting right this is qu this is very interesting right so let's just save this also as an example and let's just save this whole API now I think we are ready we have seen how to uh work with these two apis and we are very good right we are good to start with the flutter app right so guys I am on vs code now hit command shift p and let's start building the new flutter app okay so I will say flutter new project and I'm going to name it as what should we name it this is going to be a space app right this is going to be a space app and what should we name this app okay so in the desktop I'm going to create the name should be let's say space in space tension or space wars no it's it's boring space f okay okay space pod the name of my app is space pod okay spacep okay perfect if you're creating a Harry Potter app or if you're creating any other app just be like creative and give it a very unique name okay and put it in the comment section don't forget to put in the comment section whenever your app is working take a screenshot put it on Instagram story put it on LinkedIn tag me right this is going to increase your reach also this is going to show to the employees that you are working and you are building projects right tag me I'll repost your post okay don't worry about it okay perfect okay let's get started this is my blank app nothing here right in the lip it's nothing let's create a project structure so first of all I'm going to have Pages then I'm going to have uh repositories right which uh will contain a network specific API calls then I'm going to have a block so I'm going to create right click uh yes we have to say uh we have to go over here in the pub. EML and we have to add the dependencies I use block I love block block and you have to add flutter block let's just save it okay we have added the block now let's go over here I'm not able to see create a new block so I what I'll do is command shift B and say uh flut a new block now we have to give it the location so the name of the block so name of the block it is asking I think it's not visible to you but it is asking me the name so I'll say uh chat block so it will be it will be chat block so chat and now the location where I want to put this block so desktop then I'll go to my space pod then lib inside the lib itself I want to create a block okay so you see see this block chat block now uh let's go to pages and let's create a file which will be uh home page do do okay in the main do dot let's just remove everything and let's uh import material. dot let's say we void main first of all Runner new my app stateless widget my app return a material app and obviously because uh yeah first of all give home go to home. do create a state full viget called home right homepage maybe right go to main. do and give it like homepage and over here in the homepage below that just give it theme so theme data I want to create a dark theme because it's space related app so obviously we'll keep it dark theme so brightness brightness. dark right scaold background color I want to keep it colors. gray do shade 900 right then primary color of the app I want to keep it colors. d purple colors do dle okay which color should I take I think do shade 300 is good dot d purple the purple do shade 300 this will be my primary color okay and and I think what what should I do now is bring some images right first of all let's run this in the home homepage do let's go and r a scaffold okay let's go to Main and let's so iPhone 14 emulator is on so I'll just hit on go on this run and ebug hit run and debug let's wait so running till then what I can do is I can go on to internet and search for some space wallpapers so that at the background I can put this uh space wall I think this this is really beautiful okay let's just save this image in the on the desktop itself and let's call it space BG uh let's give this the name so it is going to download that then I think this is good now let's go to LTE animation LTE animation uh get started okay let's search for space loaders okay so loading effect I want one so where's the search is it because this is going to search in my workspace I mean why they change the UI every time I don't like that okay so create animation upload animation let's search here space wall not wallpapers space load loers okay no result found the below we have got something but they are like premium animations I won't get a premium animation instead of that if I just go over here and say lot files.com yeah over here I can search space loaders okay let's see what we get okay these are good these are good these are good I think when my text will be like when my gin will be taking time to generate response right I want to get one loader for that stage that's why I've come here I think this is good this is unique let's try to download this this loader is okay so let's download this okay save to workspace and now we need to get the LTE package also we'll use a LTE package okay so download yeah it is save to workspace now what is it want okay let's go to my workspace um a workspace here is it click on download as and I'll be downloading it as not JF not MP4 L Json yes Json we want so this is my uh animation right now let's get back to our app and let's create a folder in the root itself let's call the folder as Assets in the assets let's track that animation into the assets let's rename this as loader. Json okay perfect one more thing that we downloaded was the wallpaper so let's bring that space okay so this is an AV if let me just rename it to jpg if it is possible jpg okay that is fine it's working okay okay perfect now what I'll do is I'll bring my app uh let me just I think it is not visible to you but let me just bring it up where is my emulator running yeah it is right over here right so let me just bring it to our app like where we are working so we are working right over here space pod and let me just put it right over here right and let me remove all the apps that are running in the background okay perfect this is my space pod app it is in Dark theme perfect perfect I like it okay now what we can do is in the scaffold right in the scaffold let's just put uh body container child container is now going to have a decoration box decoration then it will be having an image decoration image image will be an asset image but first of all we need to go to pope. EML go to Pub .eml and over here just uncomment this assets and we need to get everything that is inside asset so assets slash save it now we to homepage over here just say assets slash uh space bg.jpg and then you need to have fit fit will be box fit dot cover right now you need to put the container height and width okay let's just save it okay child child child we need to put a child child will be again uh column okay let's just save it let's see what is the issue so let's just increase the size okay yeah we need to give it a height and width so width I'm going to give it double dot Max finite and height also if you're building uh an app this is just for demo po that's why I'm not using screen util but if you are building the app for production where you have to publish this app on play store and App Store yeah please use screen util that will make your apps responsive okay double. Max finite I'm going to use perfect you can see this is my application right uh one thing that I wanted to do is give this image some opacity because I don't because now I cannot okay I think that is fine I think we can adjust it I think this is good this is beautiful that's enough app should be beautiful if your app is Beautiful downloads are going to come right even if you just make a Todo app if it is like super super Beautiful downloads are going to come that's what I've have observed okay column first of all what I'll do is that's how I'm planning the app over here I'm going to have one button which will be image button if you click on it you are going to go on image chat screen over here this will be by default the text chat screen at the bottom there will be one text field right you put your prompt here and here the messages I going to show right I think this plan is good let's do it the column first of all children okay so children now what I do is uh first of all I want a container height as uh 120 right you see this after this I want expanded expanded uh I think it should be list view so list view because messages will be in list so list view then below that you want another container which will again be having a height of like let's say 160 and this will again be having a color of colors do blue okay so let's just save it I think 160 is too much I think 120 is enough okay 120 is enough now let's draw this text field right over here okay again I'm not going to give this height because I want it to be dynamic okay so let's just do that now in the below the container I'm going to give it child child will be row child will be row right in the row I'm going to give it children in the children it will be expanded text field expanded child text field okay save it this is my text field right in this text field let's just close this yeah text field then let's just decorate this text field okay so let's put decoration input decoration uh then will be border outline input border okay let's give padding to this container so this container should have like padding of constant ENT sets dot symmetric from vertical it should be 12 from horizontal also it should be 12 let's just save it from horizontal it should be 16 actually so 16 okay I want it to be rounded text field so decoration outline border then it should be border radius border radius Dot Circle 100 maybe okay this is now circular okay now I'll give uh it f focused border focused border so Focus border will be below that Focus border this will want an outline input border outline input border then the color so when I like select like click on that text field I I want it to be focused now what uh color I want it I want this text field to take when it is in Focus state so border size Border Side and Border Side dot Border Side it will take color theme do off I want to take the primary color so theme dot okay yeah theme do off context dot primary color I think primary color is good I was thinking that okay primary color is good and yes the Border radius again Border Side okay so it will want border radius border radius do circular 100 okay now let me just give it a fill color okay so fill color colors. white right let me just do do that and fill will be true fill will be true let's just save it yes you see that and now let move this color and height move this color and height okay now I'll increase the vertical padding to 30 okay it is now looking good I can put okay it's white why it's white why yes because our brightness is uh dark so by default if your brightness is dark uh the icons and colors I can send uh text colors automatically become white okay so over here I'll give it like style that is going to come over here style text style plus. black cursor color I'll make it again theme. off context text. primary color okay let's just write anything and you see I'm able to write it perfect now what I'll do is I want a send button right over here right uh on the right hand side of it so after this expanded I'll put constant sized box width has 12 then I want a circle avator radius I want to keep it 30 for now let's see what we get and I will give it some color so again color will be theme do off context primary color I'm not liking it I'm not liking it I'm not liking the color scheme let's go to main I want it to be more dark right I think dark black would also look good it's not necessary that we want this purplish itself colors Dot gray do shade 900 maybe but it's not visible we can give it a outline let's do it Circle lator wrap it with another Circle avator okay wrap it with a widget again a circle avator give it a radius of 34 give it a background color of colors. white you see that 34 is very big big I'll give it 32 looks okay not very satisfied but I think that's good okay you it's your choice man it's your life it's your choice you can uh color it as you like I'm still not very satisfied but I think it's it's fine okay okay now uh at the center I want an arrow icon the send icon so I do is child Center child icon icons. send send an AR no send and I'll give this send color white colors. white so if you design better than me take a screenshot put it on LinkedIn and tag me hey akit I have designed better than you okay just do it okay so this is the uh send icon I think it is fine I think it is fine for now okay now after that we need a image icon right over here so if I click on image I want to navigate to the image chat page where I'll be chatting um with the image okay using gin API so over here Hide is there I'll give a child space board then you have below that I'll give it a icon button icon will be icons. image yes this good color will be plus. pite okay main AIS alignment space between I see that over here now I'll give this container a margin or what I can do is uh cross AIS alignment of this row should be end perfect I see my button okay I think we should just make it icon so icon button already has some padding which I want to avoid this looks okay but it is like too much right it is too much so I'll make it 80 80 is again very less I'll make it 100 this looks okay then now padding constant Edge insets do all not all from symmetric from horizontal I want it to give it 16 and now let's uh give the space pod some boldness style text style font we font weight. pull and some font size will be 34 too much too much too much not this much 24 space pod okay looks good I think this looks good now I'll go to Google fonts and bring a good font not satisfied with this font Google fonts space something some font related to space this is okay this is okay can we get some more funny and Inter okay this is this looks good for our spacep pod app let's get this font uh [Music] download I'll just unzip it get inside and you see static you see this this file just go and put it in your assets uh go over here and put it in your assets okay 64- regular.ttf now you have to go to pspec DML and I okay just a second go to pubs spc. yml and go to the bottom right over here you see this font section that's uncommented your the font name is 64 so 64 is a font name now the asset location is uh 64. shag. DF so I'll not remove regular this will be assets SL 60 [Music] 4-f remove this remove this save this okay now go to main do Dot and in your theme you need to put font family and just say 60 four space board okay it looks good looks good looks good okay this looks good even over here I can add like a okay I I love this app I think this is the coolest app I have built on YouTube otherwise I don't uh worry about UI right but in this app I'm thinking about UI at least okay put it in the comment section whether I am teaching you well or not okay this constant looks good okay now it's time that we start thinking about the API calls okay so let's go to repositories create a file inside it let's call it space or chat repository chat repository. do create a class space uh repo create a static function static function generate chat chat text message this is one API call second API call will be analyze image call okay okay so static um I need to I need to decide models also so go to Leb and over here create models right so in the block file in the logic file I'm I will be maintaining a list right in the list I will be having uh in that list I'll be having message models right I need to have message models right so in the models I can say if I go to postman you just see the postman okay so go to let's focus on this chat generation the text generation right this is my content this is my part and this is one model this is one model not from here it will start from content right can then content or if you just uh if if you're just getting confused over here just see this body so how are we uh aligning this we have contents in the content we have this model R parts and the parts we get uh this thing text and you have this your text again roll parts and you get this text okay so let's create a model let's create a model chat message model so chat dot dot create a class chat message model what are the parts inside it so one we have a role which will be final string rule then you have list of parts right this is a list so final list of certain model and this will be called parts right this is this is a list then we have yeah this is it and the parts I see a model so part model I can create so I'll create below it class chat part model final string text right so final string text now let's create a let's generate a Constructor right so this is chat part model and the below like to on top of that we have parts and this is a list of chat part model right now let's generate a Constructor let's just save it so this is my model and my list of messages in the block so over here I can I am going to Define list of chat message model model will be uh it will be called messages is equal to uh empty because initially it is going to be empty right and after that we are going to start adding some stuff inside it right so this is a empty list that we have defined now when I make a call that will be chat text generation chat uh text generation repo repository function it is going to take my previous whole list right it is going to take list of message model why it's not suggesting anything what is happening wrong let's see list of chat message model messages or previous messages because now we want another new message to be generate right previous messages asyn function right chat message model import it okay save it now we need to make a call so we need do package or H package I I like do so I'm going to import do so I have added de let's wait it's taking some time which is fine so yeah package is added now what we can do is we have to import do right and as soon as so I'm going to take do do is do right then do do options not options uh we can just say final response response is equal to do. poost request so do. post request path so we have to define the path of our API so this is going to be our path just copy it and let's let's just paste it right over here as a string right and API key so API key what I'm going to do is I'm going to create one file uh constants do dot or definitely it is recommended that you create an environment file right so I'm just going to create in in constants do. file in the utils not directly right here I'll create a utils folder and create constants constants do. file and I'm going to say API key is equal to um where is my API key go to parameters this is your API key right paste it and yes not like that so you have to just say uh constant API key is equal to in the string paste it save it go to repositories and right over here just remove this API key and put dollar and say API key and import that file okay so this is your uh post request now let me just remove yeah you can see your whole post request now it's not enough we have to define the um this thing the body body of our post request so you see this body in the body what we are doing we are having this contents in the contents I'm having these roles right you are having these roles so these roles are not Dart model these are maps right so what you have to do is uh whatever model you get you have to convert that model to map okay so let's go over here and in the models you see this thing now you need to convert you need to Json serialize it so I'm having a extension vs code extension which is called Json serialization uh you can use Quick type also right just go on internet and search for quick quick type open Quick type right so just put your model here right your Json response here so if I just go over here and put my model right over here right you are going to get the dot code right you see this content you see this part and from this part we need this from Json and to Json right or this is actually hard your simple thing with be you just install a vs code extension right you just install a vs code extension so how does how that vs code extension works just go over here right click on this yellow bulb click on generate Json serialization and it is going to give you two map and it is going to give you from map and you see this is good right similarly for chart uh chat part model do this Json serialization right so the name of this extension is uh if I go to my install insted extensions uh if I go to my installed enabled yes let's go to enabl Black for black black Docker es where is it where is it where is it intelligent live share pretty code pretty code I see I think dot flutter widget Snippets flutter I think it should be dot class generator yes this is the extension dot data class generator Ricardo Emerson very good extension and it just works very well right I use this to also generate production apps okay perfect now we have done adjon realization that means uh we have this to map function and from map function now we need to pass the body right so over here after your Endo after the comma write data right so in this data I need to pass first of all the contents right contents key so just just go over here just go over here let's just copy this let's just copy this whole data copy it and paste it right over here right now over here you will see that in this list this content is okay but this list we have to generate it on our own right so what we'll do is I will M yes I will remove it this whole list I'll remove it yes and the previous message list which I'm getting so previous messages dot map every element of that list should be converted to map so e do2 map finally the whole thing that we have got do to list done this is going to take take every model of your chat message convert it into a map and then create a list of it so this thing will be created right practice guys practice you will know how these things are working right you just need to practice temperature also you can control right this is my API call this is my API call I think nothing else is required now what I'll do is let's try to do it let's try to do it so I need to create yeah so I also uh print my response right so I'll also print my response yes because it's a network call the whole thing should be inside a TR catch block try if you get a catch then you have to log your error E do to string try will be your whole thing after that you print your response or log your response response. perfect looks good now let's go to block okay uh let me go to block file block event Let's uh add a event for class uh chat generate new text message event right extends chat event chat event it should take the new message that you added in the message box input box string input message then dat a Constructor copy this event paste it okay now we have to handle this so as soon as I um yes as soon as I add this event I want to add my ADD a new uh what we can say add a new message into this model right because this is my message right this is my message which I'm entering this is not the message generated by model so as soon as I enter my message and hit on send I want my message to be on the messages list in the messages section list right so what I'll do is you have to think and work right right you have to think and work it's simple you just have to think and work and this messages list should not be here it should be here okay messages do add chat message model chat message model role what should be the role role will be user role will be user Parts what should do the parts so parts will be list and one part so chat part model text what should the text event dot input message if you don't know block I have created a whole playlist of block right and definitely I'm going to cover it in my course also right so you can check out first of all check out my free content on YouTube on blog and then you can come on this video and continue this block part right because I'm not explaining this block again in this video okay okay so messages R this is my model now State as soon as I enter my message I I want to emit a state chat success state it is going to extend a chat State ex chat success State okay why what is happening wrong chat success State extends a chat State okay final class it should be perfect and it should emit with the latest list of messages so final list of chat message model messages so as soon as I do that in the block I want to emit the state messages will be messages perfect after that after that I want to make the API call so now the API call so this will be asyn then I want to say a wait chat repository why it's not there chat reposit space repository okay why space It should be chat repository chat repository go to block chat repository dot chat generate initial message previous messages and hit save okay looks good now I'll increase the size of this app and now let's go [Music] to UI that will be Pages homepage and over here I'll Define a text editing controller controller text editing controller is text editing controller and again what I'll do is I'll I'll wrap this whole container with the block consumer block consumer right import this block consumer block will be chat block Chat State and block so I have to define a block so say final chat block chat block is equal to chat block okay over here Define block say chat block say listen when build when listen when let's do it later but you understood how we have defined the block now I have to wrap uh yeah I think this is good I think this is good okay but one thing one thing one thing yes one thing as soon as I get the success state right I want to to rebuild this whole container so I'll remove this return container from here cut this out and write a switch case state. runtime type if you get chat success State chat success State then you're going to get some messages inside it right so chat final uh messages not like that it will be list of chat message model chat message model messages is equal to State DOT uh State as chat success State chat success State and you will have something something I'll do it just a second let me just print that yeah so break remove default will be return a sized box like if you are not getting the chat uh success State then return a sized box that means something has gone wrong so you can create app uh like something went wrong this this uh widget over here instead of Siz box now at the top I want to get the messages which I'm getting from my state so State as chat success state DOT messages save it remove the return return from here perfect this is okay this is this is looking good all right but one thing one thing if you go to your chat state right and if you go to your block what is your initial State initial state is chat initial state in my initial State should be chat success state so that initially also when I don't have any messages I should see this thing other otherwise I'll see the size box so it should be chat success State chat success State message will be empty initially okay got it now I'll go to UI homepage go to the bottom and you have the circle WRA it with inqu inqu on tap if you have written something inside this box so if text editing controller dot text Dot is not empty then chat block chat generate new message event input message will be text editing controller do text perfect now you're providing this prompt that you just wrote it in the box to the um block okay perfect now let's go to our block right over here and now I'm going to what I'll do is what I'll do is what I'll do is I'll go to homepage one more thing right one more thing guys in the expanded I'm getting this text field okay yeah not this yeah this is the list view right this list should have the bubbles of the messages that we are generating right so children list. generate or I can just use list view. Builder remove this and get list View do Builder item Builder will be context comma index index and return return what is wrong return a container let's say or just return a text chat uh sorry messages at index dot part Parts yes Parts DOT first dot text right like this now what is wrong cont okay context comma index and item count what should be the item count item count should be messages. length messages do length perfect okay text I want to wrap it with a container I want to wrap it with a widget which will be a container this container will be the outline around my chat message right so container I we'll give it some padding constant Edge inserts. all 16 padding color or decoration decoration box decoration uh border radius radius. circular 16 and this should be of color white colors dot not white colors dot yellow or Amber dot with opacity as 0.1 now we ready okay now we are ready now let's go to block or what I can do is for now if I just go to block if I just go to block and remove my API call for now just to see if I'm getting my messages in the box right if I just do that and just increase its emulator size a bit right go to your debug console and let's just refresh the app okay let's just refresh the app you got this right you got this let's say you want to write a message uh tell me me something about Andromeda galaxy and as soon as you hit send nothing happens okay nothing happens why I got the issue see if you have experience if you have worked on lot of apps then just as as soon as the error happens you get to know key issue like what is the issue right so go to uh pages and we have forgot to define the controller inside this text field okay let's go back let's say uh tell me something about Andromeda galaxy hit send you see tell me something about Andromeda galaxy nice man it it it looks like a real space wars like 1990s game game or something right it it looks good it looks uh good to the theme right the theme is good perfect now as soon as I do this as soon as I write it here I want this uh text field to be empty again right so as soon as I've done this I'll what I'll do is I'll say string text is equal to text editing controller dot text I'll save it in a variable and as soon as I do that I'll say text rating controller do is do clear dot clear and I will pass this text to the block done if I just do it again you see you see it again comes up right I want margin it's not giving me a margin so what I'll do is I'll give it a margin to the block uh not to the block to The Container this is my container I'll give it a margin margin constant Edge inserts do only from the top give it 12 looks good I think it should be from the bottom you see it looks good it looks good it looks good guys it looks good okay now uh what I have to do is let's make the API call and gets the get the uh uh the response from the API andcommend this go over here right and you have already loged the response right so let's see let's see what we get let's just refresh tell me something about Andromeda Galaxy hit send we'll see instance of a future response Dynamic okay so I think if I go to chat repository what are we doing wrong one thing we are not writing await here right await and I think that that's that that's the only issue so let's go over here again WR tell me something about Lexi about androa Galaxy hit send and it is generating the response yeah I got it and the I got a issue actually so I got excited but we got a issue the extion because the response status code 400 request options or valid was not configured to throw of the status code AS following client error request contains bad synx cannot be fulfilled okay okay okay okay okay okay not an issue I'll just open do Dev tools and open network page so that I see what is the uh what are the request options request body and all right so I'll again do it uh androa Galaxy Andro Madea Galaxy I'll hit send there will an API call you see this post call right you see this post call 400 yeah so go to request and you see this contents okay you see this contents user parts and the map tell me something okay this is good then generation config I think this is good not an issue user parts map this is okay right what are we doing wrong here what are we doing wrong here okay so let's just see the response also one time so go to response and over here I see this error please ensure that multi-turn requests alternate between user okay got it so we cannot pass user user user and then a model right so we have to pass user then model user then model okay so what we can do is we can just restart the app so that all of these things are done right uh gone and let me just refresh the app okay now I'll say generate about Andro Meda I see a post call let's just reduce the size I see a post call it is still generating so I'll wait okay 200 yes yes we got it we got it guys we got it no issue no issue this time and we must have got the response also in the console so if I just try to increase the size of this console we got this response guys we got this response right so in the response what we get we get candidates okay in the candidates we get content and the content I get parts and the parts I get my uh text so if I have to return this um text what I can do is I can what I'll do is go down and remove this thing or just close this network tab I will be returning so this should be future of string right this should should this should be a feature of string right and and go down if response is successful so if response Dot status code status code response dot what is what is wrong here okay remove this do. poost after this what I want to do is after this post call why what is wrong response. stus why I'm not able to access the response response dot why why why undefined name response why here is my response right and just below that I'm trying to access the response so that that should be accessible amazing guys this this is not expected uh so do is do final response is AIT do. post right do. poost and we got that let me just try to close this file once save it now go to chat repository again you got this thing so you got this do. post call and after that if I try to access response if response damn we have we have to now think this is this is a very serious issue okay we have to think why why it's not able to access the response what's going wrong post this is the data right this is the post call and I'm saving the response over here the value is not used try removing the variable so if I just try removing it once save it right and just try to return m empty string so that issue is gone and over here in the catch also if I just return an empty string yes the issue will be gone but below uh like above that I have to access the response so if uh I'll say again let's try to do it again final response is equal to this and below that if I just save response yes now I got it I don't think I don't know what was the issue and I don't think it was just it was our mistake it just not able to access it it so if response dot status code is greater than equal to 200 and and and and response. status code is less than 300 uh right then we can say it is a successful call empty like null check null check and then I will say return response. data at you see you see you see in the data we have this candidates so candidates you have to go inside the candidates then you have to go uh you have to take the first candidate so it will be do first then you have to take the content so dot first at content at definitely the best approach will be to create a model and then work according to it but currently just for showing purpose and wrapping this video because I don't want to like stretch this video a lot uh I'm giving you a homework that you have to instead of just doing what I'm doing you have to create a response model and then put this Json into that response model and work with that doart model right but now you can just think and you can just uh see what I'm doing right so I'm just trying to access this part right so content then you have to go uh like content then you have to go inside parts so at parts and then access the first part so again first and then access the text I think this should be good I think we can try running it okay now as soon as you get that string right string response string or generated text is equal to await this if generated text. length is greater than zero then I what I'll do is I'll add another model so messages do add uh chat message model role will be model right and parts will be CH chat it will be like this chat part model model and text will be text will be the generated text the generated text okay and now I'll again emit the chat success state so I'll just copy this and just paste it right over here right let's just save it now let's see now let's see okay let's increase the size of this window and let's refresh it let's see what we get I'm excited to see okay let's type um tell me something tell why okay where is it typing okay yes generate something about Andro meta androa Galaxy I'll say send it is going to take some some time till now nothing has gone wrong maybe it is generating I think we should wait a little bit more and then I'll try debugging it right we have not got any issue okay yes guys we got it we got the response androma Galaxy M31 a cosmic neighbor the androma Galaxy uh also known as the M 31 okay some data is there and you know guys I'm not able to read it the font is too uh bad for longer text it was good for just this logo but now I'm not able to read the content okay so a lot of text is there which is being generated from the uh uh Google gini pro API right I think I have like one thing that we can do I'll go to homepage I go to homepage and if I just go to this image right the image that we had added image I think we can have an opacity layer dot uh comma bundle and package not here I think there is a color filter is there color quality is there filter quality is there opacity is there so let's try to add the opacity what does it take it takes a double value so let's add 0.1 okay let's see what we get here yeah the text I'm able to read but we have lost the background image so let's try to increase at 2.5 okay it looks good now it really looks good now right it looks good now I'm not able to still read it but that is fine right that is fine because font is in your hand right font you can change it any time one a few more things I like to add one is whether this message is written by me or the bot right or the model so let's do that now then we will add the loader right then we'll add the loader so now what I'll do is I'll where is my box message box here is my message box right over here container child box decoration child and text let's wrap it with a column wrap it with the where is the column I can't see a column yeah here is it column above that let's add a text right now if my messages at index. roll is equal to is equal to user is equal toal to user then I will say user otherwise I'll say AI or space b space pod sorry okay so space pod then let's add this style text style font size size will be a little bit small so I'll keep it like 14 and color should be again depending on the messages at index. roll is equal to is equal to if it is a user then I want to keep it uh colors. amber otherwise I want to keep it theme dot off not I want to keep it colors. Deep Purple colors do purple maybe purple let's just save it let's add a gap or Siz box constant sized box height will be 12 save it okay and one more thing okay I am not able to see it so it should be a little lighter only so colors dot um what will be the colors. purple do with do shade I can use do shade 200 it it is visible it is visible now we'll add a column uh cross AIS alignment so cross AIS alignment do start I see I see I see a very beautiful app right now user is there generate something about the Anda Galaxy then I okay what we can do is we can add the height to this text right so we have this um we have this this thing style text style uh right 1.2 at least it will be readable now and I like see okay yeah it is better it is a lot better right it is better I see yes this looks good now couple of more things first of all I want to hint text in this text field uh ask something to AI are something from a AI this will be my hint text hint style I have to add text style will be color will be colors. gr do shade 400 yes I see it right now ask something from the AI yeah it looks good okay that's fine right now what I'll do is as I'm generating some content right I should see that loader right so I have to bring the lot package from the internet so I'll go over here I'll go over here and and search for L flutter go over here copy this package and come right over here go to pubp speec DOL paste that package right over here save it one more thing go to homepage now over here I'll maintain a variable so Boolean generating generating is equal to or I can actually maintain it in the block itself generating by default false right whenever I have started generating the content so as soon as I've added this after that I'll say generating is equal to true and as soon as soon as it is ready after after this I'll say generating is false again generating is false now go back to your homepage right and below that below this like um right below the uh like on top of this text field on top of this text field I'll say if chat block chat block. generating right I'll add it in the if statement I'll say if this then you have to do uh LTE do asset is it not added yet LTE files. asset let's see an example l. asset yeah this is it okay let's go to ppml and again add it okay there's an issue let's remove the package version Let it take any package was just this is just a demo app right for production you have to find package versions but this is just m app so I'm not worrying about it I just want to show you how these things work now imported asset slw is our file that is called asset SL loader. Json I think this is good I think we have got it let's just refresh the app and try seeing it and yes I have to give it a height and width so I'll go over here and give it wrap it with a container ER okay and give it a height so give it a height of let's say not a big one uh let's just do it right here 54 and width also 54 okay let's go over here uh generate something about Andromeda galaxy Andromeda I cannot see it okay I see it I see it it is right over here it is loading right I see it let's see let's wait I will shift it to left and I'll also add loading dot dot dot text right over here let let it okay I got it and now the loader should go away yes it is working now I'll increase the size because I'll increase it to 100 I'll increase this also to 100 and I'll wrap it with a row right and after that I'll add let me decrease the size I'll add a constant sized box of width let's say 20 and after that I want to say text which will say loading dot dot dot right and the column cross AIS alignment should be start let's again try it uh how far is it how far is it loading yes we got it guys we got it how far is it we got it and it should generate a response yes we got it guys it's working okay I I see the message boxes are not having a margin from horizontal so let's add it so let's add it m where is it where is my message box it is right here from the bottom I've given from the left I will give 16 from the right again I'll give it 16 let's try it guys now I'm very excited to see the response okay if you have also reached to this stage this is the time where you have to shoot an Instagram real or Instagram story or a LinkedIn post right and tag me right I'm I'm eager to see your apps and yeah the design should be different you should not have to you not have to copy my design right I know it's very bad but uh you have to show your creativity increase your temperature right okay uh generate some facts about Milky Way Milky Way galaxy right okay not yeah Milky Way galaxy let it send it says loading beautiful loader right loading loading loading dot dot dot I see my question I I see my prompt here and now let's wait for the AI response we got the guy we got the Response Guide size and structure Milky Way Then location then mass and darkness then black hole or something all the response we have got from the AI That's your own space gbt space pod app we have created right beautiful app I'm waiting for your app now right so guys I think I think we should divide this video into two parts now because our text thing is done I think I should wrap this video right over here and for the image part I can bring another video right so I think this is it guys I think I should take a leave and I hope you like this video I hope you will give love to this video let's set a target of th000 likes to this video right and uh definitely you can you sure you can check out my course if you want to learn full stack development node J Express J and all the course is out enrollments are open and discount coupon is still open so you can take the advantage right so I hope you like this video and do follow follow me on LinkedIn Instagram I'm available there and yeah follow my uh be a part of my community even if you don't purchase the code just be a part of the community because I'm the most active there right so I hope you like this video till the next video keep coding keep innovating and thanks a lot

Channel: Akshit Madan

Views: 32,229

Keywords: #developer, #flutter, #appdevelopers, #ios, #android, #google, #apple, #data, #datascience, #collegestudents, #engineering, blockchain, freelancer, college, students, internship, web3, solidity, python

Id: oAmIqoGkfIY

Length: 105min 9sec (6309 seconds)

Published: Wed Jan 31 2024