FlutterFlow Reorderable List View - How to use!?
Вставка
- Опубліковано 16 вер 2023
- FlutterFlow's List View can now be reordered! Although this highly requested feature has been released, the implementation isn't as simple as checking a toggle! In this video, I'll show you how to use the feature from both an UI and backend perspective, thus updating your list view with the new order and updating your backend database with the new order!
Subscribe to stay updated and learn about building your app on FlutterFlow!
-----
Need help? Book a chat here: cal.com/stevenliu
Want to support me? buy.stripe.com/28o2as3FY1in2QMaEF
Thank-you! It would have taken me forever to figure this out on my own... and even when others described this (including the FF official docs), it still didn't make sense until I saw the complete walk-through in your video to see how the pieces go together. In the end, it's a simple "fix" but not at all intuitive, and especially since I've never worked with the reorderable list view. (also, and this might just be my cluelessness, but I needed to wrap my items into a 'Dragable' widget before it gave me the draggable hamburgers, etc. I don't know if that was my failure or if it's actually how it works now that they've added draggable...)
I just put in practice what you just tought us, man!!!! you gave us a huge tool! There are no words to thank you!
thank you steven, i was looking for this my friend, thank you again
Thank you Steven. Good job 👍👍👍👍👍👍
THANKSSSS!!!!!
Hi Steven
Is there any "non custom action" way to order in alphabetical a Dynamic Children List on a tab bar?
Hi Steven, nice guides! Are the tasks a string list of a single document? I am trying to build food recipes and want to use strings as a list for the ingredients. However I don't understand if I can somehow add all ingredients on one page and then click a create button to create a document with name, image, and all ingredients. Do you know if it is possible ? Thanks for the answer!
yes it's possible to re-order sorting on a collection of documents or a list of something in a document. However, code is slightly different.
@@StevenNoCode can u provide tut on this , stuck with this myself
8:31
How would you solve this using Supabase? Because when trying to insert the taskList items into the task list from the custom action, you can leave available optione as No further changes. But using Supabase, it is not possible to just insert the tasks without any further changes. It always wants to map or filter these items.
This is because Supabase and Firebase is different in structure (SQL v noSQL), and the setup of the tutorial in Firebase is different as it uses a list within a document.
For Supabase, I assume you've set it up in a way that each row is a task with an index number (let's assume you're arranging tasks).
For it to work in Supabase, on each rearrangement, you'll need to (1) determine the new index of each task based on the movement of the task (e.g. if old task 1 is moved from position 1 to position 3, you need to decrement everything in between and increment everything after - drawing it out helps!) and then (2) loop through the new position of each task and write it back to Supabase.
Do note this will use a lot of writes as each movement will have n number of writes (e.g. if you have 5 tasks, there will be 5 updates).
@@StevenNoCode Thanks. Could you record a new video for Supabse or explain more detailly? I don't understand how to insert Action Update Row in Supabase in custom action. I've never worked with custom code. I'm afraid of custom code.
Hi Steven... I am trying to reorder a view list but from a collection, not from a list in the collection. I am lost about how can I change the index on the view list? or where is it store the index of a list view?
You should store the index in each document of the collection.
@@StevenNoCode Thank you, it will be nice to have a video because its a whole different process when your are building a "new index" in a collection than in a list... I am still confused if I have to change the custom action where it says "list" on argument 3?
Great video! Thanks
Just a question, what if the list is in an App State? I am trying to use the data type as the third variable in the custom action and it doesn't want to let me set the value.
Hey Dale, if it's in App State, make sure the data type in App State is a custom data type and it will be a list of that custom data type. The custom data type should have 2 fields at a minimum: the text, and a field called index.
In the custom function, the first argument will be a list of that custom data type matching the App State, oldIndex and NewIndex is still type int.
So simple I feel like an idiot. Thank you that worked
Would a code expression work instead of setting up a custom function?
Unfortunately no, you need to use a custom action. Code expression is good for small manipulation of data
It’s not working for appstatse 😢
Do you maybe know how to remove the white background when moving something. My background is not white so it's not pretty .. :s
white background? I believe this is a UI setup you've configured. Check your FF frontend and make sure no background is set.
@@StevenNoCode , No I checked, more than bit, look: 3:15 you also have the white background when it's moving. Whatever I do it's still white, no way to put it transparent
Your background is white, so it feels ok, mine is blue...