I HACKED FlutterFlow To Support ANY Backend!

now one of the biggest limitations with flutter flow is its support for backend storage clutter flow supports Firebase and super bass out of the box but it does not support any other storage services natively and so what do you do when you want to use another service well it's very very tricky but in today's video I'm going to be showing you how you can use pretty much any other backend service and natively with flutter flow now before we get started as always all the apps and all the resources that I cover in today's video you can view and or clone from my patreon page and you can learn more about our amazing patreon Community via the link in the description now if you've been using flutaflow for a while or you're thinking about using flutter flow to build your apps then you probably already know that flutter flow is rather limited when it comes to supporting backend and database services and Native look so here is an architecture diagram that I quickly put together to kind of show you how it works so we have the user here we have flutter flow which provides the UI and the logic and in terms of your back end database Services you only have two options okay you can either use Firebase firestore or you can use a Super Bass now when it comes to other database services and there are tons and tons of amazing database Services chances are you will need to connect to them using an API and while that is doable it is not an optimal solution because at the end of the day you want things to work natively you want to be able to connect to your database just how you connect to something like firestore and Super Bass and that is natively you don't want to go out and make an API request every time you need to read data list data update data or delete data you want to be able to connect it using the same way that you pretty much do everything in flutter flow using native methods and Native functions and that is actually very very simple to do as you're gonna see a little bit later in the video so first let me show you a proof of concept app that I built that connects to a third-party database service natively and later I'm going to be showing you how I built it and how you can do the same with your database service of choice okay so here I build a quick proof of concept app to show you how you can access and manipulate data that is stored in a different database provider apart from the ones that are supported by flutter flow natively and now let me go ahead and run this app so that you can see how it all works seamlessly together alright so here's our database demo app that that illustrates how you can build a flutter Flow app that is able to connect to a third-party database natively without needing to use apis and for this demo I'm actually using pocket base which is past minimalistic and free database that you can use with your flutter flow apps and a little bit later in the video I'm going to be showing you how you can set it up to work with your flutter Flow app now I have this pocket base up and running and so if I go to its dashboard and I navigate to its users collection you can see that we have three users here the names are Rob John and Mike and if I go back to my app you can see that we have Rob John and Mike and using this demo here I can do all kinds of interesting things for instance you are seeing a list view right here but I can also update delete I can find specific items use using the filtering or I can create a new item all together so for instance let's say I want to modify this rock item here so let's say I want to change it from Rob to Rob 95 I just simply click on the cell add 95 update and now it has changed and so if I go back to our pocket base here and I reload this you will see now it's Rob 95 the same thing I can do with some of the other fields let's say I do John 11 update it go back here refresh this and we see John 11. now let's say I want to delete my well I can just click delete and as you can see Not only was that record deleted in the database but it's also reflected in the UI right here and if I go back to our dashboard here and reload this I no longer see Mike there because it was deleted on the back end now another thing that I can do is I can find specific records let's say I have Rob 95 or I can just type Rob 95 here click on filter and it found Rob 95 and that is the only record that's being displayed right now I can also click on clear and now all the records are being displayed last but not least I can also create a brand new record by clicking here and let's say I want to name him Sim Okay click on Create and we have SIM created and displayed here and if I go back here refresh this we have team that has been created in the back end as well and so as you can see we have a fully functional flutter Flow app that's able to display manipulate delete update all of the data that we have in the back end using a database provider that is not supported natively and as you're gonna see in just a couple of moments I was able to do all of this without using apis now how did I do all of this well let's jump into Florida flow and let me show you exactly how I was able to achieve this alright so here I'm back in Florida flow and the first thing that I want to show you is that if we go into API calls you will see that I have no API calls and that is because I'm not connecting to this database service via apis I'm doing it all natively and so how exactly am I able to connect to pocket base which is a third-party database service that's not supported by Florida flow without using API calls well the secret here is to be using something called custom actions okay and so what you need to do to make this work is you need to create various custom actions that represent the various operations that you want to be doing on your data so for instance here I have five custom actions and these represent the five operations that I want to do on my data so I have create item I have delete item I have get all that gives me all the items I have get with filter that is able to filter for a specific items or items that I'm looking for and last but not least I have update item that is able to update a specific item with some new information now you still need to be able to configure these custom actions with something and that something is called a native API and so if you go to pocket base here so here I am on the users collection and if I click on API preview I can see that pocketbase supports two ways of accessing it natively using a JavaScript API or using a dart API and because flutter flow is based on flutter which itself is written in the dark language all you need to do is click on a dart right here here and you're gonna be given a sample of a specific way to access the data so on this left hand side we see list search and you have a little snippet that allows you to do this specific operation if I click on something else I have view okay so I have a snippet for view next I have create update delete and we also have a real time and so all you really need to do is go back to your flutter Flow app and you need to create an action for each of the operations that you want your app to support in this case I know that I want to create items I want to delete items I want to list all items and I also want to be able to find specific items via a filter and I know that I want to update items and typically this is going to be sufficient for more use cases obviously if you're building a very very complex app you might have other operations here as well but for starters this is a really nice set of operations that you can use in your app so all I did really is I went back to pocket base I looked at the operation that I was interested in I clicked on Dart and then I simply copied the code snippet into my newly created custom action so all you really need to do is click on ADD click on action and then you want to click here view boilerplate code copy to editor and you have your new custom action and then you can call it somethings and so let's say you're creating a custom action whose job will be to list various items you can just call it list items here and all you need to do is go back to your pocket base API choose a list or search and select the right Snippets and so here it says you can also fetch all records and it's a as the user's collection here and so what you want to do is you want to copy this go back here paste it in here then you also want to copy the correct code snippet paste it into your custom action and after you're done you're gonna have a brand new custom action that's going to do something with the data whether it's going to list items find specific items update delete etc etc now the beautiful thing about custom actions when it comes to accessing third-party data so in this case we are creating custom actions that are going to be accessing our data that is stored in our own pocket based instance is that everything is going to work a lot better together it's a lot better to do it with custom actions instead of doing it with apis and so let me show you what I mean so let's say I have this list you here right and let's say I want to update a specific element in the list view well if I click on this list view button and I hope open the floor and guess what I can easily Implement custom actions in our flows here as though I'm using a natively supported database right so here I have a custom action called update item and all I need to do is Select this custom action and then I'm also going to be passing the new values right so I'm going to be updating a specific record and I'm passing in the name that I want that specific record to be updated with the new value the new name in this case right and this is awesome because let's say I want to do delete well I'm going to select delete open it up and I have a custom action called delete item and I have my delete item custom action right here and it accepts an argument called record ID that's all it needs to know which is the ID of the record uh in order to delete it okay and so that is exactly how it works now let's say I want to filter something well I can just select this open this up and I have my custom action called get with filter and that accepts the value of the filter right the name that we want to filter on and then it gives us back the new values here as an output and so in Florida flow regardless what your back end is you will need to create a flow anytime you want to change the data around or query the existing data and when you're using custom actions you have the exact same flow that you would if you are using a database that's supported natively such as firestore or Super Bass is the exact same flow and I am using a third-party database that is not supported natively with flutterflow and so this is a much much better approach instead of needing to rely on making API calls which can definitely get messy at times now one key thing that I'm doing with this app and something that you definitely want to implement in your apps as well if you're going to be using this strategy to access third-party databases is that you want to make sure that you create a specific data type that represents the data that you want so here I have item type and that contains an ID and the name and this corresponds to this record ID here and the name here because these are the only two fields that I'm interested in if I you know needed to know the email or the username or the Avatar well guess what I will create a custom data type that will contain those fields as well here the next thing that you want to do is you want to go into your app State and you want to create a variable that represents an array of these data types right so I have a current list here that essentially the list that the user sees on the screen and all that is is a list of those data types right so whereas this is just one data type this is like a blueprint for the data that we're going to be dealing with the the App State here is the implementation right that is the list of all of these data and current list represents the stuff that you see on the screen so like this thing here or if you're going to be filtering it represents that as well and that way once you have stuff in your app State you can modify stuff in the back end and you can also modify the App State and that way the user is gonna see the exact data that's stored in the backend so let me show you what I mean and so if I select this update button here and I open it up and so what I'm doing here is I'm calling this custom action so this update item is going to be updating stuff on the back end but in order for the user to see the newly updated stuff I'm also updating the App State so this is actually updating a specific item and what I'm doing here is I'm also updating the specific item so I'm updating the back end and I'm also updating the apps State and that way it's 100 consistent meaning that what the user sees on the screen is exactly the data that we have in the back end right it's not separate data it's not like you know the user deleted something in the back end but they still see all the old data on the UI it's 100 consistent and this right here is the best approach when it comes to building your apps that interact with some third-party database and so if we click on delete it's the exact same thing we're deleting stuff on the back end but we are also updating the App State and so in this case I have removed from list and index okay and so whatever you know the user clicks here it has a specific index so this is going to be the first element index 0 1 2 3 and so we're deleting stuff in the back end but we're also removing stuff on the UI on the front end and that way it's going to be a hundred percent consistent and it also delivers a really real really awesome user experience as is the case with all my app tutorials you will be easily able to view and or clone this exact app from my patreon page now when it comes to setting up your own instance of pocket base I actually have a video right there you should definitely check it out to learn how to set it up but it's actually very very easy all you need to do is head to railway that app and as you can see I have a bunch of projects here that I've been using for various purposes and all you need to do is click on new project and you can simply search for pocket base here simply click on pocket base and in less than a minute you're gonna have your own personal pocket based instance up and running that you can easily connect to using your custom actions in flutter flow now the great thing about this approach is that it's not just applicable to pocket base you can connect to my SQL people you can connect to postgres you can connect to any other open source database that has its own native API and this includes pretty much all the popular databases out there now let's say I want to connect to mySQL I can search for my SQL here on Railway choose this provision MySQL select this option and in less than a minute I'm gonna have my own personal instance of the mySQL database server up and running that I can easily connect to as well here you can also provision a postgres SQL instance as well so you can connect to it as well if you want and so using this approach allows you to have your flutter flow apps to connect to just about any third-party database natively instead of relying on apis now if you're looking to accelerate your no code knowledge and you're looking to implement some of the things that talked about in this video especially if you want to have your Florida Flow app play nicely with some really cool database services that are not supported natively here inside of Florida flow then you definitely need to view and or clone this app because with this proof of concept that I built here you'll be able to quickly and easily expand it with more features and more functionality to do exactly what you want whether it is to be able to do more things with your data or to be able to connect to other databases out there and so you'll be able to do just that from our amazing patreon community and remember when you join our amazing patreon Community you're not going to have access to just this app right here you're gonna get access to pretty much all the no code apps that I built on this channel over the span of several years there's a really really nice Library out there of apps that do all kinds of interesting things so if you're looking to do something chances are I've done it before and all you need to do is simply build upon the app that I have already instead of Reinventing the wheel and additionally you're gonna get access to some more content such as Q as live streams behind the scenes content and our patreon exclusive Master Class series on where I do deep dimes on topics that the community votes and plus you'll be able to provide feedback and suggestions for some of the new videos that I'm thinking about creating and above all you're going to be supporting this Channel and supporting my work so if all of this sounds like something you might be interested in then you definitely need to check out our amazing patreon community and consider becoming a and you can do just that via the link in the description of this video

Channel: James NoCode

Views: 5,640

Keywords: flutterflow, flutterflow connecting pocketbase, flutterflow mysql, flutterflow postgresql

Id: 4BK2dHH1K5o

Length: 20min 5sec (1205 seconds)

Published: Tue Aug 15 2023