Summary
Keywords
Full Transcript
In the first video we built a #FlutterFlow application which displays a beautifully animated Chart, using local data, with a #Syncfusion Column Chart. This library contains over 30+ different chart types which can be easily implemented in FlutterFlow! In this video I will extend the application built previously by updating it to use #Supabase as the data source to feed data in to our #Syncfusion Custom Widget. You will learn firstly how to prepare the database and also the generation of sample data. We then get to work on preparing the FlutterFlow application with the essential detail to support reading of Supabase data and then perform a simple conversion of Supabase Rows to Chart Data. Additionally you will learn how to use loops to accomplish this task instead of writing custom code to perform the same technique. We will also use a little #lowcode to provide the filtering parameters for our data. 👉 Checkout the first video - https://youtu.be/Dr5xHfk1nQY To fully follow along please clone the sample starter project below as this includes a button to get the stats and the removal of the HomePage actions. Don't forget to clone the starter project linked below to follow along with this video. This starter project is the final project from the previous video! _____ Starter Project: https://app.flutterflow.io/project/syncfusion-charts-supabase-starter-n4oo19 Final Project: https://app.flutterflow.io/project/syncfusion-charts-supabase-final-6sicya Final Project Setup 1. Make sure you have added your Supabase API URL and Key in the Supabase Settings. 2. Make sure you compile the Custom Widget and Custom Function. 🔥 Looking for more content and a helpful community? Why not consider joining The Digital Pro's #Nocode Academy at https://www.thedigitalpro.co.uk _____ Chapters 00:00 Introduction 00:30 Creating the Supabase Tables 01:19 Generating sample data for the tables 02:02 Importing data in to Supabase 02:38 Configure sample project to work with Supabase 03:35 Page State variables for tracking loop 04:52 Commence setup of actions 15:06 Application Test + Outro _____ 🚀 The Digital Pro's NoCode Academy: https://www.thedigitalpro.co.uk (Support the channel and go ad-free! 😉) 🔥 If you love my content why not consider buying me a coffee, it's really appreciated: https://www.thedigitalpro.co.uk/coffee 👍 Support the channel and grab yourself a free FlutterFlow account by clicking here: https://www.thedigitalpro.co.uk/flutterflow 🎉 Your love is much appreciated ... A like to this video is like a High Five!!! Thank you all.
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
