Mastering #Supabase ListView Refresh with #FlutterFlow Component Callbacks

Callbacks within #FlutterFlow components can be extremely handy by executing actions, which are defined on your parent page, once the action within a component has completed.

In this simple walkthrough video I will show you 3 basic examples where callbacks have been setup. One really common usecase for a callback from a component is when you perhaps need to refresh the ListView on a page once an action has completed within the component itself. I'll show you an example of doing this using a #Supabase example.

By end of this video you will see how Callbacks are setup ready to use in your own projects.

🔥 Consider also joining The Digital Pro's #Nocode Academy on Patreon (link below).

Looking to create the Custom Navigation Component as shown in this video. Take a look at:

_____

Chapters

00:00 Introduction
00:48 Problem walkthrough
04:23 Creating the custom function
06:08 Correcting the problem by using the function
08:21 Quick Test
08:36 Outro

_____

(Support the channel and go ad-free! 😉)

🎉 Your love is much appreciated ... A like to this video is like a High Five!!! Thank you all.

[jimvh]

Great content once again Steve! All I now need is more time to play around with FF. Always looking forward to your next video. Hope my comments help the channel grow 😉

[cacaowonder]

This is great! Thank you. Can you do a video on how to create a list of favourites

[kubedigitalhub]

Thanks Steve for all your tutorials. I've learnt a lot from your content and you won't believe how many people you've helped. Can i tap into your wealth of knowledge pls? I'm working on a wallet app in Flutterflow and Supabase but the major challenge I'm facing is implementing the logic for transferring money within the wallet. I mean send money from one user wallet to another user wallet. Can you please give me direction on how to achieve this or make it a tutorial for everyone to learn. Thanks once again.

[JimilPatel-fh]

As always you make great videos. I have a question. I made a component in flutterflow and gave it a supabase query. Then in action flow, i gave refresh database for that component. But it does not seem working in test mode. I mean I'm manually changing my value of one item from true to false and then press button and as per button it should give desired results but it doesn't working. Have you faced this issue? Or know how to deal with it?

[NukeAWhaleJezus]

Thanks for the video. This is probably a stupid question but In the last supabase example i’m confused, why can you not add the database refresh to the action chain of the first action? What is the added benefit of doing the callback to a separate action? Thanks for explaining!

[matiasignacio]

Hello! How can I make it so that when a button is pressed in my component, it makes a GET request to an API and updates the list view of my app page with the data obtained from that new API call (on my component)? Keeping in mind that I have a GET API call where I display a specific table in my list view, is it possible to update it in that way when I press the button from the component?

[chase-jggu]

Hello. I am building an application for a client, and I'm just about done, but something weird is happening in test/run mode. My custom NavBar component at the bottom of the screen disappears. I can still click the invisible buttons to navigate. I am using an action button in the middle (similar to your last video), and that shows up... but nothing else. The layout of my NavBar is eerily similar to the one you made in your video:

Stack
Container (to hold the row below)
Row (4 icon buttons w a divider in between)
Container (just being used for a top border, height = 1)
Container (Action Button Container)
IconButton (Action Button)

Any ideas? The custom navbar shows up in preview mode. I am testing it while signed in (authenticated), so that shouldn't be an issue. And it's a custom nav bar (component) so the FlutterFlow NavBar settings shouldn't matter.

[marcelomagalhaes]

Are there any videos about authentication with Google, Apple and other social networks with Supabase and Flutterflow?

[Tabiboona]

I love ur videos bro, they're my first choice, but the audio need a little tweak, it sounds boxy, send me the audio for ur next video I'll fix it for you, for free as a thank you for the valuable content ❤

[MartinRichtar]

Great! Just another tip.. when that "refresh database request" doesn't work and says: "no eligible database request present to refresh" .. It's because you need to have enabled the "Single Time Query" option on the Backend Query (Query Collection or API Call) on any scrollable widget!

[AD-gybj]

One more comment. Use light mode because dark mode cause’s loss of concentration and headache. Further, a study shows that users of dark mode try to show others that they smarter than they really are and they suffer from what is called “ hacker wannabe syndrome“. Thank you and good-luck

[AD-gybj]

Hello, The topics and the style of teaching is better than the rest. But very soon you will lose most of your followers because after few minutes you put them in a state of WTF is he talking about. To save your channel do the following 1) use pen and paper to draw what you will doing. 2) Do not use premade solutions to save time instead build it from zero. We don’t mind extra ten minutes when the outcome is knowing what is happening and why it happened and when to use it. 3) do your steps slower . 4) Redo this topic again and make it in 3 videos instead of one. 5) Listen to your customers. Good luck, awaiting the redo