While FlutterFlow's built-in Supabase actions, such as 'Insert Row', streamline development, they currently lack direct outputs for success/failure status or detailed error messages within the standard action flow editor. This presents a challenge when you need to implement robust, user-friendly error handling – like showing an alert dialog on failure or logging the specific error – immediately after the action attempts to execute. Relying solely on the built-in action makes it difficult to conditionally react to outcomes within the same action chain, which is crucial for a production-ready application.

Let’s try this with an Example:

https://youtu.be/VLfHsIoOcB0?si=afP8aSY6suhpBfhz

In this video you can see that how I am struggling to identify the error caused while inserting a new row in Supabase.

Solution:

The recommended and most flexible solution is to encapsulate the Supabase operation within a FlutterFlow Custom Action. Create a custom action (e.g.,insertMedicineWithHandling ) that accepts the necessary data (like the details for your inventorymedicinetable) as input parameters. Inside the custom action's Dart code, you will use the Supabase Dart client, accessible via Supabase.instance.client .

Steps:

Follow the steps to create a custom flutterflow action:

1. Click on that add icon.
2. Then select ‘Action’ from the dropdown option.
3. From that input field rename the Action as “insertMedicineWithHandling”.
4. Add the following Arguments: name (String), price (double), manufacturerName (String) and turn on the “Return Value” option.

After successfully setting up the custom action. We will now use this code:

Future<String> insertMedicineWithHandling(
  String? name,
  String? price,
  String? manufacturerName,
) async {
  try {
    final generatedId = DateTime.now().millisecondsSinceEpoch;
    final response = await Supabase.instance.client
        .from('inventorymedicine')
        .insert({
          'id': generatedId,
          'name': name,
          'price': price,
          'manufacturer_name': manufacturerName,
        })
        .select()
        .single();

    return 'Success: Medicine inserted with ID: ${response['id']}';
  } catch (e) {
    return 'Error: $e';
  }
}

This function insertMedicineWithHandling attempts to insert a new medicine record into the Supabase inventorymedicine table. It wraps the database insert operation in a try...catch block to handle potential errors gracefully. Inside the try block, a unique ID is generated using the current timestamp, and the insert operation sends the provided medicine data (name, price, manufacturer) to the database. If successful, it returns a success message with the new record's ID. If an error occurs, the catch block captures it and returns an error message containing the exception details.

<aside> 💡

Note: You might see a red underline under Supabase.instance.client. You can safely ignore it for now, just save your changes. The code will still work as expected during runtime. This underline often appears due to IDE or plugin issues, not actual code errors.

</aside>

Implementation: