Exporting @Firebase / @Supabase Collections/Tables to CSV Files in @FlutterFlow

hey everyone thanks for tuning in uh so today video will be how to export collection Firebase collection uh to uh as a CSV file and you can actually use this code and Export it to a txt file or whatever file extension you want to as long as it is a text based file uh so but CSV file it's a good example because you can actually uh open this file inside Microsoft Excel or Google Sheets so I think it's a good example and most of the people will be satisfied with uh CSV file so this is what you end up let me just show you first I did it for my collection course uh I can show I will show you how you can do it this is the collection only with four cars uh we use it in the last video so it's the same collection and then if you click it over here download file click over here this is the file that is being downloaded and the name of the file uh it's actually FF uh coming from photo flow and then the date that the file was downloaded when I click over here it will open the file it takes a little bit time because I'm on Linux so it's um so you just need time and open my open docs because I'm not using Microsoft as uh yeah I'm using Library offices as you can see so it's taking a little bit time and this is showing because of the encoding but you can just say okay the recording looks okay because this symbol Karen uh sorry this is not in Bulgaria of course it's uh in English we have the brats I don't know if you guys zoom in probably I cannot zoom in but I hope you see that we have the names and we have the brands here so the name my car for example is BMW Josh the uh John's car is Tesla and so on and so forth so if I close this one and then go over here you can see that John's indeed Jones card is teswa and my car it's BMW so um how to do this let's go over here and let's go to the actual project so if I go to the page first thing first you need to actually get the documents that you need to um you need to export to a file so in my case I'm getting the cars collection and I'm getting all the documents of course you can filter the documents you can order the documents you can do wherever you want to with the documents before you export them so you usually do it with this way now with a back-end query I do it on the scaffold and I think it's a good practice to do it on the scaffold and not on the button or or on the which is that you want to click and then export if you don't have anything else in this page then do it in discover scaffold if you have something on this page then um you can do it on the bottom as well it it also works so when you when I click on the actions I have only one action which is called download collection as as we see and here I'm passing the list of documents in my case I'm passing the list of cars in this case I'm passing the list of documents cars and uh of course the valuable options is no further changes you can filter the list from here as well so in the end of the day if you need this query and you get you need all the cars for example or all the documents from the query and after that when the button is clicked so when you download the SCV file you want to filter something from the documents you can do it from here as well so keep in mind that you can do it from here as well so but I'm not filtering anything because I have only four documents for my example and so this is how you set up everything here and then the last part is the code itself which I will share again in the description of this video so uh so this is the code uh it's relevantly simple code uh if you ask me the only thing that you need to know is that first thing first on the right side you need to have an argument one argument which would be called talks which will be all the documents in this will be a document list of documents and the list of documents will be whatever collection you want to export in my cars in mys or in my case is cars and also you need only one dependency and this one uh it is the download package and this is actually the package that I'm using so keep in mind the package that I'm using it says only downloads the load because there are a lot of packages out there and the one that I'm using says only download because there's a lot of like there is flutter download or wherever you don't need them the one that I'm using is only download this super simple package uh just click over here and then import it here's a paste it here and then you need to click this button over here to refresh the dependency and then when you go to scaffold when you go to boil the boilerplate uh you can actually um copy and it's it's a good practice to copy uh the collection name so if you have cars it will change to cars if you have something else so let's change this to orders for example if I want to do it for orders then I go when I click to border plate you can see that its orders with double O and record without error so just copy and paste this part over here and I will switch it back to course and when in my case as I said I have cars so this should be car import those two so you can just copy and paste the code from as I said from the description of this video and then the things that you need to change so first things first you need to change this collection which will be as I said automatically you can copy it from over here and then the second two things that you need to change is first those are my Fields so if I go over here you can see that I only have two Fields but if you have 10 fields or 20 Fields you need to change it like that so if I uh for example if I add a new field over here I'll just do it for demo purposes right now so let's say that I have core and this will be black for example so this car will be color of black and let's say that I want to export this as well so this would be name brand so the order matters here if you want the order to be name brand and then color then do it this way but if you want to do it like color and then brand just just keep in mind that the order matter so let's do it quarter Corner color sorry at the end of the file and here what you want to do is you need to copy everything from the plus sign so copy everything from the plus sign to here and then paste it over here so you need to end up with two um brackets over here and then it needs to be plus sign and comma plus sign and then the rest of the uh Fields so those are Fields so you so what you want to have is this you need to have the field over here and the field over here the field over here on line 18 is the one that you are actually seeing on the top of your spreadsheet so when you open your spreadsheet this this will be on top of it if you don't need this information on the top of it you can simply ignore it and simply you can simply command this code uh or or better because if you command this code it will actually give you an error but if you don't need this information just leave it blank so just leave it empty string but I'm guessing that you need it so most of the time you need the information you need the top Header information what is the actual information that you get from every colon so in my case as I said I have name so this name should be name and the record that you get name and everything should be to string even if it's a string then do it to string and to be honest to be honest you can uh this can be helpful with the new ID when you click comma after the record when you sorry when you click dot after the record and you can actually write name and it will get the name so you do auto complete your Fields so if I have brand you see the brand if I have cover it will not complete autocomplete color it is a completing core but usually to an opt out complete the core because I didn't put color inside my field over here so if I go over here I don't have cover here that's why it can uh it will not autocomplete for now because it's a color I think cover it's something that it will always have a color so that's why it's out of completing it uh but usually if it's something else it will not have to complete so first you need to put it over so first you need uh to put it over here if you want to put more Fields just make sure you put them over here first and then they should uh display or autocomplete in your custom code so yeah as I said in my case I only have two Fields name and brand and I already showed you how you can add more fields and then this is the name of the file so the name of the file if you need anything else anything um like a specific name to the name of the file you can just say CSV and then you can just say I don't know like stats for example uh and then dot CSV and I can comment this one and this will be the name of the file right now I did it the way that they did it is FF and then uh the timestamp the time the date time which will actually return uh date and time because I think this is useful if you want to not overwrite your files when you're downloading them and then you need to compile this file to a UTF awesome bytes and then you need to put it inside a stream and then the final thing that you need to do is actually download the file using the package download so the result as I said the result will be when you click over here so let me just add a new field to see that everything is working fine let me just add a name will be CSV demo will be the name of the owner of the car and the brand I don't know a lot of Brands but let's say Toyota for example do you spell it like that probably not it is like that and then let's keep it with lowercase because everything is lowercase and my data so when I add this and when I click download the file so maybe because it's already maybe because I already uh I already query the data I need to go to the page again so it query again uh the new uh document and then when I click over here the file is downloaded when I click the file uh you should be able to wait a little bit okay now it's opening and it says about the encoding do you think the coding is okay you can see the fields are okay just click ok now this is only I think this is only showing in the Libre office uh but yeah you can probably see it let me try and make it better bigger not better but bigger and then this is the final output so yeah so this is the final output you have the new car over here and as I said you can have like multiple fields which would be colons and um you can have as many as as you need uh the documents or as many the documents are uh on the final collection that you're trying to download so yeah that was it that was the video I hope you like it and thanks very much for watching goodbye take care

Channel: Dimitar Klaturov

Views: 7,703

Keywords:

Id: 1FKlfexT9Zw

Length: 14min 33sec (873 seconds)

Published: Sat Dec 31 2022