How to Add Flutter to Android App | Compose | Flutter 3


go to transcript


It’s sometimes not practical to rewrite your application in Flutter. For those situations, Flutter can be integrated into your existing application. That module can then be imported into your Android or iOS app to render a part of your app’s UI in Flutter. We will be creating new android app using compose.

* How to Add Flutter to Android App | Compose | Flutter 3 *

0:27 Flutter 3 Announcement
1:06 Add Flutter to existing Android App
2:10 Create flutter aar
3:16 Running the app
3:51 Add Flutter to new Android App (Compose)
7:33 Running the app

Medium: https://medium.com/@aseemwangoo

Website: https://flatteredwithflutter.com/how-to-add-flutter-to-android-app/

DevTo: https://dev.to/aseemwangoo/how-to-add-flutter-to-android-app-41jg

Source Code: https://github.com/AseemWangoo/AddFlutter

In case, this helped, pass me a coffee!! 😊😊
https://www.buymeacoffee.com/aseemwangoo

#flutter3 #android #compose

if you are the content owner and want to remove your content? fill this form

transcript,
guys in this video we’ll see how to add flutter to your existing android app an overview of this video will be we would be adding flutter to android but there would be two stages so in the first stage we would be using that events android app and in the next stage we would be creating our new android app and then adding flutter as we have mentioned here the flutter app itself will remain the same so recently in google i o flutter 3 was announced and in this event one of the talks was what’s new in flutter in this talk the devrel person red brockton demonstrated how we can use flutter and add it to existing android app so he had a source code repository that source code repository is put flutter to work wherein he basically scrolls the list of items and suddenly it opens a feedback form to the user which is made in flutter head back over to this repository and download this source code this repository has four subfolders newsfeed android angular ios and the flatter code which is called as flutter nps now let’s open the new suite underscore android let’s open the app build.tradle file inside the repositories we see here there are maven which has two urls and the one is using a local path and the other one is using a source url now let’s open the project build.gradle and inside that we see again there are two maven where the urls are the same a local path and a source url another thing to note is the dependencies mentioned in the apps build.gradle in short if you try to run this project it won’t because it depends on some local paths which are existing nowhere in the machine so let’s see how we can build those for creating those paths we’ll now open this flutter nps this is the flutter nps app so it is a standard fighter app having main dot dot some routes a view and some localization and this is how it appears on the emulator it’s just a feedback we give it like one to two we submit it that’s it let’s proceed now to build the aar for this project we do so by using flutter build aar and what it does it builds a repository containing an aar and a pom file as we can see here it built the output inside build host outputs repo and it also has some steps for us these are the steps which we already saw in the apps build.cradle or project spill.cradle and if we recall these were the dependencies which we saw in the apps build.gradle we can also see the outputs generated in the build host outputs repo the package name and there are three subfolders inside it let’s head back over to the android studio and now run the app so this is how the app looks like in the emulator so it’s a news feed and we scroll down and we see a feedback form opening up and it’s the same as we saw in the flutter emulator and we just give it any rating and submit in case you might have noticed the app given to us in the workshop does not uses the jetpack compose but instead uses the standard activity so now once we create a new project we would be using the compose let’s create a new android studio project and we would be using that empty compose activity and naming it as ad flutter this is our new android studio project which is using the compose and we can see here the main activity extends the component activity so there is one button here which is launch flutter button and we have added the preview for this button so let’s see in the split section so this is how our main screen would look like where there is a button called launch flasher activity one important thing to note is the folder in which this new project which is at flutter exists our flutter nps should also be in that same folder our add fracture exists in kotlin projects folder and so our flutter nps should also exist in that kotlin project let’s open the app build.gradle we will be adding the maven urls and the dependencies so we add them in the app build.gradle and head back to click sync now open the project level builder trader and do the same where we add in the maven urls as we did in the app builder trader and click on sync now if you recall we already had built the aar for flutter nps so we would be skipping over the step for building the aar again now we need to create an application class which we do so by simply creating a simple kotlin class and we just name it as application extend our add crater application with the parent application and before we go any further we need to add it in the android manifest in the android name next we create a variable flutter engine which is of type flutter engine and what it does is it basically is a flatter execution environment through which the dart code can be run in the android application we instantiate this router engine variable with the flutter engine and what it does it constructs a new flutter engine and doesn’t run any code automatically now since we need that code to be executed we would be using the dart executor which comes from the flutter engine and we register a dot entry point in the scene as per the docks the dad execution context associated with the strutter engine is the dart executor and what does this execute that point it starts executing the dart code based on the given dart entry point finally we would be caching the flutter engine cache by using the flutter engine cache its instance and by putting a engine name to the flutter engine this flutter engine cache is basically a static singleton cache that holds a flutter engine and it’s identified by a string which is in our case this nps structure engine heading over to the android manifest we would be adding an activity which is for flutter activity with the configuration as here final step for us is to launch the flutter activity from the button click so we would be using the context available to us by local context current and we call the start activity from that context and inside that activity we would be using flutter activity with cached engine this with cached engine takes in a flutter cache engine id which is used to configure an intent to launch flatter activity and if you recall it’s the same as we had defined in the application let’s run this app and we see the button in the center of the screen and if we click on this button it opens the flutter app which is the same feedback app we give any stuff and click submit

watch on youtube

Check Also

How to Play Farming Simulator 22 Mobile Android | FARMING SIMULATOR 22 MOBILE (ANDROID & IOS)

go to transcript Hello, Whats up and welcome to this Farming Simulator 22 Mobile game …

How to connect Lemfo LemD to iPhone FitCloudPro IOS app

go to transcript if you are the content owner and want to remove your content? …

how to android mobile photos videos private वीडियो तस्वीरें छुपे कैसे अपने मोबाइल में..?

go to transcript if you are the content owner and want to remove your content? …

Leave a Reply

Your email address will not be published. Required fields are marked *