Mastering AI Chat Bot with Google Gemini AI: Flutter Chat App Tutorial

hey what's up everyone I'm charia aam and welcome to my YouTube channel so in this particular video we'll be making a complete chat application or chat bot in flutter with the help of Google's latest AI model known as Gemini Pro so if you don't know Google has recently launched its own AI model which just called Gemini and well be using Dart in today's video and integrating that in our own chat application we will will make the entire project from very beginning and we'll talk about all the technical details as well in this video so let's start without any delay let's play Intro [Music] first first of we create a new project I already created a new project then we get the necessary packages that are used in our application so for that we open Google Chrome go to pub. and search for our required package - chat 2 copy dependency from there and paste it into our project file pubs poo. yaml file below the copertino icon and then again go to pub. and in this time we search for HTTP package for making request and fetching data from server again copy dependency and pass it in pubs poo. yl below Das chat package then after that we Pub get our project and when the exist code is zero then we create a new dart file with the name of my bot and inside it we take a class with the name of chatbot having type stateful and as return we take scaffold and after doing all the stuff we go to our main Dart file and import our chatbot class here after that we remove the unnecessary classes and refresh our project and then we false showed bug check bner and refresh again awesome now we go to our chatbot class and inside scaffold body we take- chat. now we have three required parameters inside it current user on Sand and massages now we create a variable on the top with the name of myself having data type chat user and passes ID one to it and passes charil as first name then create copy of it and in this time we chain myself with bot and ID with two and first name with chat GPT now assign the variable myself to current user and then on Sand create a function having type chat message and then declares list on the top with the name of all messages having data type chat message and then stays it empty [Music] and assigns that list to messages then we refresh the code see the massage we typed is not showing on the screen so for that we create a function with the name of get data and calls it inside our onand function now inside get dat function we take our list all messages do insert then index zero and object is M then you set State and after that we refresh our code and see the massage we are typing is showing on the screen awesome now we go to Google Chrome and search for maker Suite Google then click on the first one then get API key and then create API key and after processing our AP AP key is generated copy that API key and paste it in our project and then copy the lines showing below and also paste them in our project because we need [Music] them now we import HTTP package as HTTP then inside get date function await HTTP dopost and inside at Yuri dopers and then URL [Music] so now cut the last one line after post and create a variable with the name of ourl and paste that link inside it in the form of [Music] string n we replace your API key with our API key now everything looks good at after that we again declare variable with the name of header copy and paste that line inside it in the form of key value Pairs and calls it also in our post method then we declare a variable data having data type VAR and paste the line inside it like that and then in text parameter we take our variable m m. text in which we stored our [Music] data now inside post method body we encode data variable as json. then value if we are get some value and Dot catcher if we are facing any some kind of [Music] error now inside then if value. status code is equals to 200 then VAR result is equal to Json decode then value. body and the print result then after that we run our project type some value C we are getting some result in the console SE we copy our required values one by one and paste it in print statement after result in box brackets like candidate index zero then content Parts zero then text then [Music] refresh e we are getting our required values this time now declare a variable M1 having data type chat message and then chat message and then we take bot as user and date time.net now as created at and as text we copy the result line and paste [Music] there then all messages. insert again index is zero and this time object is M1 and then set State and run the project [Music] again awesome cool and fantastic we are getting results from the server but we need to show some type of processing until the result is shown on the screen for that we declare a list with the name of typing having data type chat user and stay it empty then inside our get data function we call that list typing. addbot and at last typing. remove bot then set State and then inside Das chat typing user property we call our list typing and then run our project again see our project is working great now for some kind of decoration message options and use some properties of it one by [Music] one if you found this tutorial helpful don't forget to like And subscribe for more flutter content thanks for watching [Music]

Channel: Codistan

Views: 972

Keywords: chatbot, ai, ai chatbot, how to make a chatbot, chatbot tutorial, DartProgramming, MobileAppDevelopment, FlutterTutorial, FlutterDevelopment, FlutterUI, ChatApp, CodeTutorial, OpenSource, FlutterBeginner, AI, AI Model, flutter, chat rebot, gemini, flutter tutorials, dart, flutter course, mtechviral, flutter chat app, chatgpt, chat gpt, chat gpt api, chatgpt app, chat gpt app, chatgpt flutter, chatbot flutter, chat gpt flutter app, flutter chatgpt, flutter chat gpt, flutter ai app

Id: 4v3evJGYtM4

Length: 8min 4sec (484 seconds)

Published: Sun Feb 04 2024