Flutterflow Update - Jan 2024: SQLite | Supabase Google Authentication | API Result to Datatype

we have sqlite offline database we have API results to data type and Google authentication using super base and a lot more other features which of these recent features released by flutter flow interest you the most hello guys today we'll be talking about the recent update flut of flutter flow uh today is January 12th 2024 and at the time of recording this videos a couple of these features have not yet been documented so I'm just going to like work on it based on what we see on the platform yeah let's get into so let's just look briefly let's just look at it briefly all the updates that FL flow has let me demonstrate like all their functionalities so we have here sqlite this doesn't work for um desktop you've seen that demonstration I'm going to show you my phone now we have API result as data type now we have this list of jokes and all of this data is been gotten from a predefined data type that we have so did you hear that David lost his ID in Pro now we just have to call him D well I don't understand the joke it's probably funny yeah the ID so we got we are getting these two values from U ajon um dat type that we created but this ID from Json path so that's a of of this uh implementation now we have superbas Google authentication now this is a hassle so you can click here loog in with Google we click this button and it's going to navigate us to Google or for us to select the account I want to log in with and when we log in it's going to log Us in upload audio recording to Firebase and super base let's demonstrate that so I'll click here and it request for permission to use microphone allow so this is a simple recording that I am currently doing hopefully it's recording very well then I'm going to stop the recording you see how uh it's going to stop okay that's actually stopped now we're going to upload this to super base hopefully that has gone so let me go to my super base storage here assets so here's a little setup that I have done for all the features and we are going to navigate through them one after the other on the community you can see like we have skite ability to use sqlite now we can do um API calls you set API call results as data type we can do s based Google authentication we can do uh there are couple of new animation effects I personally like like the Shima uh the Shima animation now you can upload an audio recording directly to Firebase or super base I'm going to show you how to do all of that and then just some update on swipeable stack I've had my fair share of uh frustration of Swip stack in the past so it's amazing to see that they have pushed out something new then a couple of other Improvement so I'm going to see that real quick here here's my page so for SQL light now what you have to note about the sqlite feature is it is not yet supported for web it's not yet been supported for web so if you're implementing it you may not be able to see it on the preview but um yeah I'm going to demonstrate it and also show you real how it works on mobile so I have this interface and the whole idea is that I'm going to be displaying a list of items here and we can click here to view an item we can add an item and all of that will be loaded from um our sqlite offline storage so the first thing you want to do to implement that is to come here on the settings and then you scroll down to Integrations this SQ work you have to enable it and then your database configuration you need to configure the structure of uh your database and the way that you can prepare for um an SS an skli database is you can prepare the structure of your sqi database so I'm going to use this tool called sqi D browser so here is the uh the tool let's start by creating a new database I'm going to save it as items. DB now save database this is just going to help or structure um the kind of fuse that our skq database is going to hold so now the table that want to create is cor items like that the spelling is very important so take note of that then I'm just going to add a couple of fields so an item is going to have an ID all over case and an ID is an integer it's not null it's primary key and it's Auto auto incremented um an item is also going to have a name a name is a text an item is also going to have a description well I think I'm going to work with fruits so I don't know description is text and an item is also going to have say price and a price is an Inger something as simple as that okay now the good thing is as you're saving like this automatically um this thing is saving in your directory so you can just view it directly so I have here items. zv now this has the structure of my database like I click here browse data I currently don't have any data so I'm just going to try to insert something so I'll create here to create a new uh insert now I have created uh this thing uh my data structure is good enough to be used for flutter flow so what I'm simply going to do is come here back on flutter flow where we have the sqlite enable it now I already have my database name as items I'm going to upload that database file that we just created using um the tool so items DB now all of this section when using skli database you have to prepare your queries to perform the actions that you need them to do so a good place to start testing is while you inside here you can just come like SQ execute SQL then you can type something like select all let's select all from items the items table so a simple query like this is going to select all the items that we have inside the items table so you want to use this kind of statement as a read query so I have it set up here so I have it like select all from items and this is going to return the ID the name the description and the price well that is just one query so let's say a query that select a single item is going to be select all from items where for example where ID is equal to one it's going to select where I just equal to one and it's going to return just that it's true for this case because we have just one item but this is the kind of query that I want to use so if we copy this statement and we want to do for select another read query want to add a query then we paste here now we know for a fact that our output column is going to be the ID which is a string of course is going to have a name String now we just all of this so that we be able to use it in our interface when we are referencing values that's why we defining all of these output columns so says here specify the columns that will be present in the output of this query other does not matter but be sure the names match the column name in your query very very important so we have ID name we have description which is a string and price suppose price is an integer so yeah we going to add this sare in remember something that we have about this other query this select a single item is we are hard coding this one what if we want to dynamically um Let It select whichever ID that we want to use so for example on this interface let me show you if we are clicking on a particular item say if this is a mango if you click on Mango we want to see what is in mango if you click on um app want to see what's on Apple so to do that we need to make sure that we uh read queries select a single item we specify a variable that it receives yeah so have to specify a variable that it receives and to do that we need to Define that variable so we have to call it like the ID so the ID will be passed and the ID is an integer the ID is an integer and to use it flter flow advices um if you're using variables in queries like this you have to use it in this format the dollar then we have ID this way it automatically be passed as a as an integer but if you need to specify it to be a string you have to W it wrap it inside this columns so you wrap it like that this is going to be a string but since we know for a fact that I is supposed to be an integer you're going to leave it like this then we save now we have our query to read all items to read a single item and we also have can also specify query to update an item well I don't have that functionality but it should look something like this um update items then set what do you want to update and we have name then you have the last statement where say ID is equal to the ID so this how you can specify that statement but we not going to implement this but that's how you can do to we use it here so update query going to card I have this query to be able to update name and description we need to receive name and description and remember to use it here we do our F dollar sign bracket open and close name is equal to name this where you can WR not like Define the variables anyway if you look at the document you see more about um how this IDs how this um query is being prepared so you have a query to read we have our database configured items we can read items from it we can upload items from now we don't have that to create so now let's create another database query to be used for creating a new item it's supposed to be something like so we want to insert into items table the name description value um name description and PR price what values now if you execute this column here this is just a test it's a very good place for you to look at things if you execute this column oh there's an error values supposed to be values with s now the statement has executed successfully and if we come here to browse we should see mango being inserted into this um this table this items table now to implement that here we also going to use like uh the update query and our query is going to be say create new I well I personally thinking defining these variables and placing them like having to write them in this quote like this is a lot of work flow should consider making it like how we have the drag and drop um interface for API course where if we Define a VAR if we Define a variable like this we can drag and drop it here yeah I think that much more better this is this is a lot of work and maybe a help power way to easily generate like if you create um a new sqlite table maybe some crude query should already be generated so I'm just going to Here by crude queries I mean like a query you should have query to read all elements you should have queries to read based on an ID or something read based on something you should have query to update and have query to delete already so I think that would be a great Improvement for this skq light thing CU having to set this manually and then having to go and start writing all of this and then it's Error prone there's a lot of things that can go wrong anyways that's just my opinion so we have our SQL currently here this button doesn't have any action tied to it besides um opening up a drawer going to open up this drawer that you can set a name description price and then you add an item as first let's query the elements that we have to present it on this interface come on back in a query then add a query the query type is SQL query the query name is read all items so I want to read all the items and present it in the form of a list then on the list view I'm going to generate children based on the query that will feted above read all items r no further changes confirm and save now it's going to generate a children like this what do I want to do I want to just click here to be able to view the item name that's all I need items and item get skite column name sweet okay default value I'm going to keep empty well I think I like yeah I like the flow to index items so let's just Implement both the reading and adding of items before we uh proceed when you click on this add item you should be able to insert into that sqli database that we have so going to open here then I think it's back end and database skite query read query okay it's an update query what update query create new item yeah I think so yeah yeah and let's just pass in those value okay this should insert a new item into SK database so I'm going to hide that drawer then to view an item I have created this column or this U component here that says view sqlite item and what what happens here is to be able to pass an item to this component I need to create a a parameter a component parameter and the type is esite Rule yeah from the query of read all items anyways I think uh that is done and if we run on test mode so uh this is the test mode I'm going to enter here and if we try to visit this sqli page the app is going to crash it's not an error it's simply because um sqlite is not supported for for web so here yeah so it's complaining about F not being initial initialized it's not an error I'm going to uh show you how it runs on my phone very well so this is the app on my phone I'm going to open it they have um update generary 12 let me set the phone to light mode so I can see see very well so this is update generat 2024 SK light if I open here you're going to see the first item mango that we imported with this is item that we imported um from the um SQ database I created so I'm going to add a new item say um strawberry Red and sweet price is 350 at item well if that has gone the item should be added uh we did not tie the action to close that um drawer but let's see so we see strawberry strawberry I clicked two time that's why we seeing the item here and uh yeah we can click to add another item say uh grip nice whatsoever 100 so add item should add the item we just need a way to update that past it and we'll be able to see in real time anyways but that's the whole idea about sqlite database well that is that for sqlite as you see here um you currently can only initialize database with a file you cannot you cannot synchronize with other databases and it's currently only supported for mobile it's not supported for web now the next thing we have here is API results as data type this has been a very very very very personally this is a very big Improvement cuz uh having to Define Json part in the past used to be very very combersome and yeah it worked but now that this is available this is very good so let's get into how we are going to demonstrate this so I have this page um I call Api results as data di there's nothing there but now if you come here on API calls I have these jokes API end points so these are the two API end points I'm going to be make use to demonstrate uh this functionality so here we say get 10 jokes so if we click this Endo it's just a simple get end points so if we test it like that test API Endo it's going to return a list of jokes now get a random joke this other Endo is going to return just a single joke but now uh if we want to use this structure this API response structure as as a data type or have have to do is enable this paste the API response as a data type you can still use Json Parts this means that even if we paste this as a data type we can still use our part to navigate through uh children of that object through like the elements in that object so I'm going to enable that pass a data type okay no data type selected so we probably need to create a data type first so let's create a data type with uh properties type A String setup a string punchline a string then then uh ID as integer so I'm going to come here data types and I'm just going to say um a joke this a data type for a joke sorry j o c so this is a data type I have for a joke now what I can just do is on this my API response here I can just pass it as that joke data type that I've already defined and that will make it very very easy for me to to use when I'm using it in the uh in my application so we have here test response I'm going to enable it's enabled and select the joke data type and what I can do here for this get 10 jokes is so if we test this end points we going to see that it retains 10 jokes so it's a list of this data type joke that we already have so what I can do is enable this data type and I don't longer I don't need to create another data type for this response I can just say it's a list of joke so it makes it now jokes anyways yeah so back on this page so let's call Api endpoint and then just display um data or whatever values based on the API response but now let let's use this container to generate a call using the API call yeah to say do an API call on the jokes API Group then what do you want to do get 10 jokes yeah now I'm going to do the list view then I'm going to generate the list view like jokes will be the response of getting 10 jokes now it is already showing here as data type now we can have the punch line here chokes item data structure field and now we can have the punch line oh sorry setup let's input the setup here first now we can have the setup of the joke here and the next thing you just add a text for the punch line of the joke I don't know forgive my design skills but yeah so this is uh what we are aiming for this what we are aiming to to do with this API end points and if I run on test mode so we can see so another use case like when they say um this thing Jon part can also be used let's say we want to add the ID here let me add another text for the ID let's want to include the ID but we don't want to reference it using the data type that we created we can still do it using adjacent part so so we know that IG is located at IG so this is going to be item in item to Json click this uh Json part. ID that should give us the idea of that joke yeah with this implementation you have seen how we can use our API response as a data type to easily navigate within our app so that's that's simple the same thing to if we are to call this um get a random joke this joke single joke end point we can still reference all the elements inside that joke by using either the Json P or using the data type that we've defined the joke data type that we've defined and that is a lot more easier so let's test our Json data type API call so I'm going to click here this update January 12 and API result as data type I'm click here and it takes me to this page it's loading the list of jokes and you see why did the tomato blush because it saw the salad dressing then we have the ID here remember this ID are getting this ID by using a Json part but we are getting uh this text like the punch line and the the joke Itself by using data type that was specified anyways it continues on like that now the next item that we have here is super base Google Authentication I looked around and there's no documentation for this yet so uh the implementation that I have I don't know if it's working it's just uh like a concept I was just flowing like okay this is how things could probably be but I still like you to watch and see and probably maybe if possible I'll make a video again when it's finally documented and then I can work it throughout the process we now support Google authentication for super base this simplifies the loging process and allows your users to enjoy one one click account sign up and sign in this is very very good I see a lot of people and myself included using super base a lot more with this new authentication method that has uh been included anyways let's get into the item so for super base what I have here is just a single button that says log in with Google and I'm hoping to tell that there's no action to it yet I'm hoping to tie that to the action that authenticates the user using Google so but how do we discover that let's come down here to settings and then you see super base um this is super base I currently have uh this prod uh this project superbas project linked and all it has is just um the users table with name and email well again this is me doing all of this based on speculation there is no real documentation on how Google authentication works with flutter flow yet because here if you see super base authentication we have to enable Google Authentication you know the initial em sign up way we have to do a lot of the configuration back here on super Bas disable things and enable things but this way let's just enable the Google authentication so it requires an is client ID and the web client ID now I'll get to that in a second but if you come here on authentication up setting authentication you select super base like you enable authentication for the app you select super base you see here that super base authentication instructions are still coming soon so there is nothing here I am just working again with just my own knowledge and figuring out like okay this is how probably it should be so on super base here I have my authentication if I come here to authentication I have providers I have enabled we have email enabled by default I have also enabled Google and I filled in uh credentials sorry this is last pass auto field that is feeling this thing and making things to look weird but yeah I have here my credentials for the Google account that I created well if you've never done this what you need to do is you need to go to Google Cloud console then you create an app so the app that I'm using is Google Play conso developer whatsoever so the couple of apps I have then you configure this uh OD consent screen so if I click on edit the app is called No codee Solutions so this is the app this a logo uh support name app app domain I just put by nood solutions. Tech and also authorized domain I tried including super base and floter flow because I don't know what I'm supposed to do I'm just trying to be on the safe side so I added that then uh continue then for the consent I just required um user info email user info profile and open ID this scope of the app I just added that so if you want to do that uh when you're creating your word conern screen you click here then you have to enable it on the side here so I did that and yeah the next thing is I think when I was doing yeah I added like since the app is not going live yet so I added a couple of email test emails here that I'm going to be using to test so if you have another email that you want to use and test you can include it here so so that is what I did then finally this is the app I reviewed it and yeah I've not published because I don't want it to go live I'm just going to use this for testing now it is very very important when you creating a credentials the next thing according to super base like when you want to link Google off you need to create the credentials you're going to use here the um Cent ID and the Cent secret so to do that you come here on your dashboard your Google Cloud dashboard and you can click on create credentials then all client credential Point client ID the application type should be web application so web Cent to and the authorized redirect URLs should have this URL from um super base again this is my my speculation so I copied that then I paste it here and that is how I created the all consent screen and um the credential that I'm currently using so if you see I have this credential say web Cent super base if I click on it you can see the client ID and the Cent secret so this is a cent secret I copyed that and the Cent ID here copy that and you f that information here on super base C ID and C secret so I F it there then on flter flow I also filed here on super base down here in the settings and uh super based authentication so for web i f in my web Cent ID for iOS I think for you need to stick come here you create another credentials for is so to create a credential for is is you create credential or client ID then instead of web this time you select iOS so I think that's the procedure anyways Bond ID whatever feel that information that you create and you this the the the um secret that you're going to input here on FL flow okay that's a lot of speaking now we are done with the setup now let's go into the implementation I'm hoping this will work then another interesting thing I just want to point out is here on my super base if you come here on my URL configurations I already set this URL to be the app the URL that I'm going to be publishing my floter flow app on so if you come on web publishing here here it's going to publish on floter Flow updates flutter flow. app something like that so I have that configured here as my side URL and then redirect I just added something like slash redirect this route cuz I don't know what I'm doing yeah and I have this page that just simply says this page is just going to test if a user actually redirect so what happens here is it's going to show redirect page then user email if a user actually authenticates let us display the authenticated user email here that's just a test and the default value is let me put something empty so we know nothing now on flutter flow we want to come here on this to tie the action to the button so we going to come here on um super base Google authentication here log in with Google we add the action so let me open here so I think I'm going to search authentication something like that like create account then all provider is Google I think that's all I don't know if we're supposed to tie other actions below but when that instruction comes out yeah we can I can do a video explaining it much more better but this is just what I want to see and here after doing that I'm going to just publish I want to test on the web so I'm going to publish CU I have my web credentials inserted so I was very excited to try out this um super based Google authentication that I I could not wait for flutter FL to even to even release like a real documentation on how it's been done but anyways we're going to see it's a Moment of Truth okay so we have update for January 12 click here and superp Google authentication I'm going to click here now we have the button log in with Google I'm click clicking it look gole so it's 10 accounts yeah okay it's requesting for me to select an account to authenticate with now remember here I can only select the account that I've added on that test um credentials list here on my Google Cloud console I can only select that account if I try to authenticate with any other account it will fail that's because the app has not yet been published so I'm just going to copy this URL I don't know what this is supposed to mean but you see we get back to our app and I don't know what that means so if I click on superbas Google authentication and I click here this this navigation is going to take me to that redirect page I created and if we are truly authenticated we are going to see an email feel like the user email should should have an email that's what I'm saying and it does it actually has an email this email is a email that I configured and I authenticated with so um I'm going to post the video and what I'll do is I'll just tie a log out action first so that will verify like all of this and if you see on on super base the interesting thing is if we see on super base on the list of users we have a user here we have a user okay well I don't know what is happening and I don't know how to tie the two together but yeah when the documentation is out I think it be very helpful CU we need a means of inserting that user into this user table so that we can use in our application you know what I mean yeah but apparently we've authenticated with um super base and I just did that without knowing how um how all of it comes into play yeah that is interesting okay remember the first time we tried authentication it actually locked authenticated us and so it's taking us to this OD screen so if you come here on super base Google authentication and we click here yeah we are seeing that email quite all right it shows that like a user has been authenticated now let's go back and lock out let's see yeah it actually locked us out so we are locked out we are back here if we click here and then Super face gole authentication let me click up here nothing like I don't know if you can see that I have to zoom it's showing nothing as in there is no EMA tied yet so let's go and authenticate with another user let's just verify here on on super base if we come here to authentication there is just this um one user that has been authenticated and the provider is Google so let's try authenticating with another user again and just in case you're wondering I already added that user to this my um test users here on my Google Cloud app so I'm going to click on log with Google let's see the magic that happens again I'm going to select the account the Google accounts to log in with now an important thing like you are not able to see the URL because of the way I'm sharing my screen but this is what it looks like on the URL after the authentication has gone through so I've just pasted this URL here I guess floter FL is getting this and then getting the access token and probably doing some things oh you see behind the scene it authenticated us and now we are now on this page this page that actually shows the app anyways that's very very cool so yeah this is a bunch of things that is using you can see here/ access token then it makes use of the access token whatsoever and a couple of properties so yeah that's probably like what is happening so we are now authenticated if we click here super based gole Authentication and let's click here to see we actually get all user email finding that authentication here you now see that the second user has been created with a provider of Google a provider as Google so yeah our implementation works although we don't know how it all ties together okay so here this is my guess this my guess about how this thing works so what you have to do is you enable super base or by the way authentication you fill in this these details from your Google Cloud um account um you switch authentication method to super base and before doing that you need to manually configure um Google as a provider here on super base so there are basically three steps I think configuring Google provider as a um authentication method on super base the platform then you enable super base on tication of flter flow and then you feel in your credentials and you're good to go anyways when the dock comes we are going to see how it's actually supposed to flow but I'm just excited to try this and I'm happy it actually works without a lot of um trouble if you know what I mean so the next thing we have is new animation effects Wow Let's Get Right in now a couple of the animations they just highlighted here were um the the Shima tint and flip then I'll add a couple of containers a row having three containers now let's try the Shima effect on this the Shima animation so I'm going to come here on animation add animation and Shima okay let me play it to see who that's cool Ed duration increases so it looks a little bit more [Music] slow yeah yeah that is interesting can we change the direction no we cannot change the direction color you can set the color white Pure White preview yeah look at that that is interesting anyways what's the next uh animation the next tint and flip okay let's play it to see what happens okay okay so let's CH from here this to a more lighter color of the same lighter shade of the same color yeah that can be a cool effect well I don't know how to use it but yeah it's just interesting to know that it's it's there yeah I can probably do something like that anyways then we have the flip so I guess this just going to do something like it's flipping it flip let preview who I like like this one it's initial flip the number of flips the widget has initially here 1al to 180 okay so you can set it to a a smaller value so that it has more time to flip to become uh to get to that positive value that's my understanding anyways yeah that's the idea so that's that for animation effects now the next item we have here on this update is upload audio recording to Firebase SL superbase now we already have um superbase set up so I'm going to demonstrate using super base but then I don't have any bucket so let me just create a public super base bucket so we use new bucket asset I'm going to call it the public bucket and save so here on super base this is the page for upload audio recording so I have this interface and this uh having this button that says that's going to use to trigger recording and stop recording so the action TI to this button now it's available is you click here you're going to see start audio recording so if you look like recording you can start and stop audio recording so I started an audio recording then this button is going to stop the audio recording now when you start and stop this audio recording it's made available as a widget made available as a widget state in the form of of a bite so now to set tie the action to this upload button there's no action here and what is this error for stop audio recording cannot stop audio okay so we are stopping audio recording recorder name yeah this recorder that we started before then the output variable of this stop audio recording I named it recorded audio just so that we can index it from the widget tree and easily get it so now when this button upload button is clicked what what do I want to do I want to upload that um audio that we saved or that we recorded so I'm going to add an action then I will search upload here then I'll say upload save media is it save file upload save file then I'm trying to save to super base the bucket name is asset it's on uploaded file which just State recorded audio by so this the byes I'm going to upload now this is a file that uploading the B of that recorded audio now interesting thing we can do here I see uh something happening is say using this bites on bu ship to do something interesting or yeah I don't know let's test this and see now the next item we have here is the swipeable stack widget I love this I've used this widget before and the previous wiget that was available was very very very Troublesome it it was just messing a lot of things up so let's keep it as that so here we have this page for that updated swipeable stack so to demonstrate that I have this API call it here that like gets random like person generated or random people generate whatsoever so this is a random person API it gets a random user so here I'm trying to fetch for 50 users or even 10 test so I'm going to fetch to copy it and open it on my Json viewer so that it's much more presentable Json input and yeah if I paste it here and past so this is the structure of the returned uh data that we have so we have a list of objects as the person that has been returned and what I want to do is I need to get um the images and the the name if it's available to display on our swipeable card that's my idea so the name okay we have the result we have name. Title First last so I'm just going to display just their last name okay yeah down here we have picture picture do medium so this these are the two uh items that I need I need their last name and I need their photo URL to display on my swipeable card anyways I'm just setting the base for what we want to do with the swipeable cut and then yeah we can see the kind of improvements have made on the cut and yeah let's do I have this empty column for updated swipeable stack and I'm just going to drop in a Swip a swipeable card in this entire column swipeable stack have I been making okay I've been calling it swipeable cut sorry swipeable stack so it still has like list of pages that we can do and the page has an image yeah yeah yeah yeah yeah yeah yeah let's see what we have here first off I like to see what they have now for the actions on wiget Swipe therefore when the wiget just swipes no matter the direction on left swipe on right swipe on up swipe and down swipe well stays the same let's see the properties that we have here we can still do every normal thing swapable property okay whether the stock should Loop through the cuts I like this yeah it should Loop so that if we reach at the end of the 10 say the 10 elements that we are patching it should continue uh yeah okay this one Improvement something I've seen cut display count is it like showing the number of elements that under if I put two what's going to happen yeah displays the elements are on so say five what going to happen you try to bring down five next cut scale I can make it smaller 0.5 so it's hidden wow okay 0.98 yeah 0.9 so that it stays behind anys I like that swipeable threshold what is Swip thres swipe threshold the fraction of the C must be swiped before it's considered a swipe who this is very very important cuz the previous swipeable cut when you just uh like as you are trying to swipe I don't know if yeah look down here on the image as you're trying to swipe slightly like this immediately you go this direction the cut swipes so I can specifically set for this to have a fraction that is good swipe threshold is it an integer okay I think I guess it should be like a value from Z to one too so I want 0.8 to consider that a swipe so you really need to go far maybe no 0.7 let's no six let's not stress the users because it means they really have to pull it to the end before it swipes yeah I like that Max angle the maximum angle the card reaches while swiping 0 to 360 uh I don't want it to go too far so um the maximum angle let's put this is let just put um 200 I don't know what that angle would do but yeah I understand what is supposed to happen back C offset I don't want to offset it anymore horizontal offset so you can just set like the cut that behind if they should offset or not cut pading anyways my front cut I don't see it means to to e the front cut size like I need this to be bigger than this if I want it to be bigger how can I do that well I don't see a means yet it's probably there I don't know but yeah I don't see a means to do that that's back cut the previous cut I could specify like how big the front cut to be like the ratio as compared to the underlying children cut anyways that is that um swipeable stack I still keep messing up stack and Swip and cut so I want to generate children first off on this column let's call that API call yeah let me just come here on the API call and just create a JSM part so that it's easy for us I make the call then return a list of users so I want to do do results okay I want to have this part Jon part results I don't know if FL automatically okay it picks it so I'm going to add this as part then I say um random users so these are all the random users that has been generated and I'm going to save this so that when we call the API call I can just use that in the path do a backend call which is an API call of random users and now I want to generate student children of my Swip St to be get random user response Json part predefined part the part that I prepared is the random users which is the list of random users confirm and I'll save sweet so what we want to do here is we want to display the image of that random user and uh their name CU we are generating children we don't need these other Pages now back to our uh random user object so to get the name we have to do this is the result that we already in so we have to do name do last so here I'm going to say user random user object the item to Json path dot name do last to get the last name and the image is supposed to be picture medium let's use the medium do medium well I think I think this simple um demonstration should have a a workable swipeable card that you swipe and it swipes and it Loops over the data that we Fetch and so on and so forth so let's test that and see up Swip St we so it's loading the data and we have who is this girat oh the image quality is slow but yeah it's because I selected nor more so let's FP H Bar C so let me try what I do and try swiping without going um above I think it's um 0.6 uh this should be so this should not swipe okay it swiped I don't know should it swipe I'm taking this down this swipe but the whole idea this is going to swipe and it's going to Loop so you're going to start back with zero okay zad when it ends this should not swipe this should not swipe let me increas this should this swipe I don't know it swiped well we'll see what that value is supposed to do when the documentation is out yeah and next on the list that we have is other improvements so I'll not be able to demonstrate all but something I like very much is uh ability to do this to initialize least value of um L variable in either a page page state or component State and also what is this thing drop down widget provides a better support for M to select so this is very very good now other improvements what I'll start with is I'll just create a list of uh a page State variable here let me say task so it's a list of string oh I see this is good initial field value so if we make this a list now we can set wow gy itat sleep I wish anyways but that's the idea and now for the drop down we have a drop down here centralize this bad boy initially if we had something like um multi select there will be no means to select like initial option values so the drop down widget before only allows for a default value to be set like initial configuration to be set if only you define the um items one after the other so if only def find the items one after the other but right now it shows that you can do initial option values so I'm just going to set the initial values to that page state that I created so we have the page state tax available options I need to select more to select here allow more to select yeah so that it can be a list of items as initial value that is good page State text which is a list of string confirm and yeah we can add so let's just add gym here gym let me just add laundry so we'll be expecting to see at least uh two of those values that we have in that page State selected as an initial value here anyways uh this has been a very interesting process let's publish and test all of that so that you can see how it actually is how it actually works other improvements so uh you can see the default selection here is gy and eat and yeah that selected J and it so you can do multi select based on a particular variable already and again guys as you could probably tell this took a lot of time to it took a of time to make this video and please I like you to support by just um liking the video and yeah subscribing to this channel so that I have motivate me to make more videos and hopefully I'll do more like Hands-On tutorials how to do things and what not using FL flow and other tools so in the not share we've demonstrated like everything that FL flow just released new

Channel: Nocode Solutions

Views: 1,317

Keywords: nocode, Flutterflow, Supabase, App, Google, best nocode app builder, nocode tutorials, #nocode

Id: DSgrStthnok

Length: 52min 22sec (3142 seconds)

Published: Sun Jan 14 2024