Flutterflow - Custom Functions To Simplify Locations (@flutterflow)

So it can be handy to want to send information, particularly complex information, back out of FlutterFlow to something like, you know, Xano or another backend. But when you do it, the complex types like the location type can be pretty bad for that job. So let's, let's take a look at this. Let's just say for sake of argument, you want to have a new backend call. Let's make a new one for a second here. Add an action, and the action will be, say, an API call to, let's just say I had a relatively simple one. I'm just calling it Bibble right now, which just wants a single, which wants to take like your latitude and longitude. But what you'd like to be able to give it would be a, from the current location of the user. But the problem is it reds out the current device location. And the reason for that is that the current device location is not in fact a number. It is instead a complex object. And so what I could do is go over to my API calls over here. I could change the Bibble and it's not it's actually going to work sending things to SageAI like this. But if I had a query parameter, I could say that it's going to come from the variable and I could say what my variable is going to be. And I could say my variable is just going to be, I don't know, like a string or something. And I'm pretty sure if I were to say that it's a string, it should let it go through, but it'll go through in a really useless way. It would look like lat long with parentheses and whatever's supposed to be inside it. You might have doing some text parsing and that's not really that useful. But just to illustrate the fact that it would probably work, I can go back into here to click on open. Click on here, change the value, and go to my global properties. And I'll give it my current device location because what it'll do under the covers is what we call a toString method. So any given object, all, all the complex ones from, for most of these languages, you can say, I want to take this object, turn it into a string, and it'll turn something that looks like what we really want. So what I could do here is just say it would probably look like LatLng and then -4.2, comma, neg— you know, 3.38.2 or whatever it is. But it, it would look like something like that, which wouldn't actually be helpful to you because what you're looking for in this case is just get like latitude and longitude. How do we extract simple things from these complex types? And the tricky part about that, if I just go fix this for a second and go back over to my variables, I'm gonna tell my variables not look at a string, it's going to be a double, which will then have the effect once I click save here and I go back up to here. That the, the, I might open this up and click on this call. If I click on latitude, it won't actually let me use that latitude anymore because current device location doesn't actually match that type. Because even though latitude and longitude are both obviously numbers, the LatLng together is this more complex type. So how do you break up these kinds of compound types? And the answer is going to be, like I said, through a custom function. And I, I made one over here that we can take a look at. Here you have a custom function. And if I, you know what I'm gonna do, I'm gonna make one for longitude because I already made the one for latitude here. So let me just walk you through the process. You click on the add button, you say I wanna make a custom function, we'll call it get longitude. And then it's gonna say the return type's actually gonna be a double, right? Because we know that longitude's supposed to be a number, which is the number of degrees north south it's supposed to be. North is positive, south is negative. And the, and then we can add argument to it and the argument's gonna take, call it LatLng, is gonna actually be of type, and this is the cool part here, an internal one like LatLng. So you'll notice there are other sort of complex types that are in here, like GooglePlace and LatLng and Range and some of these others. And, and this approach is a really useful one for being able to extract useful information from them. So now I can say double LatLng, and what I want to do is just tell it to return And the, the cool things I do when I'm working in these custom functions or any of the code in Fireflow is pause because it has built-in IntelliSense under the covers. It's using Visual Studio Code's Monaco editor, and it will, it will reveal to you what you can type after that. So by just typing in what I knew was the input, which was LatLng, and then just doing a dot, it tells me, okay, these are things I can use. And here I wanna say I'm going to get longitude. And now it's gonna be like, wait, can't do that. Why can't I do that? I can't do that because there's something called an optional key that's up here. And we could mess with this more, but how about we just not and we just say question mark and then that way it'll return lat long if it exists and return the longitude. And I think otherwise it'll return a zero. And it'll return a null if it doesn't actually have a number and it'll return a whatever the actual longitude is if it does have the actual longitude. So I'll call that get_long and you can see up here I made another one called, well, call it, save, save. There we go. And I can click on this new custom function. I'm just gonna rename it get_lat, which one I previously made. You can see it works basically the same way and it doesn't like that at all. Great. Okay, now it says returns get_lat. Fine, save, and I can check for errors. Beta submit says there are no errors. Fantastic. So now what we can do is now we have this getLat and getLong, but we can, we have the ability to break up the location into both the latitude and longitude. And I can open this guy up and I go back into my backend call, which I was calling Babel, and I can set the variable to not just current device location. We don't do it that way. We're going to, I'm just gonna remove that. And we're gonna say instead we wanna actually work off a function. 'Cause first you have to say the function, then you'll pass the argument. So function is going to be the getLat and the latitude is gonna come from global properties, current device location. See, and we can say confirm. And now I, there's another variable that's also going to require, which is gonna be called call, we're gonna get the longitude and the longitude. We're gonna say use the function once again. So first you pick the function and then you apply the underlying variable to it. This caused me a lot of confusion before. And I say current device location and confirm. See, now what'll happen is I'll send back to my backend. It could be your Xano, it could be your Firebase, it could be whatever you're using for your backend for FlutterFlow. You're sending a latitude, you're sending a longitude, you're sending them as individual numbers. That you're able to extract because you made this relatively simple function, which I will put back over here and the, and the show right here. And the key thing about this, there was only one line we ever had to change in here. Change the return value, you change the arguments, and you insert this one line of code, which one is for longitude and one which is for latitude. And remember, the whole idea is we're going from complex to simple. And so we're better off having two simple functions rather than one complex one. So I hope this is a useful introduction to using custom functions to making the complex things simple in FlutterFlow, and I'll see you again soon.