--- title: "Integrate Supabase and Flutter Charts for Real-Time Data Management" published_at: "2024-10-29T12:17:18+00:00" modified_at: "2026-02-10T11:30:47+00:00" url: "https://www.syncfusion.com/blogs/post/integrate-supabase-and-flutter-charts" excerpt: "Learn how to integrate Supabase database with Syncfusion Flutter Charts widget to manage real-time chart data." taxonomy_category: - "Desktop" - "Development" - "Flutter" - "Mobile" - "Supabase" - "Web" taxonomy_post_tag: - "Charts" - "desktop" - "Flutter" - "Mobile" - "supabase" - "Web" --- # Integrate Supabase and Flutter Charts for Real-Time Data Management [Yuvaraj Gajaraj](https://www.syncfusion.com/blogs/author/yuvaraj-gajaraj) ![Integrate Supabase and Flutter Charts for Real-Time Data Management](https://www.syncfusion.com/blogs/wp-content/uploads/2024/10/Integrate-Supabase-and-Flutter-Charts-for-Real-Time-Data-Management.jpg) **TL;DR:** Integrate Supabase with the Syncfusion Flutter Charts widget to manage real-time chart data. This guide covers setting up Supabase, fetching data, displaying it on a chart, and efficiently performing CRUD actions. The Syncfusion [Flutter Charts](https://www.syncfusion.com/flutter-widgets/flutter-charts) is one of the most versatile and rich data visualization packages, offering extensive customization and extensibility options. This blog will show you how to integrate [Supabase](https://en.wikipedia.org/wiki/Superbase_(database)) with the Syncfusion Flutter Charts. You will learn to set up [Supabase](https://pub.dev/documentation/supabase_flutter/latest/supabase_flutter/Supabase-class.html) , fetch data from the Supabase database, display it in a chart, and manage data points efficiently with CRUD operations. Let’s get started! ## Step 1: Adding dependencies To get started, add the necessary dependencies [supabase_flutter](https://pub.dev/packages/supabase_flutter) and [syncfusion_flutter_charts](https://pub.dev/packages/syncfusion_flutter_charts) in your **pubspec.yaml** file. ``` dependencies: syncfusion_flutter_charts: *.*.* supabase_flutter: *.*.* ``` ## Step 2: Initialize Supabase in Flutter Now, initialize [Supabase](https://pub.dev/documentation/supabase_flutter/latest/supabase_flutter/Supabase-class.html) in your Flutter app using the [initialize()](https://pub.dev/documentation/supabase_flutter/latest/supabase_flutter/Supabase/initialize.html) method. Provide the **url** and [anonKey](https://supabase.com/docs/guides/api/api-keys#the-anon-key) from your Supabase dashboard, which serves as the entry point to the Supabase ecosystem. Refer to the following code example. ``` Future main() async { WidgetsFlutterBinding.ensureInitialized(); await Supabase.initialize( url: 'YOUR_SUPABASE_URL', anonKey: 'YOUR_SUPABASE_ANON_KEY', ); runApp(MyApp()); } ``` ## Step 3: Fetch data and display it in the Flutter Charts To fetch data from Supabase, create a **Supabase** client instance and access the desired table by specifying its ** table_name**. Use the [stream](https://pub.dev/documentation/supabase_flutter/latest/supabase_flutter/SupabaseQueryBuilder/stream.html) method and pass a list of primary key column names to the **primaryKey** property. The primary key column contains unique values, which are used to update and delete records internally as the library receives real-time updates. ``` final Stream>> _future = supabase.from('table_name').stream(primaryKey: ['primary_key']); final SupabaseClient _client = Supabase.instance.client; ``` Next, use the [StreamBuilder](https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html) and assign the stream value obtained previously. The **StreamBuilder** continuously listens to the stream and rebuilds its widget subtree whenever new data is updated. As a result, whenever the table is updated with new values, the chart will reflect these changes in real time. ``` StreamBuilder>>( stream: _future, builder: (BuildContext context, AsyncSnapshot>> snapshot) { // Return widget }, ), ``` Then, check the snapshot argument from the **StreamBuilder.** If no data is available, return a [CircularProgressIndicator](https://api.flutter.dev/flutter/material/CircularProgressIndicator-class.html) widget until the data is received. Once the data is fetched, return the [SfCartesianChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) widget after converting the **List>** type into ** List**and map the data. Here, we’ll use the [ColumnSeries](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries-class.html) and set the [primaryXAxis](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/primaryXAxis.html) as [DateTimeCategoryAxis](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DateTimeCategoryAxis-class.html) for better data visualization. Refer to the following code example. ``` List _chartData = []; StreamBuilder>>( stream: _future, builder: (BuildContext context, AsyncSnapshot>> snapshot) { if (!snapshot.hasData) { return const Center(child: CircularProgressIndicator()); } final countries = snapshot.data!; _chartData = countries.map((e) => ChartData.fromSnapShot(e)).toList(); return SfCartesianChart( primaryXAxis: const DateTimeCategoryAxis(), series: [ ColumnSeries( animationDuration: 0, dataSource: _chartData, xValueMapper: (ChartData data, int index) => data.timestamp, yValueMapper: (ChartData data, int index) => data.yValue, ) ], ); }, ) ``` We’ll also create a custom data model class with a factory constructor to convert the **Map** type data into ** ChartData** format. ``` // Custom data model class with constructor to convert the data from snapshot. class ChartData { ChartData({ required this.id, required this.timestamp, required this.yValue, }); num id; DateTime timestamp; num yValue; static ChartData fromSnapShot(Map dataSnapshot) { return ChartData( id: dataSnapshot['id'], timestamp: DateTime.parse(dataSnapshot['date']), yValue: dataSnapshot['yValue']); } } ``` ## Step 4: Performing CRUD actions Let’s manage the chart data efficiently by performing CRUD operations: **Create, Read, Update,** and ** Delete**. ### Add a data point To add a new data point to the **Supabase** table, use the [Supabase](https://pub.dev/documentation/supabase_flutter/latest/supabase_flutter/Supabase-class.html) client instance to access the specific table by providing the table name. Then, call the [insert()](https://supabase.com/docs/reference/dart/insert) method and assign a new value to the required field. In the following code example, we’ve added a duration of 1 day to the timestamp value of the last data point and assigned it to the **date** field. To assign a unique ID for each data point, we’ve incremented the existing data point length by 1 and assigned it to the ** id** field in the table. ``` await _client. From('table_name').insert({ 'id': _chartData.length + 1, 'date': _chartData.last.timestamp .add(const Duration(days: 1)), 'yValue': 117, }); ``` Refer to the following image. Adding a new data point in Flutter Charts ### Update a data point To modify a specific field in a data point, use the [update()](https://supabase.com/docs/reference/dart/update) method. Then, pass the column name, and the new value needs to be updated. Then, use the [eq()](https://supabase.com/docs/reference/dart/eq) method to target the specific row in the table. Here, we’ve updated the 5th column segment’s y-axis value in the chart. ``` await _client. From('table_name').update({ 'yValue': 110, // Previous value 105. }).eq('id', 5); ``` Refer to the following image. Updating a data point in Flutter Charts ### Delete a data point To delete a specific data point from the table, use the [delete()](https://supabase.com/docs/reference/dart/delete) method with the [eq()](https://supabase.com/docs/reference/dart/eq) method to specify the target row. The **delete()** method alone will delete all the rows in the table. In the following code example, we’ve used the [Supabase](https://pub.dev/documentation/supabase_flutter/latest/supabase_flutter/Supabase-class.html) client and specified a **table_name** to identify the table. Then, we used the ** delete()** method to remove a row from that table. The ** eq()** method is used to specify the row to be deleted by comparing the id field in the table with the id of the last data point in the data source, ensuring that the last point is removed. ``` await _client .from('table_name') .delete() .eq('id', _chartData.last.id); ``` Refer to the following image. Deleting a data point from Flutter Charts ## GitHub reference For more details, refer to the [Integrating Flutter Charts with Supabase and performing CRUD actions GitHub demo](https://github.com/SyncfusionExamples/flutter_chart_supabase) . ## Conclusion Thanks for reading! In this blog, we’ve seen how to integrate the **Supabase** database with the Syncfusion [Flutter Charts](https://www.syncfusion.com/flutter-widgets/flutter-charts) widget and perform CRUD actions to manage data points efficiently. Try out the steps in this blog and leave your feedback in the comments section below! For our customers, the latest version of Essential Studio***®*** is available from the [License and Downloads](https://www.syncfusion.com/account/downloads) page. If you’re not a Syncfusion customer, try our 30-day [free trial](https://www.syncfusion.com/downloads) to evaluate our components. If you have any questions, contact us through our [support forum](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback) . As always, we are here to assist you! ## Related Blogs [Create a Flutter Column Chart to View the Top 15 Water-Consuming Countries in the World](https://www.syncfusion.com/blogs/post/flutter-column-chart-for-water-consumption) [Syncfusion Essential Studio® 2024 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2024-vol3) [Easily Draw Custom Shapes in Flutter Cartesian Charts](https://www.syncfusion.com/blogs/post/draw-custom-shapes-in-flutter-charts) [Introducing the New Flutter Chat Widget](https://www.syncfusion.com/blogs/post/introducing-new-flutter-chat-widget)