Build an AI - Powered Voice Assistant Flutter Radio App | Android | iOS | Web

hey alan play some classic music all these states are passing [Music] i'm by here hey what's up guys welcome to this tutorial and in this video we will see how to make this ai radio and what does this app do is basically the question so let's ask this radio itself that what is the purpose of it so i'm gonna just say hey ellen what does this app do this is a radio app where you can ask me to play some music so as you can see this is an ai powered voice assistant radio app which we can use to play some music so that's what we are going to see and we will going we are going to make this entire video from scratch like for this particular application and let's start and before that let me just give you a taste so i'll just say hey ellen play some classic music playing now [Music] so you just heard that we could play some music so i think it's already interesting right and you can see it's again reading everything so uh if you are already interested in this tutorial then press the like button subscribe to the channel also press the bell icon right now to get future updates as well and i'm really excited so let's uh enjoy this together and please watch the entire video if you really want to learn something out of it so again guys thanks for watching and let's start okay guys so let's start creating the ai radio and uh i have already set up the project it's it's just a normal project and i have removed some boilerplate code and as you can see we get this um i'm using the dev channel but i'll suggest to you to use stable channel itself because of like dev channel can have some issues uh so now if you see i got this ios folder lib folder mac os web folder and all those folders because i'm using the dev channel but if you use this table channel you will only get ios and android folder so um just keep that in mind and if you don't know about how this uh flutter app works and how to start with flutter apps uh building flutter apps so you can watch my beginners tutorial i'll provide the link in the description as well now moving ahead guys we need few dependencies for our ai radio to work uh the one dependency which we will be needed uh would be uh something called audio player so that we can play our audios right uh so we will need that and uh the second dependencies uh which we will need is uh regarding the ai platform which we will use to provide the voice assistant so we will add that as well then to ease the process of creating uis we will use velocity x so i'll go to prospect.ml and i'll start adding those dependencies so what i'll do i'll use pubspec assist it is an extension in visual studio code you can use it so i'll just say let's say for example velocity x if i say this then it will give me suggestion i'll add it similarly i'll add audio players um and that should be fine we will add the assistant later and one more thing which i want to add is google fonts because i want to have some custom fonts as well right so google fonts uh is what i need and apart from these things guys i have just created one assets folder as well so that we can place some assets there so that's why i have enabled assets and uh this is what we are doing by the way if you are wondering which theme we are using here because a lot of people ask me that you know what theme i am using so i am using dark pk theme here so if any of you is aware about it so if you go to extension you can search for dark pika theme and yeah this is the theme which i'm using and uh yeah that's more or less what you have to do now i'll run this application in my um android emulator just to show you that how it looks like it it will not have anything uh in the start and now we will start keep adding more and more stuff over here so uh let's let's see um so it's the app is started and you see this blank screen which is totally fine so what i'll do in the lib folder guys i'll create a new file or new folder let's say uh one would be pages and another folder which i want to add is let's say utils so that we can add some utility um and in utils i can add a file called ai util dot dart okay so ai util is not nothing but a mixing let's say a i util okay what it will do it will give me some color so let's say i want to have a color call and we can import this as well do that um so i can have some primary colors so first color which i want i'll use vx and vx is velocity x extension so uh let me have material here as well as velocity x and the first color primary color one let's say will be let's say orange 400 uh uh like to match the theme which i showed you um in the demo and the second one would be vx dot purple 500 so this this is what i will use uh ai util or maybe just make it ai colors okay so we just need colors for this and in the main dot dot uh we don't have anything in pages let's create a new page and i can just call it home page dot dart and here um and also let's create a new folder called widgets okay so that we can have widgets as well so in home page i'll import uh material.again and i'll import velocity x as well just for the sake of having this okay and then um i can have something called a stateless widget okay let's make it stateful in fact not stateless because we have to use few things here and there to like refresh our screen so home page is here now guys and this home page is basically uh right now having nothing but let's say if we have a material over here and let's try to give it some color so for color i can just say a i colors eye colors okay primary color one for example okay and now i'll replace this home page from here to main.dart and i'll import it as well and once i do that you can see we get this screen which is totally fine for now and now we can start playing with it so uh this is what we get now um i am not using any api to fetch the um you know radios which i want to play so i already have the list of radios which you know i want to play so what i'll do guys i'll actually um i can do is i can create a json file okay so in the assets i can just create a new file and i can i can call it let's say radio.json so what i do here um i'll create a json file where i will have a key call radio okay and inside that i will have the list of radios so let's say if this is my list okay so um so yeah these these are all the radios i can have and uh yeah i think that should be fine so these are some of the radios like i have hard coded uh most of the things but i mean the only thing which is important here is to understanding the concept how to work with this ai voice assistant and how to play uh this kind of radio okay so we have the radio.json now and we have the home page here as well looks good velocity x is still we are not using so that should be fine now um what i can do uh rather than just this material i can have a scaffold over here and this is this is what uh what i showed you and we will have a drawer here let's say a drawer okay and that should be fine as well and now what i'll do uh guys um i want to have some some kind of text which i showed you let's say we want to have an app bar and then i want to make it like translucent or transparent as well uh the from the status bar so what i can do in the main dot dart i can go here i and i can write let's say system chrome okay system chrome is what we need and we can just say set system ui overlay style and we can say overlay style okay system oh okay and status bar color okay so i just want to make it transparent why because um because of what i'll show you just now after this okay so in the body part what i'll do for this i'll have a stack okay why stack because a background a gradient kind of background and then we want to have we want to have some items placed on the top of it okay so that's what we want so uh first of all for this steak what i want i want to give it a gradient background okay so for that what i can do i can use a vx animated box why i'm using animated box i'll tell you so um i want to give it full size so for size i can just say context dot screen width as well as context dot screen height so full size i have given and i can just say dot make so it will create a container for me but the other things which i want is that i want to give it some gradient okay so i can say something called with gradient and i can provide a linear gradient over here okay so linear gradient um or you can directly use dot linear gradient but i want to customize it as well so that won't be possible and colors for colors what we can use we can use our um our ai colors okay so a i colors dot primary color one and the ai colors dot primary color two so once i do that you can see we got the gradient over here um one more thing which i want to do here uh for this gradient okay so gradient i want to uh change the like beginning and add ending point so for beginning i want to use something called alignment dot top left so it should start from top left and it should go to bottom right so that's what i want so that it looks a little bit better so bottom right and you can see uh why i set the status bar color is transparent just because of this now it's looking good right and this gradient looks much better than what we got initially and that's that was the uh requirement so once this is done now we need an app bar okay so after this uh we can have an app um so i'll use an app bar and inside the app bar i can have a title so for title i will just say ai radio and i'm using velocity x to just use a text um we can have let's say xl4 then we can make it bold then we can make it white and then we can make it like like this so we have the ai radio uh this is not looking amazingly awesome right like and i also want to give some height to this app bar because it is taking the entire height which i don't want so i can just say h um height let's say give it 80 pixels something like this oh this is this is so less and also let's give some padding over here um this looks this looks really really weird uh few things which we can do for uh for making it look better would be um let's give it some color okay so background color why it's looking weird because i really don't want a app bar here but rather a text only and let's remove the elevation so it will look better um the height is 80 which which is kind of not looking good as of now but let's try changing it uh to 100 for now and now it's looking good so uh we will play with it later okay so the font guys like this font is fine but what if we can give it a better font right um so what i want to do here i will go to main.dart and here i can provide the font okay so in the theme data if you will see you have something called font family okay so font family so what you can do you can use google fonts and then you can just say google font start we will use poppins font okay so poppins font dot font family okay so we can use something like this and if i do a hot oh we don't need even the hot restart so we can get we get this ai radio right also guys let's make this center title as true so that it goes to the center which is looking fine now and uh yeah not looking bad at all so this ai radio is here we are done with the placing it and now also let's give some shimmer effect to this as well so i can just say dot shimmer and i will provide some color to it so primary color i can use a i color dot primary color one okay if you want to change it you can change it or i just want of like not ai colors rather i want a purplish kind of like how i showed you in the design right on the demo app so purple 300 should work and for secondary color i will just use white color okay so if i do a hot restart now it should show like that okay so you can see that app bar is gone because of that transparent nature of that and this is looking fine like because we will keep changing this color as well so don't worry about that and uh after that what i want i want to um i want to have the radios okay we can uh because it's a stateful widget right so i can use something called init state okay and uh okay so um i also need to have some you know class to create radio okay and it will have some properties which i'll be needed so um i can create here another folder called let's say model okay and here i can maybe have something called a new file called radio dot dart and inside that we will um create our radio so radio will have some properties guys that's one two three four five six seven eight nine eleven um so if you search here dart data class generator okay so you can create this uh data class using this particular plugin which you will get the visual studio code like you have to download this extension and once i select here then you will see that it will create everything for me and that's that's what i want right like this is the best way of making this possible we also want a list of these radios right so i can create another class and i can just say my radio list okay and inside that i'll do nothing but i'll just say that i need list of radios so my radio okay and radius yep yeah or radio okay so whatever the name here is so let's say radios so we will just say radios and now um i'll use the data dart class generator itself and i'll click here and i'll press enter and you can see it will create everything for radios as well so um yeah that's that's that's more or less what we want and now we have to use this uh radio so in the home page um we have this init state already here so what i can do we can make a method called fetch radios okay fetch radios and inside this method we will um fetch all the radios so i will just say quickly fetch radios and we so you can just say list my radio and uh this particular method fetch radios okay we will make it a synchronous because we have to use something called a root bundle so we need the radio json so i'll use radio json and i'll await it and i will use something called a root bundle and you have to import it and then it has something called load string okay what string you want to load so um you have to give the path here so the path is asset slash radio dot json okay it will come in the encoded form and we have to decode it if we want to map it okay so um to decode it if you if you go here um in here if you see that okay what we want is radios okay so we can just say let's say radios and if we see this my radio list okay so my radio list already have this method called from map okay and inside this map or sorry from map i'm saying from json okay and inside this file we can provide the json and it will do the inco or decoding for us so json.decode is what it will use so i can just say radio json and once we have this from this and then we can just say oh it should be my radio list okay and once we have that then we can just assign radios to this radius okay so this is how we will get all the radios guys and once we get all the radios we can print it that's very simple right so let's see what we get here so if we go to the debug console let me restart the app and yes you can see we have all the radios over here and so basically what it means is that everything is working just just fine and now we we want to display this as well right guys so we want to display this radio so uh what i can do once i get radio i will use set state so that i can tell the ui to rebuild itself that we have all the radios uh with us right so we have the app bar with us now what i want i want to use something called vx swiper okay what it will do uh so vx swiper i have vx wiper dot builder something like that it will take the item count where we can just say radios dot length and it will also take an item builder where we can assign some item to it and it will uh like give us some output out of it right so let's say um we item builder for item builder we can have context index okay and now what i want to do here um it also needs guys uh something called an aspect ratio or you can give it a height okay so i'll give it aspect ratio of let's say 1.0 for now and what i'll do now i'll first of all i'll have the radio here let's say final read and i can give it the index and i will get the current order radio for this particular list which we will be you know fetching and uh just displaying okay so i'll start with the um kind of a vx box so i'll just say the uh bx box inside vxbox and we can just say dot make okay so we have a box now and inside vx box in the child we can have a z stack z stack is nothing but a stack in flutter and now um inside this is stack okay i want to have the radio name and everything but before that we have this box okay we can use this box to have the background image okay so how i will do this just just see it so here i can just say dot bg image bg image takes a decoration image so i can just say you know decoration image and then it will take an image provider so i can just say network image okay and inside the network image i can use this red dot image okay so so yeah you can see we have the images now coming over here and it is swiping as well that's what we wanted uh now once you are done with this part right uh you have to give some fit as well so that it does not look bad so i can just say box fit dot cover okay and once you have this box fit dot cover you can see this is looking much better now like the demo and then we can also give some color filter to it let's say how how it works is basically we want to have some overlay over it right color filter so i can just say color printer dot mode and for color i can just say colors dot black and i'll set some opacity let's say 0.3 and the blend mode will be just like blend mode will be uh darken okay i just want to darken it nothing else so you can see it is now a little bit darker and once you are done with the background image now i also i want to make it a little bit rounded so i can say with rounded and the value i can give it let's say 60 and you can see these cards are now a little bit rounded we don't need a coma um let's also give some padding okay so this this is fine and dot p16 to give some padding yeah this is looking fine the position of it is still a problem but we can fix it later now you can just say dot center there is a property called in large center page if you make it true then you will see that it gives you a better effect like or the selected one gets a little bit bigger height compared to the other ones okay so this is done i also want to give some border okay so without with rounded shape let's give some border as well okay so border it takes a color so color for color let's say colors dot black and for width i'll set 5.0 and this exactly matches with the our demo design which i showed you why this centered is not working because this stack which we are using over here is actually um like we have to set the fit i guess for this stack right otherwise it won't work so yeah here we have so fit let's make it stack fit okay dot expand so that it can take the entire screen okay yeah this is this is how it will work right so this is working now and uh we have i think a good looking design now and it so this is the z stack which we are using here right for the box the for the items inside the box okay so what i can do guys i can have an align okay align widget i can like align it somewhere so i can just say alignment and i can say alignment dot bottom center on the bottom side i want few items okay so in the child part i can use a v stack or a column whatever you want like v stack is just easy to use and i can show the name of the channel so red dot name okay dot text okay dot excel uh let's say three dot white dot bold dot make so what it will do i will see the output so you can see it is showing the fm name let's say 92.7 okay and uh yeah so this is the fm name uh which we will use to search like search for fm or maybe we will ask our assistant to play this fm right now i'll give some height here five dot height box and now i want to show the tagline of this fm so red dot tagline dot text okay it should be a little smaller so sm and white dot semi bold let's say not bold and yeah this is looking good but we can ask this v-stack or you know column to have the cross axis alignment as center so once you do that you can see this is looking good um there is no doubt this is looking totally fine after this align i'll create another align button okay and align button and what i can do here i can just say alignment and this time the alignment will be in center so in center what i want um i want an icon okay so an icon with a text so i can again use let's say first of all let's add an icon so icon and i will use cupertino icons here because that looks much better to me so i have to import cupert you know and there is something called a play circle icon okay that looks really good if it will have the color as white as well then it will look really good so you can see we have the icon over here now and below this icon i want to show a text saying that okay double tap to play so for that what i can do i can just wrap this icon in a v stack v stack and i can just say 10 dot height box and here i can just say let's say double tap to play okay uh and dot text dot gray 300 let's say and dot make so what it will do um it will basically give us this thing like double tap to play uh everywhere we can like hide it after some time but for the for the simplicity of this video we are not doing this right now and because the alignment is center so we don't have to tell the v stack to cross align to center because earlier it was not center so that's fine so this is this is done guys and we have this uh so and when you click on double tap nothing works exactly uh right now but what we could do here is that uh we can implement so after this box okay to this box we can just say like on double tap okay so on double tap is something which we have already or i should use rather say on ink double tap okay so that we can get some ink effect as well if you want and here you can do something what what you want to do on double tap right and also i also want to show the category as well guys so one more thing which i want is category category what what category uh category of this radio okay so i and i want to show it on the top right corner so after this alignment like you can place it anywhere that's totally fine but i will just place it on the top so i'll just say um a position widget i can take because we are in this stack and i'll just ask position that uh you know what i want um i want something on the top let's say on 0.0 and also on the right side so 0.0 and for the child um i want a vx box obviously so vx vxbox dot make okay this is fine so uh and in the child i want something called red dot category okay as a text and i will also make it to upper case so two uppercase we already have so we can just use uh dot text okay dot uppercase uh dot uh white dot white white and dot make okay uh so it will give us something like this okay you can see the text but it's not really visible um what i want to do i want to change the position a little bit so after make what i should do i'll also give some padding from horizontal padding let's say px16 that should be fine and now um i'll give some height to this box as well so vx box is here so vx box i'll say height to let's say 40 okay and i'll give some color to this box so color black color is what i want so i can just say black okay so we have the box here with black color right and let's uh make the content as center so align center and also let's make it rounded a little bit so with rounded and the value we can provide is 10 i hope it will look fine and the one thing i want is that i want this z stack to be uh like the clipping is not proper so so here i can just say the clip it should work no um i think we have to clip the box as well right so here if we can clip the box then it should work okay yep this is done so this is now looking uh really cool and we can remove this clipping i think this does not matter over here but this one is fine this one is fine anti-alias let's have the clipping okay guys so we have done the ui part most of it and uh and now what we have to do we have to play the radio and uh um yeah trust me like it will be a great experience also uh what we can do we can have a play pause button as well guys because otherwise it will be tough so after you are done with this vx swiper okay so this is stack or can have more elements as well so once you are done with the swiper uh we can we can like remove dot center from here actually and we can just say dot centered here rather okay null check operator that's fine okay so um here guys now i want something called a play and pause button or play or stop button it's already a lengthy video i know but that's what you have to do so uh we can say let's say align and alignment would be bottom center alignment dot bottom center and heading from the bottom okay so from bottom let's say context dot percent height into 12 so that we can get something like this okay now for the child guys what you want to show okay so um for child so we can have an icon let's say for example and we can just say cupertino icons dot maybe stop circle and color as color start white and let's make the size a little bit bigger let's say 50 and you can see we have this pause button over here so what we will do if we will click over here then we can stop the music and once the music is stopped then that is that is what do we have to do right okay we are done with the ui part guys it took us like around half an hour to complete the ui part now we will move to uh make it live and now let's try to play some music using um using something called an audio player okay so for that what you need also uh whatever music will be playing okay we will um we will show it here that which which channel we are playing right so for that we should have something called what is our selected radio so we can just say let's say my radio and we can have one selected radio right that this is our selected radio so it can be anything right uh then i also want you to um like to give the color effect i want so want to have a selected color okay so selected color also we can have then um then one thing i want to have is that if my music is playing or not right so i can have a boolean called is playing okay and by default it will be false like by default nothing is playing right and then we will have an audio player which we will get from from where guys we will get it from audio player library so audio player and that's it so this is this is all you have to do now when we are doing this uh setup audio thing right so uh what we can do like we have the audio we have to just click on the play button and what we can do is we can play the audio right so for playing the audio we can create a method so uh for here like i can just have a method after fetch radio let's say play music okay and what um this play music would want a url so if you will pass an url to this particular method it will play the music of that url right so how that will work so basically you can just ask our audio player to play okay so dot play and we will pass the url that's that's simple okay nothing else and then um and then what we can do we can also like we can also set the selected radio okay based on which url we are playing okay so what we can do we can ask radios radios list first where where the element dot url is equal equal to this url okay so whatever url we are playing will be our selected radio right and we will also print the name of that so selected radio radio dot name and once that is done let's make it print and once that is that is done we will use set state to refresh the ui so what i'm doing here is basically i'm trying to play music and which will have a url and then i'll asking the audio player to play that music and then i'm setting the selected radio okay and uh yeah so that's one thing and also we have to have a listener which will keep listening to music and once it is stopped then this is playing will be you know uh like false and when it is playing then it will be true okay so how we will do that as well so after this fetch radios okay we can have an audio player dot on play state changed okay on player state changed dot listen so this is an uh stream subscription and what it will do it will give us an event okay so we can check this event let's say if event is equal to equal to audio player state audio player state dot so you can see like if it is playing so we can check for playing then we can just say the is playing a value would be true okay else if it is not playing that means the is playing will be false right and uh yeah that's and and after uh checking all these things we can just say set state so this is nothing but a listener which will keep checking if the music is playing or not if it is playing then it's it's playing is true otherwise it's false now when we are showing this you know this button where we are showing that stop circle right we can in fact check like if it is playing then we can um show the uh let's say let's say what we can do here we can check for the icon let's say if it is playing so it's playing is true then we can show this stop circle otherwise we can show a play button right so cupid you know icons you know i can start play circle again play circle okay so yeah this is this is done uh one more thing which i want here i want to show something called um another maybe a text showing like which radio is playing right because uh we can like browse through it right so we don't know which radio is playing right so what i'll do for that um for this icon let's let's have uh for this icon let's have a v-stack so that we can add more items here and we will check if it is playing if is playing is there then we will show a text call playing now playing now and we can have the selected radio over here okay selected radio dot name and then we will append fm over here and then we can just say dot text dot make center and then it should end with a coma yeah so you can see uh nothing is playing selected radio is null so that's why we have the play button if you click here then it will call the uh play music okay so what will happen once we click on this button okay so for this icon we can have something called again on ink tap awning tap not double tap just awning tap and what i want when i click here if the music is playing then i want to stop the audio player okay so i can just say audio player dot stop because if it is playing then it means i want to stop using this button because the stop icon will be there otherwise if it is not playing let's say then what we can do we can play it right so uh what i can do i will pass this to um sorry play music and i'll pass the url so the url will be selected radio dot url that's very simple and that's that's the purpose of this thing guys similarly guys we have this button called double tap okay so when we double tap on the icon what we want we want to actually play that uh um play that channel whichever is selected at that time right so um on double tap uh and and this time it uh let's let's say we will just say play music right but this time the url will not be selected radio but because this double tap is on this on this list value this list items which is nothing but rad which is red right radios like this the radio which we are showing right now so here we will just say red dot url and guys after all this work we are finally done okay and there is one more thing this selected color which i'll come back but for now let's try uh testing this and uh yeah let's let's let's try playing with a little bit with this thing okay so what i do i'll just do a refresh hot restart just to make sure everything is fine okay if you are getting this error then what i you have to do you have to be on stable channel on on dev channel you will see this error which you just saw it is happening because of velocity x because there is a new method change so i can fix it as well so if i go to vx swiper and if we if we change this um there is one check actually if i have already added it so if if you disable this one and if you enable this one although don't do it because this is change in the library but it should work okay so now guys if i double tap here let's see if the music is playing or not so double tap and you can see playing now 92.7 fm i think it's not working for some reason with this particular emulator but we will try we will try it with the real device right now and we'll see how this is working with rear device the text color for playing now is coming as just uh just like a black color of text which is not really looking good so rather here i can just say white and also make sure guys in android if you see if you go to app folder if you go to source in debug in the manifest the internet permission is there but it might not be there in the um you know in the main folder and if you go to manifest it's not there so i'll add this permission as well if you want to release this application also let's see let's see one more thing if i go to the dev and let's check for some dependencies or some extra work which we might need with the audio players so let's cross check it once so that we don't miss anything so this is this is all fine um let's see what settings we need okay for ios you have to add this particular thing for mac os you have to add this particular thing and yes guys so for um for android you have to actually okay so this is not allowing so you have to add this android uses clear text traffic okay so this is something which you know which we didn't added and maybe that's why it's not working so in the application part uh here or somewhere you can add this line and uh similarly in the debug section as well is being debugged you don't have actually the uh application so you just have to add it at one place now i'll shut down the emulator okay the length is on null so basically what it is saying that uh you know we are trying to access radios here but initially it is null okay so we will add some check over here as well so what we can do guys um let's add some check and then we will run it on the real device to check if it is actually working or not so we can just say radios if it is not equal to null then only render this otherwise what we can render is in the center we can render a circular progress indicator that's that's fine yeah that's what if we will do that uh and now if i do a hot restart there should not be any problem and yes all good there was a circular indicator which was there and uh for background color i think we can just say colors.white that should be fine okay guys so this is looking fine now what i'm gonna do i'm gonna run it on my real device and so now we have this here running and now let's try to play this and now let's click over here on some other channel let's say this channel so we have the url which is fine and yeah it's working guys sorry i think you could hear the voice i cannot play it for longer duration the reason being is because um like it can have some copyright issues and let's play some other channel over here let's try to play this one so i'll i'll just click on the play button or double click and you can see we have this breakpoint and once we do that you can see okay so it's working fine but the only problem here is that um it's it's like it's somehow some for some reason it was not working on the emulator and that should be fine like uh we will anyway play it on the real device itself okay so um i am happy with this let me just show you how you can change the color when you change the channel so i'll check if the selected color is not null okay then uh for the second color let's say the first color let's make it opposite actually this this is opposite in the design which we are doing wrong all the time okay for the second color what we will do we will have let's say a selected color if it is not if it is null then only we will assign the primary color one otherwise we won't do it right and the second thing which we want to do is that in this particular case where we have this swipe or vx swiper we have something called on page changed okay so how we can use it uh we can check the index so we can have let's say some color okay the selected color so let's say color and we can use radios index dot color and we can assign um selected color on the basis of this so selected color is equal to color dot color um and color we we have the hacks color okay guys so we have to convert this color as well because otherwise it won't work if you will directly try to make it work so what we have to do we have to just say int dot try parse and then we can just directly pass this color hacks okay so rather than color let's make it color hacks and also let's change this from color to color hacks and once you are done with it just use set state and now what i do if i change this oh there is the change in the color you can see and this is i wanted and that's why i was using vx animated box so that when we scroll there should be some animation finally we will integrate the ai in this application so ai for for this we are using allen music so if you will go to pub again so pub.dab you will search something called allen allen voice and you will get this particular plugin which you have to use and invoice the current version is basically 2.0.11 so we can just copy it from here as well so i'll go back in the pubspec.yml i will add this dependency called alanvoice and so if you'll see the read me guys so basically you also have to for android you don't have to do anything but for ios you have to add the microphone permission otherwise it won't work so i'm just telling you from the beginning itself so now once you have added it then you have to go to the allen website okay so you can just say alan dot app so you will go to this website and you can see conversational voice ai platform and what you have to do you have to sign in click on sign in and then you have to sign up okay so you can sign up over here and you can sign up with your google account the easiest way would be to use let's say if this is my account i can use it and once i'll sign in using it i can uh i so i have 53 interactions right if you see i just got 50 free interaction which means i can communicate only 50 times with the uh with the assistant which is a very small number for trial and what you can do to increase this you can go to your billing section and you can um so for promo you can add some funds and you can apply promo code okay so to apply promo code what you have to do you have to write m tech viral okay so once you write m tech viral promo code you will get 2 000 credits for free so if i apply this then you will see that my promo code has been applied and now i have got not 2 000 but in fact i got 2500 which means now my free interaction are like 2 50 right so this is what you can get and now i will create my first voice assistant you can either start with like some example project even flutter project is there but i will start with an empty project and i will name it let's say ai radio so i can just say ai radio and i'll create this project and once you are done with this project then what you have to do you will get this script called ai radio right i want to add one more script and i will name it let's say um you can name it anything okay so i can name it a i data okay and inside that i will have the same json for fm or for radio which i had there as well right but this time if you see i have just pasted that json and so this is now project dot radio so whatever you want to store if you want to have a global access to your list then you can use project dot and the name of the variable so that is radios and i have just the same list if you will go back to your code and if you see this radio.json this is nothing but the same thing right rather than radios we are now having project dot radios and if i'll just save it okay once i have saved it um there is a idea which it is saying which is fine now if if we go back to our package over here it is saying that i can add this button okay so what i have to do i have to add this button um let's say i can go back to our project in vs code and i will go to home page okay i have already created all the ui right so now what i'll do i will um in the init state after any state i will just say setup app setup allen let's see and uh setup allen is another method which i'll just create setup allen and i'll just copy paste the entire code which was there and i have to just import this i guess okay once you have done this you have to replace this key okay this key with your um so if you go back to your projects there is something called integrations on the top right just click over here and let's say we are testing on android so there is your key just copy this cop sdk key and um you can enable for example hey ln keyword here okay and similarly you can enable for example um keep active while the app is in background it's your choice like if you want to do that and wake word in background if you want to do that again if you want to change the button style we can change it as well let's say for example let's change this one a little bit purplish which which is our color and let's match it with arrow and let's save it as custom style one and yes uh you can do different configuration for android ios and web and you have the key already i i believe and now let's paste it again here okay this is your key now and let me just bring back the device as well uh one second okay so now i'll do a hot restart it should not work because you need to um run this app again so i'll just um like disable or rerun the app application again because we are using a new plugin and that so whenever you add a plugin you have to rerun your application it's not a package it's a plugin where some android and ios code is also written so that's the important part as well so now i'm just running the application again it will take some moment and will be very very easily we will be ready with everything because we have actually done a lot of part already okay so um the the ui is one of the things which we have done the second thing is that we can also have something like an audio player which is already working right and we got some error guys let's see so the error which we are getting is basically that this library at least required that your minimum sdk version should be 21 or more than 21 okay right now our version so if you go to uh your android folder just go to app folder and there you will find something called build.gradle if you'll see here the minimum sdk version is 16 so let's change it to 21 okay without it it won't work so that is the minimum requirement on ios uh it's fine like you can i think run over ios 9.0 or maybe 10.0 you have to check it out but it should work right and now we are running it and this time it should work for sure and uh let's see the gradle process as well and i know guys this is a lengthy tutorial but trust me this is this is worth uh trying it out and uh this is really fun you can do a lot of wonders in just one video and let's let's see if yes it's it's working now and uh we got this c allow ai radio to record audio so while using the app or oh yes we can select it and you can see this button right oh are we have we added on the left okay i want to add it on the right in fact but it will not work like hot restart we have to restart the app again okay but now we can do it later okay and so what i'll do if i'll say hey allen so you can see this is active now and it is also listening to me okay cool so what okay it's saying something how are you how did it get it right this time okay sorry about that uh it's saying something uh so uh let's see so now what we have to do so this is this is one part we have done the setup part we have already done now let's go back and to our code and if you see this ai radio we have hello world okay if so what we are doing over here if i increase the font size a little bit okay so here what we are saying we are saying hello world so this this is like when user says hello world it replies with hello or sometimes it replies with hi there so this this pipe symbol which you see is it means or okay so hello or hi there so now if i say if you go back to this thing let's say if i show you here so if i click over here again hello world have you heard so it said hello okay which means that it choose the first one so similarly what i want i wanted to play some music when i say you know play okay so when i say play i wanted to play some music that's very simple right so um so for that what we have to do so see one more thing is that user can you know have multiple ways of saying it so you have to make sure that uh what you are allowing the user to say so we will create another intent over here okay so i can just say intent okay for this intent i will say um that uh play okay so if i say play then what should happen so when i say play then it will give me another callback called this p callback okay and uh what i wanted to play is basically i will say first thing i will say p dot play and um i want to send this command to you know uh to my application that my ai is saying to play some song right so how i will do that so i will create a json over here and the key of the json one second what's happening okay so the key will be command okay and the command will be play okay so this is this is how i will send it back to my app right so this is command and my i'm saying my app to play this command okay and now i'll let semicolon and similarly when i'm doing this i will also say my assistant to say something okay so my assistant can say let's say for example playing now okay something like that so he can say let's say um i'll add some bracket and i'll say playing now okay or or he can say something else as well let's say on it you can like modify it on it or it can say okay boss or it can say let's say uh doing it anything which whichever you want right whatever you want to say it and let's just save it so now when you are sending a command right how we will handle that command as well so if we go back to this code so here after setting up alan voice what you have to do you have to say alanvoice dot callbacks okay dot add command okay so this is how you will handle any command right so you can add some callbacks and uh using this callbacks uh you can like handle this data right so what we can do we can create a method over here rather than doing this manually so we can just say that we have something called handle command method handle command and we will pass this command data to that method so command dot data right and now this handle command needs to be made so we will create this method over here we will call it handle command and this data comes in the form of map okay which means key values right so we can just say map string comma dynamic and we can name it response so this is the response which we are getting and now we can have some switch case here okay so switch case how we apply is like this okay so what is the switch we will check the response with the uh key as command okay whatever the command is right and and how we will do it then then we will have a check let's say the one command which i added was play right if you see here if i go back here then you will see the command is play right so i'll come back and i'll say okay this is the command so what i do when this command is there i will play music okay and url will be selected radio whatever the radio selected i will just send that to play the uh url right okay so this this should be fine and in default case um let's leave it for now like it doesn't matter a lot okay so in default basically we can like just we'll just print that that the command was let's say for example uh response okay command so whatever command you will send here we will just print it and let's break it as well okay so what we are doing guys so if i show you the app again let's do a hot restart again so what we are saying when the user will say play then aaron will allen will see here that what he has to do with play and it will give us a call back in the app and once we get this call back we will play the selected radio that's what i'm saying right so now let's try it right and also let's open the debug console so let's see hey ellen play doing it okay so there is some problem okay if you if you have heard that it's sad doing it which means that was fine but if we see this url it is null okay so that means it doesn't it cannot play anything why why this is happening because once we restarted the app okay this selected radio is basically null okay when we change this radio once we you know play it for the first time then only we change the radio so what we have to do here to fix this this is a this is a very simple uh there is a very simple way to fix it so how we can fix it here in after fetching the radios we can say that the selected radio is nothing but the first radio okay because that's what we see initially and also similarly we can also set the selected color as well and that can be color in dot try parse and we can just assign the selected radio color so selected radio dot color okay so now if i do a hot restart again hopefully this time it will work because we have just figured out our mistake and now if i say hey ellen play play now so if you can see this is playing the music now but this channel is not working for some reason that's why the voice is not audible right now and uh and let's let's do it again but but what we will do this time we will change the channel so sorry for the channel problem but now if i'll say play then this is the selected radio now and uh yeah let's let's see if this is the selected radio or not just to make sure that uh if this is the selected radio so where is our um vx swiper dot builder yeah so selected color is there on page changed selected radio is still not this one so um okay for that as well what we can do on page change we can have let's say if let's say we can set the selected radio just to check it okay let's let's do this so selected radio uh is let's say the index okay just for the sake of doing it for now and let's do a hot restart once more so now this is the selected radio uh whichever we will change so let's say this is our selected radio now i will ask ellen to play it hey ellen play play so you have heard like this is working the only thing here is that you know user generally does not say always that just play okay he can say play some music he can say play music okay so we have to handle that case as well so what you can do here you will go back to your um like this intent rather than just saying play we can also add let's say either i can just say play so i will add it in brackets that i will say either play or i can have some commas over here so i can like you know i add some comma and basically i can specify more values let's say i can say so play music so play will be there but let's say music play some music okay so some music i can add some and if i add this pipe over here after some which means he might not say some okay so that's one possibility so he might skip some and then music so what it means that play and music is compulsory but some is not compulsory so he can say play music then also this will work if he says play some music then also it will work and if he let's say if if you want to see one more example then we can say ah d okay d and with this this uh this pipe as well so this means now he can say play some music he can say play please play the music or he can say play music okay so now if we go back to our uh our code and our assistant hey ellen play some music [Music] so you just saw light i'm not playing it for a long period because i don't want to get into the copyright issue but yes so uh this is this is this is what uh we can do right but this is not just it okay this is just one part of it now what i want if i say allen to play a particular channel right it should be able to play also i want it to stop the music when i want right i'm just saying that just to play music it's doing everything and at the same time i also want to support play next channel play previous channel and all those things right so uh what we will do we will write few more intents for that so the second intent which we are gonna write will be for stopping the music or maybe um or maybe for pausing the music okay so right now for us because it's a radio passing and stopping is almost the same thing here but uh yeah i mean you can do it so let's say the first command is stop okay second can be or not just stop in fact you can have let's say okay stop is fine the second can be um stop it okay where it can be optional so yeah i mean rather than this why don't we just say um stop is fine but we can also have something called it right yep so we can just say it stop it um and uh stop and we can remove some but it can be stop the music okay or stop music something like that okay this can be one more case similarly we can um we can copy it again and we can paste it again but rather than stop this time i can say pause and pause the music okay and uh this time rather than sending commands play we will send command s stop and rather than playing we can say stopping now on it okay boss doing it looks good and now we will just save it okay second uh which we can so you can see this is our global context we have hello world play stop it and another intent which we can add can be you know playing next channel um so i can add another intern let's copy it rather than just writing it from scratch so this time we can have let's say previous channel fm radio something like this so we can have um maybe in one go itself let's try to write something over here itself so um we can say let's say play we might not say it as well so play we will add a pipe for this as well which means we might not say it so pipe and then we can just say next okay so next uh and then we can say either channel some people will say fm some people will say radio so it should work with all the case okay and some people might skip everything so they can just say next or play next or play next channel fm radio okay something like this and uh this time rather than play will say will send next okay and let's remove playing now we'll just say on it okay boss okay and doing it and let's say you can just say another thing let's say sure okay so something like this and similarly i'll add uh one more this time and that will be previous okay so um and uh command can be brave okay so yeah we have added couple of intents more intense but at the same time we have to handle them as well if you want to be able to handle it then again it's a problem so we will go back to our code we have added one case called play similarly i will add another case over here and this time i will call it stop okay and when we are saying stop i will just say audio player to stop it right whatever it is playing just stop it right and this should make it work right and [Music] then what i want i want to do something on playing next right so what i can do for playing next so i will add another case over here and because guys uh if you see this like velocity x does not give you a call back when if you let's say if you want to change your page directly like this like using a method or something we will i will add it in next few updates but for now i'll give you a hack of how to do that so if you say next okay and if you want to change this page as well so one thing is changing the music and one thing is also changing the page as well right the current page so how we will do this so let's say the case is next so first of all we will find the index of the selected radio so the index so the selected radio so how we will find it so all the radios have some id if you will see the radio.json so you will see id1 id2 so all the radios have some id in ascending order so we will get the index using this id okay and then what we will do we will have something let's say new radio which you want to play next one so my radio will be let's say new radio something like this whatever name you want you can give it and we will check if the index is actually greater than one right or not not index actually uh we should check for plus one okay so index plus one is actually greater than um the radius dot length because if it is um greater than the length itself then what it means is basically that you don't have any other any radio in the list anymore right so the index if it is greater than index plus 1 is greater than the length then what we will do the new radio will be actually um let's say radios dot where not where but rather first where okay where the element dot id will be one okay so id is equal to square to one so what i'm saying that if if the length is more than the you know if you are on the last channel and if you want to say next then there is no channel right so it will go back to the first channel so that means id is equal to one and then to re uh you have to like uh change the uh kind of so what you will do let me just explain so you will first of all remove that channel from the list so let's say you will remove new radio from the list and then you will actually add the same thing in the list insert at zero index why we are doing this because we want to just modify the list because we don't have a callback to change to next page so this way the list will be refreshed and this ui will be rebuilt that's why we are doing this right and once you are done with this um so okay so this this this is one thing and second is let's say if what if the index uh is actually not greater than the radius length right if there will be an else case as well right so in that case what will happen we will just copy and paste it that time um we will check for index plus one right so where the index plus one like that we will get the new radio uh whatever the radio we have currently selected and plus one to it right and then we will do the same thing and after that we will play music based on um let's say new radio dot url okay so i'll show you as well like how this works right so let's let's uh do our restart once more and let's see if that works right so i'll ask hey ellen play some music on it so now it is playing this music but obviously you know this channel is has some issues so now what i'll do i'll ask him to stop stop the music and you can see the music is stopped right this play button is now like like the stop button is removed now i'll say play next so you can see it is playing this next channel and it also changes this channel to the next channel right but rather it it didn't change it but if you'll see it then uh actually it rearranged rearrange the list so that's a hack for now but i'll add this support in this library very soon in the next few version in velocity x so that you can you don't have to write this logic but rather you can just say animate to this page animate to next phase that's very simple right so yeah so this is this is what you have to do for next right similarly you have to do the similar thing for previous channel as well so i'll just copy this case okay and i'll just paste it here and this time i will say prev if it is saying previous then how will go back to previous right so this time rather than rather than checking index plus 1 is greater than or not i will check index minus 1 should be if it is less than or equal to zero okay then we will actually assign the first element right so this is fine otherwise what we will do we will just say index minus one here and this should be fine so now if i say hey alan play previous music play now okay so previous music it got confused uh hey ellen play previous fm okay boss so you can see it changed the um like you know fm and it went to previous one now one more thing guys like two more things we will add one thing will be to play a particular channel so if you see every channel has a name let's say it's this is 92.7 this is 98.3 this is one zero two this is one zero four this is ninety five ninety four ninety three one zero seven so every channel has some name right and i want to now play the radio uh which i say let's say if i say play one zero seven fm right then it should play that particular fm so how we will do that right that's the next question so i will add another intent over here on the top and this time i will say that my intent will be play okay and now i want to provide a variable right uh which can be replaced by anything which i'll say let's say 92.7 let's say 104 so there can be multiple ways how i can say this thing right like multiple channel names so i will add this dollar sign okay and i'll add a bracket here and i can give it any variable name let's say the variable variable name is channel okay and i'll add a star as well okay and it will follow for everything so we can add it like dot star here so this is the syntax which you have to just use right it's it's very simple and then after i can say fm so i so what it means is basically play this fm so play 92.7 fm let's say for example okay so this is what we are doing and then what we will do we will again we will have a callback here and we can just say now uh when we do this we can actually fetch the value from this channel right so how we will do that so first of all we have to find this channel if we find it then it's fine if we don't find it then the allen will say that okay i cannot play this music okay so how we will check it now so we'll say let channel okay and and one thing which i forgot to mention is that this allen scripts are totally javascript you can add any javascript code which you want you can also read the documentation how to you know uh work with it and there is lot of like testing which you can do directly from here as well you can debug it you can run it in development testing production and you can also see the error syntax errors and uh whatever if you see here all the scripts which are running whatever command you are saying you can check it even you can um check your recording like what what the user is speaking if you want so um so this is one thing so yeah so let channel now we have to apply some logic to check that okay which channel is the user asking for so if you remember initially i told you that if you want to access your radios anywhere so it's a global context so i can directly say project dot radios right that's how i saved it and then i can filter using the filter like this is a normal javascript code and then let's say i can check for x and x dot name okay and i will also make it to lower case so that there is never a problem of casing and i will check for triple equal to that if this channel so this channel which the user is speaking okay so how i will access this i will use p which is uh the callback which we get like this from here dot the variable name which is channel and there are two things usually one is the value and one is the label right this time we want the value because there is no level associated to it okay and we will also make it too lower case right and obviously guys let's say for example there can be more than one channel with the same name for example like i'm just assuming then i will because this filter will give a return the list so i just want the first item if there is only one item that's fine like the zeroth one is what i want right and so this is how i'll get the channel right and now um maybe it can fail as well right so maybe the channel is just undefined you don't get any channel so i'll also add a try catch here right just to be on the safe side so i'll just say catch okay some error can be there so error i'm not specifying but what i'm doing so if it falls in the uh if it finds the fm then i can say p dot play okay and alan will say lln will send a command let's say command okay and the command will be play channel okay so rather than play we will say something called play channel right that play this particular channel and which channel we can add one more property to this anything like whatever you want so i am just sending an id of the channel as well so that our app can play that so we can just say channel dot id id so what it what it is doing basically if you found the channel then you are saying that okay send this command play channel with this id okay so that the app can read it and at the same time i will also say p dot play right and this time that this is basically what alan will speak so when you use this curly black phrases then it is a command when you just use a string that means what alan will speak so this time you can just say uh maybe you know playing now the same thing basically i'll just copy paste it in fact this this is not something which i want to like you can add anything man like this is totally fine okay what if you see an error so we will also print this error on the console so that's why uh let's say for for just understanding if you fall into this zone then you can just say can't play and when you say can't play then you should ask the uh you should tell this to user as well right so we can just say i cannot play this so this is what user will hear okay yes this is this is done so this is basically when user will ask for a particular channel to be available right something like that now you have to implement the same thing in the app as well so we have written for play stop next previous and all that so now after play now i will add one more called play channel okay so this is the this this is the current use case so i can just say play channel okay and this time i want to play a particular channel so that's what the uh the the allen sdk or alan sdk is gonna just return me the id of that channel if you remember if you see here it is returning me the id channel dot id right so based on that i have to do something so what i'll do first of all i will fetch that id from it right so i can just say here play channel okay let's remove this i can say that okay i am getting an id and how i'll get it i'll check the response with the key id okay once you get that then what you have to do um you have to first of all let's pause the music okay because uh it will give you some time to uh release some resources if it's like that okay and then uh basically he will do the same thing which we did for kind of next previous right so i'll just copy the same code okay and i'll paste it here so basically there is a new radio which we will use this time again and so we can just say my radio as new radio so we will check first where element id is not one but rather id so we'll check for the id then we will remove it from the list and we will add it on the front that's that's that's the way we will do it right and then once you do that now we you have to play it as well right so how you will play it so basically you will just um what what you can do so you can just say play music over here and you can just say new radio dot url so you will play this one as well right so now let's let's test it right let's test it so hey ellen play 104 fm it is playing this fm actually but it is loading like the fm might take some time to load let's try some other fm maybe hey ellen okay hey alan play one zero four one zero seven fm i cannot play this okay it's saying i cannot play this because that fm is not available like two fms are not available at once hey ellen play 107 fm so you just saw like uh okay and if you want you can remove this script as well right it is in their settings in the in your uh this particular uh if you will go to integrations okay you can just disable that setting so if you go here in android so if you remove this show a speech to text panel then it means it will not show it right and by the way guys since uh we are testing it you can also check how much uh uh you have left so we we just lost seven credits so we have a around 2543 itself okay so guys uh this is also done one more thing which i want to do is um i also have categories assigned right so if you see this application you can see we have classic hip hop pop rock so usually people say okay play some rock music okay play some hip hop music something like that right so what i'll do i will again write the same intent and with the same thing in fact but this time rather than channel we will specify category okay so um i i won't waste your time but rather i'll just copy and paste that so if you see this so um this is nothing but the same thing play some it can be optional so this that's why this pipe category music so let's say i will say play some pop music or play pop music and then it is actually filtering category this time rather than channel and then it is saying okay and descending back the channel id so right now do you think this time we need to create another case for it not actually because we are using the same play channel with the same id logic this time but it will find the first fm with that particular uh category and it will try to play it so let's see for example if we try hey ellen play some rock music [Music] so it's if you see this is the rock music um the 98.3 fm which it was playing so let's see where is the rock music okay so see here we have the rock music which it was trying to play so um let's do a hot restart that's why it didn't refresh i guess let's try it one more time uh this time we'll say hey ellen play some classic music so you can see this is the classic category you can check and uh it started playing that as well so more or less you know we have done the development part of this ai radio there is one more essential feature which you might have seen as well in the demo which i showed you that this is fine like we have done everything with this like we have played with a lot of things we have created some intents as well and uh um you know what else is required is from users per perspective that how a user will know actually that what kind of you know songs he can play right that's a good question right like how a user will know not songs but rather what commands he can give to ellen so we can also add some suggestions to this right um on the top of it we can show some suggestions right and how we can do that so i will add a list over here of suggestions this is hard coded but you can again you know make it dynamic with some api or something so as you can see we have some suggestion here let's say play stop play rock music play 107 fm play next play one zero four fm pause play previous play pop music okay so we have all these options right and uh what you might want to like do apart from this like this is one thing which you can do uh the second thing which you might want to do is basically that you want to have some chip which will auto you know auto play auto scroll and it will show all the suggestions right that's what we want so how we can achieve uh similar stuff right so um and also this drawer is not doing anything right we i also want to show all the channels to the user like what channels are available right so um i'll do all of those things now and we will add that so what we will do so first of all let's add the drawer and then we will just add the last part as well so in drawer what i'll do so drawer can take a child so child i'll add a container and this container will have a color okay and we'll use the same logic we will use selected color if it is null then we can use ai colors dot primary color 2 okay and then for its child we will check again if radios is not equal to null because if it is null then we can't do anything right and if like we don't want to show anything if it is null so you'll just say off stage but if it is not null then what we want to show we will show a list view okay so uh one more thing which i want is basically i want to show a v-stack we stack why because um let's do one thing let's okay so basically we will show first of all all channels on the top right so we will say all channels this is just a text right and then we can say text dot excel dot white dot semibold dot make and also let's try to give some padding over here why i'm doing this i'll just show you right so now if you see uh let's open the drawer let's see if we see this okay it's on very very top so what i can do i can give some height as well let's say hundred dot height box and yeah this is fine so all channels we can see now i also want to um so yeah one more thing guys you will when we will restart the location of this allen will go on the right because we have set on the right okay so yeah that's something which is not still there but yeah you can do it right you just restart okay so all channel is there now to show all the channels uh we can have a list view so after that i can just say 20 dot height box and i can uh like this and now i can add a list views so i'll use a list view okay normal list view because if you want you can use a list of builder but right now i'm not using it so i'll give zero padding because otherwise this this drawer does not look good and then i'll also say shrink wrap to true shrink that's the question at least you have this property right shrink oh wrap yes okay this is fine now uh for children uh we will map it with the list so for children it has a children property so we will add radios dot map so what map will do basically guys it will give us like some items let's say e and uh we can like just say dot to list over here okay and also we can just a dot expand okay why this is not working it's still a question uh this is fine this is fine where i'm lacking actually let's let me find out what might be the issue here white's giving some okay so we will use a list tile basically here okay yeah this is fine and in the list style we can have title subtitle and leading so leaving for leading we will use a circle avatar where we can show a background image and for background image we will use network image first of all and then uh all these channels have this icon okay so one thing we are using is image which you have seen like this lady on the background similarly we have icons as well i'll just show you and then for the title uh we can just say title is there which we get with this style and we can just say let's say some fm so we can just say e dot e dot name okay fm dot text dot white dot make okay so let's see if this is working or not okay so if you see if you click here you can see all the channels are coming over here and this is looking fine and uh okay this is giving some error as well which is fine and now um this is done for after title we can have something for subtitle as well so for subtitle i can use just the tag line p dot tagline dot text dot white dot make so yeah this is this is basically what uh we need right and then for this v stack i can just say cross axis alignment to start and yeah this is looking fine now why i added the color if you do a quad restart now then you will see the colors as well why i added it so if you see here this is the color which we get if i scroll here the curl will change right if i scroll further the color will change again the color will change so yeah this looks cool okay so this is again done another thing is done now um one more thing which i want to do guys is i want to show those chips which i told you right so how we can do that right so um we can have like where we are using the app bar so this is the place where we are using the app bar right we can also show something um like we can wrap it with the v stack and what we can do we can actually say uh that is start with hey ellen and use few things right so um okay it's just here heard me whatever i'm saying okay so what i'll do i'll add a list over here so i'll add some list like this dot b stack so this will add the list for me and after the app bar i will say let's say i'll give some height first of all 20 dot height box and i'll say hey um no start with hey ellen okay one second don't listen to me so and then i can also add a down arrow something like that like emoji and uh so this is just a unique word nothing else and then i can just say text dot uh italic dot semi bold dot y dot make so what it will do it will add see this start with hey ellen something like this and then after this guys what i'll do i will have another okay why ellen is keep listening to me okay and after this we will have something called a chip using the same vx wiper dot builder so i'll just say vx swiper dot builder so item count this time will be suggestion dot length so suggestion dot length and for item builder i will uh use this again and this time what i want to do this time i also um i want to set the height rather than aspect ratio so i'll just set a height of 50 and then i also want wanted to auto play which i do but right now let's let's uh render the some ui so i'll say let's say for suggestion as such and index so i'll get the suggestion now i can return a chip okay so a chip is nothing but another flutter widget which you can use and uh it has properties called let's say label so i can just say s dot text dot make and it also have a background color which where i can just use vx to give some random color okay so you can see we have this play if i swipe then you have stop and i want to auto play it that's one thing plus there should be three four actions visible up front and also i want to give some height box after this thing okay like of 20 or maybe 30 oh this is fine let's try removing this one yeah this is fine this is looking better now okay guys so uh we have play some music okay now there is something called viewport fraction so if i give it let's say 0.35 then you will see we have more items over here right and also i want to play it right auto scroll it so there is some a property called auto play let's make it true and you will see that it will start auto playing if you do a hot restart then you will see that uh this will play automatically okay for that you have to give some duration as okay so see this is playing actually but this is not looking good why because uh one thing is that there is no duration uh which we have specified so i can just say auto play animation duration let's say three seconds and also the we will change the curve okay we will make it linear because that will look much better for this particular use case and yeah this is looking much better and much subtle and then we can also say that it lets uh make infinite scroll to true and you can see like now now the user can see okay play some music you know play these are all the actions which the user can try so this is not totally clearly uh you know visible right okay this is one thing guys now the great part about this tutorial is that this particular thing will work on web as well but alan will not work there but at least the music player will work okay and if you want to see that then let's let's run it on web as well so here i will just say flutter run the chrome and let's say if it runs it on web as well and we might have to change the ui a little bit uh to support web but but yeah this is working actually and everything which we have added is working uh like if you see the allen studio that is also working perfectly fine like all the commands and everything which we added is working now we also got uh this thing guys see this is this is what we got this is very very large and what i'll do basically to fix this um we can add we can use velocity x to um you know check for if it is small or if it is large something like that so i'll go back to code and we'll check for the aspect ratio where it is 1.0 okay so what i do i'll check if it is mobile okay or we can check for md window size rather so uh if you see there is something called md window size okay so basically what it means is mobile window size so we'll check if it is extra small then we will set it to 1.0 otherwise we will check again if it is let's say md window size is actually um what mobile window size dot medium okay if it is medium then we will say 2.0 otherwise they will say 3.0 okay 2.0 as 700 okay so we have added some checks and if we see our app mobile app it is looking fine let's do a hot restart with the web app and uh this is looking fine as well right guys we don't see the allen logo over here so which channel let's try some other some channel which this one yeah this is actually playing yaya so they see this is playing and even idm is saying that i can download audio from this page so yeah this is like buffering a little bit but actually it is playing so yeah i mean the purpose is solve guys if you try to play this one and if you want to download this app without ai i have radio app which is already on play store and app store you can check it out i will try to add this ai to that as well so yeah this is perfectly working fine but this allen is definitely not working in this case but that is fine this is more or less this tutorial i know this is a lengthy two hours tutorial to understand everything from scratch that how to write your own ai assistant and uh the entire application we created in just two hours and what a great uh like uh you know way of doing this thing from alan studio and again make sure you use my promo code m tech viral when you go there and uh when you write your code for your assistant also there are certain examples which you can use like and now the thing is that this is just one example where i just try to show you how you can make your music app but you can use this voice ai assistant in any kind of app let's say if you if it's a if it's an e-commerce app if it is an maybe you know some news application so there can be lot of scenarios where you can use it and uh so now uh when you go from development to testing and on and then in production your key will also change like you have to add slash testing and slash production that's one thing to um like you know to mention which i just want to do then you can enable disable and whatever you want to do you you have all the things here as well then check out their documentation as well this is really good documentation where you'll see about pattern slots i haven't gone into the details of everything but i have explained everything in a very easy way so that you don't have to you know get into so much of the technical terms but rather you can easily you know do things using ln ai and i hope that you learned so many things about flutter about velocity x about alan ai and guys because it's a conversational ai right so uh like user might want to have some conversation as well with this particular ai so in that case what you can do is basically you can add your like more scripts to it and for example if i click again on this ad script here then you can see like you know you can integrate some example like you can have like something called bitcoin where it will give information about bitcoin prices over the past few week months or whatever then calculator calendar directions flutter related uh scripts are there food ordering scripts are there so lot of things one of these things like like news is a really important one and another one which is i really like is small talk so it actually if you see it gives responses to casual conversation so you can just check check box here and it will add the script example here so what is the advantage of it i'll just show you so you will see that it already has like you know so many things let's say title is small talk here the question you can ask let's say hello hi there and uh you can also use reply which i didn't mention in the ai radio script so reply is again the same thing it will reply with hello hi there what can i do for you something like that then the question can be how are you are you good or bad and all those things and yeah so if you'll see it has a lot of conversational questions uh including will you marry me and all that but that's fine uh it will be fun because a user is interacting and since it's a ai voice assistant application so obviously it makes sense to you know have this conversation as well so let's uh test it as well so if you click on not here but rather let's go to edit and as i told you uh you all also get this thing where you can just debug things so i can say here let's say allow hey what's your name so it is saying my name is alan what's yours okay you might not be able to hear because i am recording it at the same time but let's try it on the app itself right because we have added it so um and we will add one or two more things for the user as well so if i go back to here and if i say hey alan what's your name my name is alan what's yours okay so it's saying of course it's name is alan okay what i can ask here is let's say how are i'm you well thank you so you can see it's it's what we have written uh you know over here as well and uh let's say if someone is interacting with this particular application right he can have certain questions as well which we can add in our ai radio script as well so if i go here then um maybe you can just you know copy one of these things like let's say you can copy this question and uh we can have uh here uh and we can say what this app can do okay uh one second let me stop them allen okay what this app can do can be another question which someone can ask and we can reply with um this is a radio app where you can ask me to play some music okay and you can add more things to this or we can also say that what this app can do and we can have similar question um like what else the question can be asked so we will add some comma and i'll ask that as well so let's say what does this app do similar questions right so let's try this one and let's see if this works okay it is saying that there are some errors in our script what might be the error let's see okay we can also check for errors and uh i think the error should be somewhere from okay we are missing a comma over here i think that's the error and now uh let's let's try this out uh we can write here as well what this uh app can do and it this is a radio where you can ask me to play some music so if i go back to the app itself here i can ask as well hey ellen what does this app do this is a radio app where you can ask me to play some music so see this is this is the cool way of integrating the conversational um like chat or because it's a conversational ai so it can also be a good feature for your application as well so and this is how you can you know test it you can also write create your new test cases and all that stuff as well and uh yeah you can play here scan qr visual state i haven't described but yeah i can make more videos if you want in future as well so yeah that's that's what i wanted to show you guys um and and this was a crazy tutorial itself all around and the source code will be there also try not to use my api key and my uh you know username or things because it will anyway like cross the limit and then you won't be able to use it but rather just you know just try to create something by yourself and try to play with ln ai and i hope that you will enjoy it and uh this application source code will be available on github so you can check it out also if you like this entire video and entire twitter press the like button subscribe to the channel right now also press the bell icon to get future updates and i'll see in the next video bye bye take care and have fun and keep sharing keep loving and yeah that's it from this video tutorial [Music] you

Channel: Codepur

Views: 72,469

Keywords: flutter, flutter sdk, flutter tutorial, flutter tutorials, dart, flutter course, mtechviral, alan ai, alan app, voice assistant, voice recognition, radio app, music app, flutter music app, flutter radio app, flutter alan ai, flutter alan studio, flutter ai app, flutter tflite, flutter artificial intelligence, artificial intelligence

Id: p4xh7zTt6i0

Length: 117min 31sec (7051 seconds)

Published: Sun Dec 06 2020