Draft FlutterFlow attachments guide (#130)

* Draft FlutterFlow attachments guide

* attachments guide v0.9

* Add warning

* Polish

* blurb

* Polish

* Polish

Author: benitav

images/integration-guides/flutterflow/add-child-widget.png

@@ -22,7 +22,7 @@ Used in conjunction with **FlutterFlow**, PowerSync enables developers to build
 
   * No more dozens of custom actions
 
-  * Working Attachments package (Guide coming soon)
+  * Working Attachments package - learn how to sync attachments [here](/integration-guides/flutterflow-+-powersync/handling-attachments).
 
   Note that using libraries in FlutterFlow requires being on a [paid plan with FlutterFlow](https://www.flutterflow.io/pricing). If this is not an option for you, you can use our [legacy guide](/integration-guides/flutterflow-+-powersync/powersync-+-flutterflow-legacy) with custom code to integrate PowerSync in your FlutterFlow project.
 </Tip>
@@ -179,7 +179,7 @@ This guide walks you through building a basic item management app from scratch a
   <img src="/images/integration-25.avif" />
 </Frame>
 
-2. Select the "Auth1" template and name the page `Login`.
+2. Select the "Auth 1" template and name the page `Login`.
 
 3. Delete the *Sign Up*, *Forgot Password* and *Social Login* buttons — we will only be supporting Sign In for this demo app.
 
@@ -191,11 +191,11 @@ This guide walks you through building a basic item management app from scratch a
 
    1. Enable Authentication.
 
-   2. Set "Supabase" as the "Authentication Type".
+   2. Set "Authentication Type" to "Supabase".
 
-   3. Set the `Login` page you just created as the "Entry Page".
+   3. Set "Entry Page" to the `Login` page you just created.
 
-   4. Set "HomePage" as the "Logged In Page":
+   4. Set "Logged In Page" to "HomePage".
 
 <Frame>
   <img src="/images/integration-27.avif" />
@@ -229,15 +229,15 @@ There are three ways to read data from the SQLite database using PowerSync's Flu
 
 1. Auto-updating queries for Layout Elements with Dynamic Children e.g. the ListView Element
 
-   * This uses the library's `PowerSyncQuery` component
+   * This uses the library's `PowerSyncQuery` component.
 
-2. Auto-updating queries for basic Layout Elements e.g. Text Elements
+2. Auto-updating queries for basic Layout Elements e.g. Text Elements.
 
-   * This uses the library's `PowerSyncStateUpdater` component
+   * This uses the library's `PowerSyncStateUpdater` component.
 
-3. Once-off reads for static data
+3. Once-off reads for static data.
 
-   * This uses the library's `PowerSyncQueryOnce` custom action
+   * This uses the library's `PowerSyncQueryOnce` custom action.
 
 ### Prepare Supabase Tables for Reads
 
@@ -247,13 +247,13 @@ For reading data in FlutterFlow, you need a Custom Function per Supabase table t
 
 2. Name the function `supabaseRowsToList` (if your Supabase table name is "Customers", you would name this `supabaseRowsToCustomers`).
 
-3. Under Function Settings, set the "Return Value" to `Supabase Row`
+3. Under **Function Settings** on the right, set the "Return Value" to `Supabase Row`
 
    1. Check "Is List".
 
    2. Uncheck "Nullable".
 
-   3. Specify `lists` as the "Table Name".
+   3. Under "Table Name", select `lists`.
 
 4. Also under Function Settings, click "Add Arguments".
 
@@ -308,7 +308,7 @@ For reading data in FlutterFlow, you need a Custom Function per Supabase table t
 
    5. Check "Is List".
 
-   6. Specify `lists` as the "Table Name".
+   6. Under "Table Name", select `lists`.
 
    7. Click "Confirm".
 
@@ -376,9 +376,9 @@ For reading data in FlutterFlow, you need a Custom Function per Supabase table t
 
    3) Click on `lists`.
 
-   4) Set the "Value" to "Custom Functions" > `supabaseRowsToList` we created previously.
+   4) Set the "Value" to "Custom Functions" -> `supabaseRowsToList` we created previously.
 
-   5) Under the `supabaseRows` argument, set the "Value" to "Widget Builder Parameters" > `rows`.
+   5) Under the `supabaseRows` argument, set the "Value" to "Widget Builder Parameters" -> `rows`.
 
    6) Click "Confirm".
 
@@ -461,7 +461,7 @@ This variable will store the selected list row.
 
 3. Set the "Type" to "Supabase Row".
 
-4. Select `lists` as the "Table Name".
+4. Under "Table Name", select `lists`.
 
 5. Click "Confirm".
 
@@ -513,9 +513,9 @@ This variable will store the selected list row.
 
    7) Set "Select Update Type" to "Set Value".
 
-   8) Set "Value to set" to "Custom Functions" > `supabaseRowsToList`.
+   8) Set "Value to set" to "Custom Functions" -> `supabaseRowsToList`.
 
-   9) Set the "Value" to "Callback Parameters" > `rows`
+   9) Set the "Value" to "Callback Parameters" -> `rows`
 
    10) Click "Confirm".
 
@@ -535,7 +535,7 @@ This variable will store the selected list row.
 
    1. In the **"Properties"** panel on the right, click on settings icon next to "Text".
 
-   2. Click on "Page State" > "List".
+   2. Click on "Page State" -> "List".
 
    3. Set "Supabase Row Fields" to "name".
 
@@ -605,9 +605,9 @@ You will now update the app so that we can capture new list entries.
 
 3. In the **"Actions"** panel on the right, click "Add Action".
 
-   1. Under "Custom Action" > "PowerSync", select "powersyncWrite".
+   1. Under "Custom Action" -> "PowerSync", select "powersyncWrite".
 
-   2. Under the "Set Action Arguments" > "sql" section, add the SQL query to create a new list item. For the purpose of this guide we are hardcoding the list's name, normally you would build UI for this.
+   2. Under the "Set Action Arguments" -> "sql" section, add the SQL query to create a new list item. For the purpose of this guide we are hardcoding the list's name, normally you would build UI for this.
 
       1. Paste the following into the "Value" field:
 
@@ -623,7 +623,7 @@ You will now update the app so that we can capture new list entries.
 
       4. Set the "Key" to `userId`.
 
-      5. Set the "Value" to "Authenticated User" > "User ID".
+      5. Set the "Value" to "Authenticated User" -> "User ID".
 
       6. Click "Confirm".
 
@@ -661,9 +661,9 @@ In this section we will add the ability to swipe on a `ListTile` to delete it.
 
 6. In the **"Actions"** panel on the right, click "Add Action".
 
-   1. Under "Custom Action" > "PowerSync", select "powersyncWrite".
+   1. Under "Custom Action" -> "PowerSync", select "powersyncWrite".
 
-   2. Under the "Set Action Arguments" > "sql" section, add the SQL query to delete the list item.
+   2. Under the "Set Action Arguments" -> "sql" section, add the SQL query to delete the list item.
 
       1. Paste the following into the "Value" field:
          `delete from lists where id = :id;`
@@ -745,7 +745,7 @@ Future signOut() async {
 
 7. Click "Add Action" and add a call to the `signOut` Custom Action.
 
-8. Chain another Action and call to "Supabase Authentication" > "Log Out":
+8. Chain another Action and call to "Supabase Authentication" -> "Log Out":
 
 <Frame>
   <img src="/images/integration-66.avif" />