Add Flutter To Existing Or New Android App | Tutorial

hey wassup guys welcome back to my flutter tutorials and in this video we are going to talk about something which is kind of very interesting and that interesting stuff is that how you can add flutter to your existing mobile application which which can be android or iOS app so I'm talking about the native application here and how you can integrate the flutter app or view inside that native application so in this particular video we'll talk about how you can integrate the flutter in your android application it can be existing one or it can be a new one on like suppose you are making native android project and now you want you for a particular view you want to use flutter because there you find that it is kind of very easy so I'll cover that in this particular video and that is something which is still in experimental phase you can say but it works pretty well and don't actually expect everything to be working there can be few issues also but we'll try to cover many things in future videos as well so it's just to get started with this so I am just assuming that you don't know how to make a native Android project so I'm actually starting with one if you have an existing one then you can use that so we'll go to Android studio I am using version 3.2 all right here I can say start a new Android studio project now I have to give it some name so I can say suppose I add flutter ok and here I will make a folder Android to flutter and the add flutter is the name of the project ok you can give any name if you want to use it Cortland then use quarterly in otherwise I'll leave it like Java because many of you might be aware of Java only and now here we have to choose the target so target API is 21 ok so the application will walk on this API 21 or the above one ok now I will press next then it will ask which kind of activity you want to add so I'll go with an empty activity now we have an activity file and a layout file which is activity underscore main now I will just finish it and it will take few seconds to create this project for me okay and this this is how we will be ready I guess okay so so so so it's gonna take some time and because I don't do any cut and edit or all that stuff in my video so you have to be here with me or just go to next few seconds if you want to you do if you don't want to just wait here so it will not take that much time because I'll make sure that if it is if it is taking very long time then I'll do something with that okay so as you can see we have this app folder now okay and then we have something called manifest Java folder so it is still actually doing some work in the background I guess okay so mostly we are ready so now what I want to do is basically I want to show you exactly how this folder looks like okay so I'll go here and I'll go to mobile and then we have this Android to flutter and this is the air flutter project okay now here you can see that we have this app grayed out file and everything like if you are building any normal Android application then this is how it looks now we have to go back to this add flutter again okay and we will go here to this particular location inside and row it to flutter so I'll go back to terminal and we are right now inside add flutter but what we have to do we have to go back to the Android to flutter or repository so what we want actually this add flutter is our Android application and with this add flutter we want to have our flutter application as well which will work like and like Brady like a library for this particular add full auto project okay so what you have to do you will open the terminal you will write CD dot dot go back to Android to flutter now here you have to write a command so if you remember about using flow so if you use flutter then you know that if you want to create a flutter project from scratch using a CLI tool okay or the command line interface maybe you are using visual studio or anything like that if you are not using Android IntelliJ then there is a command flutter space create and the name of the project but here we actually don't want to do that we want to use this project as a kind of library okay so there is a different command you have to write flutter create normally which you write okay then this is - T and then you have to write module and now you have to give the name of the module so what what module we should give so say demo flutter ok so this is the name of the module so demo flutter and just press ENTER and what it will do it will run few commands in the terminal and it will generate a flutter project for you which which will actually walk like you can say like a library ok so this will create some files I will show you what what it is actually creating ok so it is done now I'll just switch back to the my finder or the File Explorer where you can see what X exactly is happening because in idea it will be a little bit difficult for you to understand if I will show by that so here you can see we have these add flutter which is again an android project normal Android project now we have this demo flutter okay if you will see this particular code also it's this structure then we have the normal flutter directories which we get with our flutter application so here's a leaf folder where we have this main dot dot and everything and then we have this dot Android okay now the main purpose is that these dot folders are actually hidden folders because I have enabled viewing this hidden folder that is why it is visible here but these are some hidden folders and what it is doing actually it is wrapping up this particular module in a this demo flutter it is actually wrapping this particular project has a Android library okay so we don't have to go into detail so um as you can see in this dot Android folder we have this flutter structure okay and we have this source file and everything now if you want to generate what you can say if you want to build this particular library then you have to go to this dot Android folder so let's say I want to build this particular library because I am saying that it is a library so it should be built okay there should be a AR file should be generated right because um we specify the our file of the library as an AR file when we are dealing with Gradle ok earlier it used to be jar or so you can still use that but you have to do some on tweaking around that so what we have to do now this is not necessary you have to you don't have to actually do it but if you want to see how you can build this library manually then what you have to do you have to go to your flutter project now the name is demo flutter so let me just clean it first so that okay so clean will not work clear should work yeah so now we will go to our flutter project which is you can see the name is demo flutter so here is a is CD demo flutter now I'm inside the demo flutter now again go to the taught Android folder so I can write something like this now I am inside the dot Android folder I have to run a command on Gradle command which will actually generate this what you can say archive file for me okay so that that's how I can build this particular library so I'll write dot slash Gradle okay W okay which means cradled W is for wrapper is then space flutter okay then you can write a colon and then us assemble debug where they will be capital ok this command is actually used to build the particular library so you can use it with other libraries as well but this floater thing will not work so you will see all the details if you want to do that in some other libraries so as soon as I will enter it then it will start this Gradle demon for me and it works pretty well so many of people actually say that if you are androids did you takes a lot of time while building Gradle then use this particular command-line tool to actually do the great early stuff and it it actually works faster than the usual a building process through the user interface so I don't know how much I have seen that it actually works pretty well but you know I don't want to talk about that here so as you can see build is successful now if we will go back to here and then dot Android flutter project then you can see here on this fluttered directory has this build directory again and then we have some outputs then our and you can see we have this flutter debug dot r5 and this art our file will be used by our Android project and this is how it will interact with it ok now what I want this is my host application ok the Android one which you can see on this screen now I want it to be dependent on the flutter module so what I have to do I'll go here or maybe I can switch to a different view maybe ok Android works fine okay so what I have to do here I have to go to my greater setting start grader and I have to tell it that please include one of the project which is a sub project ok and that is my flutter one okay so um you have to write few lines of code for that so you can just copy it if you want so we will write set binding ok and now it will ask for the mining so I can just say new binding it is ok and now it will ask the mapping variable parameters so I can say greater okay Colin this okay this should work and now we can say in the next line evaluate and now it will ask for files so we will say a new file okay you don't have to actually remember this whole thing you can just copy and paste it because it is not something which actually will help you a lot so just settings dot dot dot parent file okay and then put a comma here now you have to keep the path of that groovy file so just right here what was your flutter project so it is demo flutter if you remember slash we have to go to dot Android folder and slash there is something called include okay underscore flutter dot groovy okay you don't have to actually remember it just just copy it like this and just press sync now and this first at the first time this will feel like a big process but it is it is not actually you will be you will become familiar with this whole process if you will try once or twice so don't worry about that okay so this actually allows the flutter module to include this particular a flutter project when we will add it as a dependency inside our build order cradle okay so I just show you how we can do that so basically this this is actually very compulsory to write because um it tells our Android application now you can what you can do now you can you include this flutter project okay and for that you have to specify which file you want to include okay so this is how you gave the file name and everything now what you have to do you will go to inside your app folder now this bill dot Gradle is an app you can say what what what what we used to say it that is something inside your application so they are a two billion lot greater one is project based and one is the app based so this is where you have to go and if I switch to project mode then you can see it clearly that it will be inside your app folder this will dot greater okay you have to go here and as you can see in the dependencies section there are lot of dependencies here and you need to add the flutter because we are using flutter as a library here so like you add any other library you have to add this also so you can write implementation and because it's a project so we can write project and you have to put a column then just use this so you know this : and then you can write flutter and now you will sink it okay so if you if you have a little bit confusion or maybe you are missing something here then don't worry we'll try to actually cover all of these okay so now as you can see we have this flutter implementation done here okay now um so basically what we did let me just introduce you again the concept so when we started we had this add flutter project which is an Android project then we went to its parent directory and there I ran a command flutter create team module and name of the module which created this particular flutter project for me and then what I did Eirene a command to actually build that library because I'm using that as a library then that's that's not even compulsory then I went to this settings not greater where I said that you know what I have a library which I created now I want to include this in my flood or this Android project so it is saying that you have to specify what kind of library it is so I just specify it like this then I went to my app app level build water creditor and there I write that please implement this dependence here as well because it is my flora dependency that's it and you don't have to write anything okay now if you don't know then we have this SRC folder where we have all the code of the Android application so inside this main folder now we have this re s so as I'll just switch to the Android mode here then if you will just go to re s then you have layout section where you put all your layouts so if I will open this so this is how your app right now looks like okay there's a hello world which I can just delete right now because it does not make any sense as of now now this activity is actually attached to a one main activity so this particular activity main.xml file is kind of a UI file which we use so if you have already an existing Android application then you already know all of this but you just have to I have to repeat this because for any of you who actually who is actually new to both of the platforms okay so this is the main activity waves and sorry for the background noise I cannot help it but this actually happens with me every time so as you can see this is a main activity which extends the app compat activity which is the new thing as you know and then we are actually setting the content view as our this layout which is the activity mean okay now we what we have to do we have to include our flutter project okay so what you have to write for this okay so first of all you have to create the instance of the flutter view okay so how you will do that so you can simply write here you okay and let me just okay so import this class okay so we have this view and I can just say it flood of you maybe and then you can use this flutter dot create view so the create view is again you can see if we go here it is a static method which this flutter class provides us it will take some parameters what are those first it wants an activity okay so activity is as you can see main activity dot this okay okay and then it is asking for a life cycle because it wants the life cycle of the activity so there's a simple matter which is get life cycle which will give it a life cycle then it wants a string which will give an initial root okay so whatever view you want to show a flutter view it should have some kind of route within it okay so by specifying this route you actually specify which view you want to show so you can give it a random name anything you want and then we will have to declare this in our floater project okay so let me just give it something like maybe r1 okay so this is our root our one okay you can again I'm saying the same thing again and again you can use any name which you want but you have to specify this inside your flutter project as well now this is a view now you have to place it in your this particular activity main so there are two option one is you can use a fragment or what you can do you can use the normal coding and add the layout using a frame layout or something like that so let's just do it by using a frame layout as of now so what we can say frame layout dot it should take something called layout parents okay it's missing something there should be the layout problems okay so we have so layoutparams and we can name it something so let's say frame layout and now equal to we can say new frame layout dot layouts proms now you have to specify what will be the width and height okay so let's give the width as so basically it should ask for written height so what basically what we want so we can say why it is not showing that it should show okay okay okay I don't know why did not showing that yeah now swing this what what it actually takes so it takes a width as well it takes a height as well and width and height are actually compulsory so what you can do you can actually say layout params dot match parent for width okay and the same thing for height and that means that you actually want the whole bit and whole height okay so as of now I am using it okay you can change it and then what you have to do you have to actually tell it that you want to add this particular view okay so what you can actually do so I'm not going that much into detail but if you just right add content view so this is like adding on the top of the view okay now you will specify which view you want to add so you will say I want to add lateral view now it will ask for the parameters so this is our frame layout okay you want this particular parameter to a like what will be the parameter followed by this view so it will actually follow this match parent the width and height should be the maximum okay so that's it I mean you added the flutter view now what we will do we will open here the flutter project on another window so I'll go to mobile Android to flutter and this is my demo flutter I will select it and open it so that in the new window so that we can do some changes here as well okay and now if you are familiar with flutter then you know what's happening here right okay so now we have this flutter project now you don't have to do anything else just have to let's this let's do one thing let's delete all of these okay so that you can get the basic idea so what I am going to write here and just writing import flutter material dot dot okay then as usual I will write this void mean okay and then I'll say run app okay fine this is this is the normal thing which we we - right okay now what I can say I can say truth widget okay which widget you want to show okay and one second choose widget okay and now inside this method we will specify something called window okay we will get this window by importing our dot UI it is inside this thought UI package and this window can take this default route name so you specified our out there in your flood or in your Android project if you see here this is there out our one which we need to specify in our flutter project okay so now I will make this method choose widget so that using this particular route name you can specify which widget you want to show okay correct so don't have to do that much okay now I just make a method here which will be returning of widget so widget choose which it okay and there will be in this string we can say a route which were it will take which is right now our one and then we can actually add some switch cases here okay so let's say I just want this route for let's let's add this switch and then what we can say something like that this let's say if case if let's say this route is our one then I want to do something okay and if it is not our one then let's do anything okay so I can just say my flat of view if it is not urban then obviously you can change it okay so this is what we need to do now actually it wants this my flatter view what it is what it is exactly okay and what if we don't have any from our one okay so for the default case what we can do we can write something like default should walk here right if I'm missing something no I guess so let's just add it for fault if that's the case then we will return let's say a center widget and in its child we can just say text that unknown okay or we don't know what kind of root it is so we can just we can just also right let's say once again guys unknown route okay now this my flutter view is not available with us so what we can do we can write a stateless widget which is my flat of view okay and rather than container we can say then we want a material app like we normally do with our flutter application it will take a whole screen and we can just say it falls as debug show checked back home mode banner then for home we can say home page or home widget whatever you want to call it okay now I'm I'm using again this stateless widget snippet and in the home page we can use a scaffold okay we don't want to show an app bar because we already have a app bar in our material app so if you will go to activity main then you can see we already have this toolbar so we don't want to show that so rather than having an app bar in the body part we can just maybe use a card or something like this okay and we can just give it a color let's say color start black maybe I don't know what I am doing but let's not make it bad let's make it red and then for the shape we can just say maybe let's let's add something called rectangular around the angular border okay this will work and in the child we can have in the center and a child let's say my flutter view okay and that's it and let's also add a floating action button okay this is fine on press let's not do anything and then in the child we can just have but what we want to add here icon okay and we can say I can start at this fine so now we are ready with this particular portion of the core and this is our flutter app now let's run this application on Android emulator we have the emulator here so we'll see what actually happens we haven't done anything we have just included one flutter view and that is taking the whole width and height of this particular widget or this particular page and let's see what happens so if you have any confusion then you can start from the beginning and if you will do it like two or three times then I'm sure you will be familiar with this I this is a one-time process now you can use any route and you can actually manipulate those widgets and it's it's that easy to use and if you want to do debugging and everything then also you can just attach the particular when you connect the device then just write flutter attached and then it is good to go everything will work and as you can see we have this car my flutter view we have this plus button okay and this looking pretty cool isn't it so let's let me just do some cool stuff with this so let's say we are here okay now what I want to do I actually want to change something here so let's here in the border part let's do something border-radius so we can actually specify here radius let's say 30 maybe okay it won't take it like this it's say 40 okay now if I will go back to my so right now I have to run like this but you can change this by attaching this particular emulator I am just do this no changes to deploy it is saying let's change something here maybe just to see our changes do something like this or maybe let's run this again to see those changes as of now but as you can see it is running right don't have to do anything and even if you have a button you want to show it as a view then also you can show it so I'll show you that also how you can do that so now you can see we have this round two corners okay this is how you can actually use it okay and let's say anything else you want to do I mean this is totally your choice and let's say um if you want to run this particular thing here so what you can do just go to your terminal okay and you you want to see the hot reload and all that stuff that is what I am saying okay and here you can say flutter attached let's try this I don't know what it is doing but it should attach that okay with this particular SDK I don't know once again so now let's just build it let's just kill it and now let's run this my app and again it is asking for the same let's start and let's see whether that works or not and now it is saying done and now you can also see the changes here and now it is supporting the cart reload and all that stuff and now if what I want I want to change something here so my flat of view let's just give it a style text style and sorry if you can't see it properly but I am just a setting the colors too white and now if I will just press R here and you can see the hot reload is working and this is the Android application not the flatter one so don't don't get confused with this now I will do some more changes if you want to see let me just give it some view here okay so this is the android project now and this is on the top of it so let's just do one thing let's let's change the color maybe okay just rather than red we can actually use green which is the color we are using okay and now in the terminal sorry we'll just write R and you can see it's working great and the color is actually teal so let's change it to teal then just write R and it is walking great let's remove this portion of the code save it hot reload oh my god this is amazing let's see in this color and make it maybe yellow it will look good I don't know as you can see this is not working okay oh sorry the color is working but I actually don't want to change this I want to change this floating action button color so um now let's press a hot reload it is working as well we can change its color to black now so I am just showing it just for your understanding if you want to see if it is working properly or not okay this is working pretty cool okay sorry so this is this is what I wanted to show you and if you want to just change it to a stateful widget then you can do it okay and then what we can do we can have something like maybe what what you want to say variable which is a counter which is by default zero okay and my flat of view after that what we can use here we can use a string interpolation okay where we can specify our counter okay and okay so we don't need this and this is fine and what we will do when he will pressing this button then we can use set state and we can increase the counter okay now this is a stateful widget just do a hot reload okay it's not a subtype of stateless widget we need to do a hot restart so we will do a hot restart here and now if I will press this you can see the counter is increasing and everything is working right guys so this is what I wanted to show you now let's switch back to our Android one and now here in the sorry for making this video a little bit longer but just wanted to show you what it what what can be done okay that's the only intention of mine lets me take this screenshot okay and now here let's do few changes let's add a button in between and maybe on the top let's say here okay and let me just set particular constraint here okay that is fine and [Music] this button says open flutter view okay let's just say it and let's write it up flutter button so if you are not familiar with the N word stuff then you have to actually be familiar with this now I can just say here I have a button let me just import it we can just try it flutter button okay now let's just copy this code and I can just say plotter button is equal to fine view by ID and the idea is flutter button only and now I want to show it on the click of it so let me just give it some space and now I can say flutter button it's at onclicklistener now here I can say just like this and it will give me this one click event now I can just paste that code and now if I will run this by this instant run of this Android application then it should show me a button okay so let's just see that it is installing it so this is the this is a and you can see the difference right this is an Android application it is taking much more time than our flutter one and now if I just click on this open flutter view then you can see we have the flood of view it took some time but this is how it will look like okay now let's let's also do something here in our frame layout to me just because our what button is now invisible so what I can say I can say that frame layout can you add some top margin okay and let's give it a top margin of maybe 100 okay 100 maybe anything okay just do a instant run and let's see if we can see those changes and you can see we have this button on the top let's just click on it and yes it's still not much so let's make it 200 and let's so basically you can also use a fragment if you don't want to use this frame layout or anything and you can directly use the floater view like this and it is working fine now so as you can see this is how your app will look like and this is the normal demonstration which I wanted to show you I know this is not everything but I'll make more videos on this I just wanted to show you how easy it is and still I can go back here to my flutter core and I can still make some changes like font size maybe okay let's get thirty okay and just oh so I lost the connection to the device unfortunately so I have to reattach it so let's let's let's do it last time so that you know you don't have to actually believe me for everything so just run it again and let's see if everything is working just few more seconds guys and we will be done with this video and the please subscribe to the channel if you not a subscriber till the EPA is running okay please press the bell like and if you want to get future this now we have this view now let's click on it open flutter view now go back to our flutter oh so it has those changes but let's go back to the flutter project and now you can see this hot reload working on the bottom and now let's change something here let's make it 25 and let now press this okay now also give it some pollen something and let's watch reload it oh this is looking amazing okay and yeah I mean this is absolutely brilliant from flutter so that's it guys I mean this is the first introductory video of how to add flutter view inside your android application i'll may also make try to make iris part but that will take some time but the more videos will come and please let me know if you enjoyed this video and if you and understood what I wanted to convey and like the video if you actually enjoyed it otherwise you can dislike it but please try to understand me and I will be coming to more deaf fest and other events also so if you want to meet me then please be there so next one is Raj codes then I will be in Bangalore and I will be in challenger then in I'll be in New Delhi and so a lot of stuffs is about to happen please subscribe to the channel again if you have any question then please join the Facebook group the all the links are in the description i will push the code to github as well so join the facebook group if you want to ask questions and also keep stars to this repository on github okay so I'll also write these steps in my github repository so thank you so much for joining guys I've seen the next video bye-bye take care and have fun

Channel: Codepur

Views: 44,266

Keywords: flutter, flutter sdk, flutter tutorial, flutter tutorials, dart, google i/o 2018, add flutter to android studio, integrate flutter in android studio, flutter existing app, add flutter to existing app, add flutter to android app, android to flutter, add flutter in android studio, integrate flutter with android, flutter view, flutter widgets, android, material design, how to use flutter widgets, flutter tools, flutter widget of the week, flutter tips

Id: Gw211RZGVw8

Length: 40min 13sec (2413 seconds)

Published: Thu Oct 04 2018