Flutter - Native Platform Interactions

in this episode I'm going to cover native platform interactions I'll start off by configuring the platform channel then I'll send and get data from Android and then I'll send and get data from iOS and after that I'll show how to start an intent from Android and an extension from iOS sort of get started I'm going to go to the IDE and in this case I'm using Android studio and I've already configured a project it's a bare-bones project I created it from file new project and then I I removed some of the basics and and created a simple display with a home app bar and no messages yet text and that's down here what I want to do here is update this message send a message to Android and then update it on the return so how would I do that the first thing you're going to do is set up a platform channel it's like a TV channel to me so I'm gonna construct that and it's gonna be a static constant variable or member for the class and I'm gonna go cons because I gotta go static Const and instantiate its constant Stan shi'ites this method Channel and I'm gonna define my method Channel with demo I gotta give it a name that's unique so I could have more than one channel so in this case it's going to be my domain name and I'm just gonna call it information it could be something that's more relevant to your application process so I'm an import this library and I hit alt enter and that library is now imported now I have a platform channel that is on my flutter side I've got to configure it on Android and iOS as well but before I get there I want to construct the rest of this platform channel call on the flutter side okay so first of all I want to get a message so that means I have to invoke a message send it to the platform and then when it returns I want to update and set that state which will rerender the application on my device okay so let's say I'm gonna say future because I want to get a string in the future and that's gonna be my message so I'm gonna go private get message and let's say I'm gonna complete that but before I complete that I'm going to add a sink so I can type the statements in a linear fashion and a wait for them to complete so I'm going to import the future library with alt-enter import a sink and I want to return this value so I'm working it backwards a little here and I want to define the value with a string and I'm going to tell you my intent with that type declaration there and then I'm going to say okay my value is gonna come from the platform so that's going to be okay platform invoke message and I'm going to define my message as such I get to say okay this is my message but I could have fine get message this is what I want to do that's my action I want to do and then I could send but I'll cover that a little bit and okay so platform okay so this is a future so I need to wait for it so I'm gonna call a wait and say wait for this future to complete and I might as well say I want to try try and make sure this is successful if not I want to catch the exception and say print exception now I might want to do something more visual here in this case if my method channel doesn't work something went wrong on the on the other side and maybe in iOS or Android I get back the exception I want to to handle it okay so I'm not gonna cover that in great detail today but I just want to cover that in the basic form okay so now I have get message now where do I want to call it well in this case I just want to do something simple in this tutorial so when the state for the application page is initialized I want to render our fetch the message and return it with something modified from the the platform side and then rerender the page okay so how do I do that so I'm gonna get message in this case I'm going to use that then call back and say string and this is my message that returns and then I'll do an inside or anonymous function here and in this anonymous function I want to say okay once I retrieve the message in the future I'm gonna go set state and this has an on another misfunction inside of it I could use a method or to extract that I want to update my internal state variable to message that is returned sometime later in the future okay so that wires it up so if I look at this when this page is rendered it will fetch get message then it will update the message and that get message function or method here plat calls platform invoke message get messaged okay so let's move on to the Android configuration so the way I want to do that I want to show you how to open up Android studio for this application what does that mean I've already got Android spheal why do I have to help open up another version well if I look up here Android studio has a folder called Android and this is basically a separate application within it at least that's the way I think of it so I could go right click on it and go down to flutter the flutter menu and open up this module and Android studio and why would I want to do that well let me just show you so I'm gonna open it up it opens up and I warns me okay the Gradle plugin update recommended well I'm gonna ignore that I don't need to worry about that for this configuration Gradle then activates and says okay I got to do some things I gotta update this project now I have an Android project open that is running with the Android configuration which means Android studio is going to be running per se as a native project and this has some advantages when you're working with either plugins or this platform channel because I when I open up main activity which is the class that I'm after to edit in it's gonna work in a the editor is gonna work natively so I can talk to it with basically writing Java instead of dart in this case and I'm gonna ignore that so now it's easier to write with Java in this context because I've opened up the studio now I could even run this project up here as a native application as well I can hit run our debug as or as such that debug button will run the project just like if I were to do it in flutter okay so now I'm ready to wire it up and how will I do that so the very first thing is what I want to do is start a method channel called so I'm gonna go new method channel and I gotta get the flutter view and this that's the first argument and then I'm gonna say channel which I got a define here okay so I get that to find the channel so how would I do that I gotta go up to the top of the class private static final string and I gonna do all caps for the static type there equals and then this is the same class that I used in let me go fetch that I want to make sure my string matches and just this will help make a little bit more sense of the context I define the method channel on the flutter side as demo jockette which is my example domain name I'm gonna go back to the other Android studio option and then paste that as you can see this string must match exactly so I can communicate on this channel with this name okay so that defines the channel okay so now I'm gonna go set method whoops I'm in all caps I'm gonna go set method call Handler and then I want to define that as a new method new method Channel and that's a call handler autocomplete and then I could do auto format there and let me minimize this on the left okay so now I have a new method flutter I'm just reviewing just to make sure I get this correct and then on the callback which means flutters now communicating it's gonna call this when I invoke a channel on the flutter side okay so now I can do the magic inside here so what I want to do is okay so the method call is defined in this object so I can go if method call method and that say equals kay get message exactly this needs to be exactly like it is on the flutter site now let me just go back to that because I've had problems here and I just want to note that this this string right here has to be exact it doesn't matter single or double quotes in this case because it's the same either way and dart but if I had parenthesis here it's not the same as the other side if it doesn't have parenthesis okay so I think I beat that one I want to go back to Android studio for the native app or native platform and okay so when the method channel says okay I'm going to invoke this and I get the method call object I want to delineate it and say is it get message is this because I could have several different calls in this channel okay so it is so I'm gonna say if and now I want to say I want to construct a string that says let's say let's take that message that I retrieved and send it back with something extra okay so then I say - the result object that go result oops not return result is I'm gonna call success because this is gonna be a successful call I could call let's say what what are the other options here I can go command space and this is why I'm in the Android studio I opened up Android studio for Android because I get the the native editor help with auto assist and library help and class path I could say it's going to return with an air so instead of success I could say it's going to return with an air okay so I'm going to select success and I want to return a message and so that's going to be my message I'm gonna go string message is equal to let's say Android studio Android says hi period end terminate okay so now that I've finished it I'm gonna test it out and see if it updates Android so I'm gonna go back and in this case I've got to restart the application so it updates the of Android parts so I'm gonna go down and just hit restart down here and the debugger and restart the application basically it will reload the application recompile the Android side and update awesome I just see I can see that the the message from Android now works okay so now let me say if I wanted to send data to to the native platform and get something back so how would I send it some data on the same invoke message or a method call well the first thing I want to do is create a map and this will be sent as argument so okay so I'm gonna go vard map equals I don't have to use new because I can use a map literal and that map later I'm gonna define the generics here explicitly say this is my intent here it's gonna be a string and okay string and then the other one is gonna be dynamic let me just finish this and I'll show you why I said dynamic well let me go to the guide I have the guide loaded and in the guide if I look at writing custom platform-specific code with platform channels if I scroll down I can list the datatypes regarding which platform they are on so dart I can stand for that dynamic its I could provide a boolean an integer and integers of different values a double string and so on and for Android those turn up to be or convert to the same can be said for iOS okay so I'm gonna go back so I'm not gonna cover this in great detail I just want to show how a string goes so you can see how the wiring is configured so I'm gonna go back to Android and my phone and this map I'm going to say for for them the map key I'm gonna say this is gonna be from this message is from and I'm gonna say and it's gonna be another string for the dynamic value and that will be branded that it's me and I'll trail with a comma in this in this map okay so this map let's call it let me call it sand map that seems to make more sense okay San Bao I can provide if I go comma controlspace I can go sand a map okay if I look command click on the invoke method I can see that there's a dynamic set of arguments there that will be sent along with this invoke method okay so mean then the question is how do I retrieve those on the native platform okay for for Java or Android with Java it could be Kotlin as well okay so what I want to do is retrieve the method call arguments and what I want to do is go let's say method call arguments and that I'm looking for the method not the field so I'm going to click the method and terminate that line and I want to define this arguments let's just look at that what does it return method arguments it's gonna be a generic so what I want to do is call let's say map and that's gonna be string and object because I defined it as a dynamic on the flutter side and I can call this variable arguments equals and I'm gonna spell that right that's arguments and I'm gonna auto import the map library alt enter and now I have access to the argument so I could say final here because they've they only need to be to find once in this call now I can go let's say when I get the message I can say what is what I have here is from is equal to arguments get and in the map I'm going to call from because I'm sending a map but I've got got a caste because it's dynamic and I'm gonna hit alt enter and just say cast a string and so that way I didn't have to auto type it so now I'm getting the from argument or from property from the map and now I can say from instead of saying just hi I can say from okay so that's pretty cool let's save this and I'll go back to flutter and I'll go back to flutter and then reload it I just want to show you what happens if I run from the beginning doesn't update it so well what I want to do is click on the bug and restart excellent it updated it says Android says hi Brandon so if I look minimize this at the bottom if I look I can send this map with the from property the key value key and value as Brandon and I invoke the message get message if I go to the Android system I retrieve the arguments that map with which is a string and dynamic type and then I I say if this meant method is called get message I can retrieve the from from that map and say and and construct a new message and return it back with the from and I use the result to success as a message okay so that's pretty slick so that basically shows me how to wire up everything as a platform channel on Android what if I want to do this on iOS because you have to do this on each platform that you're communicating with that's loaded up in flutter okay so let's start up that process I'll come back to the intense on Android in a moment okay so let's look at starting up iOS in this case I could let me just run down let's say you don't have Xcode installed but you have to if you're using a Mac and such yeah if I go down to Runner I'm looking for app delegate and this is the file I want to edit but I want to edit it in Xcode and here's why and I'll show why so I'm going to open up Xcode by selecting on iOS I'm going to right click go down to flutter and open up this iOS module and Xcode okay so now that Xcode is loaded up typically it it loads up in an unexpected State and I've already opened the file once so let's pretend that it's a brand new application and I've been I haven't been here before so I'm gonna go over to runner to the left this is the application and here's the app delegate I just opened up on the other side so I click on that and it opens the editor with app delegate M okay so now I'm ready to wire up and do the same thing in context to what I did in Android okay so how do I wire it up well the save a little time I'm going to do a copy and paste here so I'm gonna copy and then I'm gonna come down and paste and so I'm gonna go control a and go control I for formatting okay so now I have controller and channel okay so I'm gonna paste it here okay so this says set method handler the channel is gonna set the method Handler and then we have two arguments in there are parameters in this method that's being passed okay so is this is the call and result which is just like Android so now I can say with an if statement I can say here yeah and then the string literal and that we're gonna say get message and then this has to be equal to is equal to and what are we gonna say equal to the the call dot method okay and then gonna add that method body and say okay if I'm equal I can return a result return a result and how I'm how will I return that result I can say in a string and then I can say message here is equal to iOS says greetings and then terminate that okay and then return the message okay so that's a string literal and I forgot the @ symbol there to make that a scalar okay so that's a message and let's just try that I'm gonna save it here and go back to the to flutter and say okay I want to restart with Android so let's load up and right so I have Android here I'm going to set it for iPhone okay so I'm going to change it from Android to iPhone and then I'm going to run it from the beginning so let's run that and this is the same context I could restart it down here as well if I had it running previously excellent now I can see that the message went to iOS and then came back as iOS says greetings well as in with Android here I had I have also have a map that I'm sending it so how do I get that map on iOS and say this is from and then concatenate that on this string and send it back so let's go back to Xcode first I get a fetch from from that map so how would I do that so I can do this I can go let's define that NS string and I'm gonna go and make a variable from and then I'm gonna say equal to call arguments I'm gonna and then the arguments I'm gonna say is equal to the string scalar from and then terminate that lines now I have access to the frame well how do I append that to messages okay so what I could do is go down here and I can make a new string and then i'ma say return message and then I'm gonna say message when I get a reference to my previous message and then I can say call the string app and by string and then I'm gonna go into put in from and then terminate that line and then I'm gonna return that message okay so I'm gonna save it did I call from there's from why is it complaining unused from unused return variable to return message okay I get or update that okay excellent Thank You Xcode that's a perfect example of why open the native editor for the application as I can get help because especially when I'm newer to objective-c by the way this could be swift as well if you configured your application as such okay so I'm gonna go back to flutter and okay here's my flutter application open up iOS and what I want to do is click on the bug and I'm going to restart it because I edited the code in the native platform and want to reload that code so awesome I have now sent a message to the iOS platform and retrieved it back and I could have added a space there but I forgot and here it is greetings branded so that's excellent so if I go back to if I go to Android I have the Android message it's the same content context but I have a little bit different for each dependent platform so let me review real quick what's going on in this directory structure because I could edit it here directly I just want to show you what I did so in main I wired up get message which invoked a method called get message and I also sent some arguments in this argument it was a map of a string and dynamic so this is really easy and by the way if you want to see more complicated methods are complex methods that are done I would recommend checking out the firebase authoritative base our firebase cloud firestorm that will give you a good example of how do you pass data back and forth and you could originate it on either the platform side or the flutter side okay so that gives me the main dot dart the flutter side I call it and then I can look at the and the iOS the iOS platform I could open up runner this is the application and I'm looking at the app delegate I am and if I minimize on the Left this is what I did in the native application on the other side so let's just look at that to compare here it is it's all pretty because it's the native editor or I could do it in Android studio in this case I just don't get as much help so if I do make a mistake in here per se if I leave off asterisks which do you references that variable I have to I get in here so let's just do a save it here cause the save and go back it should update and we should we should see an error well this air is not getting picked up in the editor right away okay so here it is it picked up so it takes a moment I see the error here if go back to Android studio I don't see the error here okay so I'm gonna add that back save it and that just forces it update faster okay so that's that's iOS if I minimize that or collapse that tree and I'm gonna go to Android in this case I could edit the values right here go to Java and main activity so I could edit the values right here but this doesn't have the class path in the full editor experience it's pretty close though so if I make a mistake here per say if I left off let's just take out a library here our package in this case and let's say let's say if I removed method call okay it does me it does show the class path correctly so in this case I was wrong with my first assumption at any rate I can go to the native editor and look at that and say okay this is the native editor and I could edit it as well or I can edit it as well and the flutter version where I have the main dart or the main activity for the Android studio platform okay so if I open up project and collapse both that basically brings me to the conclusion of wiring up iOS or Android platform and communicating directly with that platform okay so real quick I'm gonna conclude with opening and then tenth with Android or an extension with iOS so how would I do that well I'm gonna do this real quick and so what I want to do is go to the Android I'll start with Android because I want to open up an activity using an intent and I'm gonna go to the app source main Java in this case I'll edit it directly and the main activity open the main activity collapsed that over there and the right now instead of actually just doing some instead of using I'll use the same get message channel and I'll comment that out and what I want to do is open up and Android intent here so how do I do that so basically I could say I'm gonna copy and paste this I've already built the so I'm gonna paste in the ending autocomplete that it says open web page so I added a method so I'm gonna go open web page and what web page I'll say HTTP fluttered IO ah okay so I'm gonna save that I'll go back to why I'm already in flutter so I'm gonna go to debug here and then go to the Android simulate a emulator restart it oh that's iOS whoops I'm gonna go to the Android emulator and restart that so I'll select Android and restart it so one of the things down here is these main darts you can't really tell which ones iOS Android so I was on the wrong one so I'm gonna go to main and then restart it this would be nice if we could label these according to the emulator that it's running on so I could tell the difference okay excellent as you can see the intent was passed on over and I can say just once and it's gonna pass off to to the browser and open up Danny intent so let's go back let's go back to that let me look at the main activity okay here's the intent definition and here's start activities and I'm gonna start the intent so that's pretty easy I can just say open web page and now I can start any activity at 1 of course I've got to have privileges for that okay so let's try this in iOS ok so let's go back to the iOS version minimize that on the right and we'll collapse what we don't need here here's here's app delegate and what I have I already wired this up and so I'm gonna copy and paste it okay so I'm gonna paste this in I'll comment this out just like the other okay there's a auto do it so I'm gonna just comment this out and I'm gonna go to iOS in this case and I'm gonna paste it here just in case I am missing an import and I do need an import I think okay so i've pasted it and you can see i've the message of shared application to UI application and I get back to UI a petition safari and in this case I take my string scalar in it with string and it allocates that so that is then instantiated as a URL and then I say my Safari open up this URL okay excellent so let's try that so go back back to flutter and I'm gonna go to debug and go and restart flutters so or restart iOS and open up iOS there if that's not correct that's just focus in an iOS up here and hit run from the beginning when the application is instantiate adore booted it should okay there went it forwarded off and started that extension Safari okay so excellent so that was pretty easy to start so that concludes wiring up the platform communication for Android and iOS I'll attach this code to a jest and attach that link to the description in this video click on the link to get the code and thanks for watching today follow me for more tips and tricks on flutter and I'll catch you later

Channel: Brandon Donnelson

Views: 19,578

Keywords: flutterio, flutterdev, android studio, ios, iphone, fluttersdk, mobile app development

Id: 0nJrGKyRlPQ

Length: 30min 13sec (1813 seconds)

Published: Sun Apr 15 2018

Reddit Comments

[u/engadgetnerd]

You, sir, are a hero!