Skip to content

Add mentions of new Libraries & Tools #308

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
Mar 31, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 27 additions & 36 deletions docs/ff-concepts/adding-customization/custom-functions.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,31 @@ keywords: [FlutterFlow, Custom Functions, Customizations, Flutter, Dart, Pub.dev
---

# Custom Functions
Custom Functions in FlutterFlow allow you to perform simple Dart calculations and logic. These functions are ideal for tasks that require immediate results, such as data transformations, mathematical calculations, or simple logic operations. **Custom Functions** enable you to encapsulate reusable logic, making your code more organized and maintainable.
Custom Functions in FlutterFlow allow you to perform simple Dart calculations and logic. These functions are ideal for tasks that require immediate results, such as data transformations, mathematical calculations, or simple logic operations. **Custom Functions** enable you to encapsulate reusable logic, making your code more organized and maintainable. Let's see some common examples:

**To calculate discount given price and discount rate:**

```js
double calculateDiscount(double price, double discountRate) {
return price - (price * discountRate / 100);
}
```

**To capitalize a String input:**

```js
String capitalize(String input) {
return input.isNotEmpty ? '${input[0].toUpperCase()}${input.substring(1)}' : '';
}
```

**To convert Celsius to Fahrenheit**

```js
double celsiusToFahrenheit(double celsius) {
return (celsius * 9/5) + 32;
}
```

## Key Use Cases

Expand Down Expand Up @@ -77,38 +101,5 @@ function code. Instead, you can pass the app state variable as a parameter and t
</details>


## Some common examples

<details>
<summary>Calculating Discounts:</summary>

```
double calculateDiscount(double price, double discountRate) {
return price - (price * discountRate / 100);
}
```

</details>


<details>
<summary>String Capitalization:</summary>

```
String capitalize(String input) {
return input.isNotEmpty ? '${input[0].toUpperCase()}${input.substring(1)}' : '';
}
```
</details>

<details>
<summary>Temperature Conversion:</summary>

```
double celsiusToFahrenheit(double celsius) {
return (celsius * 9/5) + 32;
}

```
</details>

## Utility Functions Library
Instead of building everything from scratch, explore our **[Utility Functions Library](https://marketplace.flutterflow.io/item/ZVBmWMGpXe6vqnASRHDA)** — packed with 50+ helpful functions for everyday tasks like formatting text, manipulating dates, validating input, and more. Easily plug them into your custom logic to save time and reduce errors.
2 changes: 2 additions & 0 deletions docs/ff-concepts/adding-customization/custom-widgets.md
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,8 @@ FlutterFlow:
</iframe>
</div>

<p></p>

:::tip[Choosing a Pubspec Dependency]
For a comprehensive guide on navigating external packages using pub.dev, evaluating packages, and making the best choices for your app, [**follow the guide**](custom-code.md#adding-a-pubspec-dependency).
:::
Expand Down
21 changes: 13 additions & 8 deletions docs/ff-concepts/design-system/design-system.md
Original file line number Diff line number Diff line change
Expand Up @@ -645,12 +645,12 @@ You can add the responsive style by following the instructions below:
</div>
<p></p>

### Adding Custom Fonts
### Custom Fonts

Adding Custom Fonts to your app makes it stand out from others. This section allows you to upload your own fonts. You can upload the custom font files of types `.ttf`, `.otf`, and `.woff.` Once the font is uploaded, you can use it directly from the widget or add it to the text style section to create a general theme.

:::info
Before you upload the *Custom Fonts*, make sure you have permission to use the font in your application.
Before you upload the Custom Fonts, make sure you have permission to use the font in your application.
:::

To add the *Custom Fonts*:
Expand Down Expand Up @@ -718,15 +718,18 @@ If you prefer watching a video tutorial, here's the one for you:
<p></p>


### Adding Custom Icons
### Custom Icons

Custom icons help reinforce your brand identity and add a unique touch to your app. Before uploading icons to FlutterFlow, you’ll first need to generate them using an icon font generator like [FlutterIcon](https://www.fluttericon.com/) or [IcoMoon](https://icomoon.io/).

We’ve also built our **[own SVG to Custom Icon Generator](https://icons.flutterflow.app)** to make the process even easier — feel free to use that instead.

Adding *Custom Icons* to your app helps you build the brand identity. Before you add the Custom Icons in FlutterFlow, you need to generate them from any icon generation site (like [fluttericon](https://www.fluttericon.com/) and [iconmoon](https://icomoon.io/)) and export them using appropriate settings.

:::info
Make sure you have permission to use the icons in your application.
Make sure you have the proper rights or licenses to use the icons in your application.
:::

To add custom icons:
**Steps to Generate and Add Custom Icons**

1. Head over to the [iconmoon](https://icomoon.io/app/#/select).
2. Import your custom icon (.svg) or select from the free icons set.
Expand Down Expand Up @@ -769,8 +772,10 @@ To add custom icons:
12. Now click on the **Upload Icon Info** button.
13. Select and upload the `filename.dart` under the downloaded folder (besides the fonts folder).
14. Click **Add Icons**.
15. To use a custom icon, add the **Icon** widget, move to the properties panel, and scroll down to the **Icon** section.
16. Click on the already selected icon, select the **Custom Icons** tab, and then select your icon.

#### Use the Custom Icon

To use a custom icon, add the **Icon** widget, move to the properties panel, and scroll down to the **Icon** section. Click on the already selected icon, select the **Custom Icons** tab, and then select your icon.

<div style={{
position: 'relative',
Expand Down
5 changes: 4 additions & 1 deletion docs/ff-integrations/database/supabase/database-actions.md
Original file line number Diff line number Diff line change
Expand Up @@ -256,4 +256,7 @@ If you are using this trigger on a ListView, make sure to **disable** the **Infi
allow="clipboard-write">
</iframe>
</div>
<p></p>
<p></p>

## Offline Support for Supabase Apps
If you need offline capabilities in your Supabase-powered app, consider using the **[PowerSync Library](https://marketplace.flutterflow.io/item/dm1cuOwYzDv6yQL2QOFb)** built by the **[PowerSync](https://www.powersync.com/)** team. It's designed specifically to enable seamless offline-first experiences by syncing your Supabase data locally and keeping it up to date when the device reconnects.
58 changes: 26 additions & 32 deletions docs/ff-integrations/payments/revenuecat.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,40 +40,32 @@ The [**underlying package for RevenueCat**](https://pub.dev/packages/purchases_f
</div>
<p></p>

Integrating the RevenueCat in your app comprises the following steps:

1. [Setup RevenueCat](#1-setup-revenuecat)
2. [Enable RevenueCat in FlutterFlow](#2-enable-revenuecat-in-flutterflow)
3. [Retrieving in-app purchases and subscription details](#3-retrieving-in-app-purchases-and-subscription-details)
4. [Add RevenueCat actions](#4-add-revenuecat-actions)
5. [Testing](#5-testing)
6. [Launch](#6-launch)

## 1. Setup RevenueCat
## Setup RevenueCat

To set up the RevenueCat, follow these steps carefully:

1. Sign up for a new RevenueCat account [here](https://app.revenuecat.com/).
2. [Create a project](https://www.revenuecat.com/docs/getting-started/quickstart#%EF%B8%8F-create-a-project), [add your app](https://www.revenuecat.com/docs/getting-started/quickstart#%EF%B8%8F-add-an-app--platform), and ensure that you [add service credentials](https://www.revenuecat.com/docs/getting-started/quickstart#%EF%B8%8F-service-credentials) to help RevenueCat communicate with the app stores on your behalf.
3. [Create subscriptions](https://www.revenuecat.com/docs/getting-started/quickstart#%EF%B8%8F-store-setup) in the respective stores.
1. While creating subscriptions in Google Play Console, if you see a message saying '***Your app doesn't have any in-app products yet**'* like in this picture, follow the steps below:
1. While creating subscriptions in Google Play Console, if you see a message saying '***Your app doesn't have any in-app products yet**'* like in this picture, follow the steps below:
<p></p>
![error-while-creating-sub-in-play-console.avif](imgs/error-while-creating-sub-in-play-console.avif)
1. Return to FlutterFlow and navigate to **Settings & Integrations >** **In App Purchases & Subscriptions >** **RevenueCat**.
2. Switch on the **Enable RevenueCat**. For now, just enter any random string as your API Key (eg. `testkey`). We’ll update this later.
3. Now, from the toolbar menu, click **Download APK**
4. In the Play Console, create a [Closed testing](https://play.google.com/console/about/closed-testing/) track and create a new release.
5. Upload your **App Bundle** or **APK**, enter the release name, and create the release.
6. Open the **Subscriptions** tab again. It should let you manage subscriptions now.

1. Return to FlutterFlow and navigate to **Settings & Integrations >** **In App Purchases & Subscriptions >** **RevenueCat**.

2. Switch on the **Enable RevenueCat**. For now, just enter any random string as your API Key (eg. `testkey`). We’ll update this later.

3. Now, from the toolbar menu, click **Download APK**

4. In the Play Console, create a [Closed testing](https://play.google.com/console/about/closed-testing/) track and create a new release.

5. Upload your **App Bundle** or **APK**, enter the release name, and create the release.

6. Open the **Subscriptions** tab again. It should let you manage subscriptions now.
4. [Create Products and Entitlements in RevenueCat](https://www.revenuecat.com/docs/getting-started/quickstart#%EF%B8%8F-configure-products-and-entitlements-in-revenuecat).

## 2. Enable RevenueCat in FlutterFlow
### Enable RevenueCat in FlutterFlow

To enable RevenueCat in FlutterFlow, follow the steps below:

Expand Down Expand Up @@ -103,9 +95,9 @@ To enable RevenueCat in FlutterFlow, follow the steps below:
</div>
<p></p>

## 3. Retrieving in-app purchases and subscription details
## Displaying Subscription Details in Your App

To display the in-app purchases and subscription details, such as price, description, etc., inside the UI elements, you need to retrieve this information from RevenueCat.
To show in-app purchase and subscription information — such as pricing, product name, and description — within your app’s UI, you'll need to fetch these details from RevenueCat using the appropriate API or method.

Here is an example of retrieving monthly subscription details:

Expand Down Expand Up @@ -135,7 +127,7 @@ Here is an example of retrieving monthly subscription details:
</div>
<p></p>

## 4. Add RevenueCat actions
## RevenueCat Actions

To manage in-app purchases and subscriptions inside your FlutterFlow app, you have to use the RevenueCat Actions. Below are the types of RevenueCat actions:

Expand Down Expand Up @@ -222,15 +214,12 @@ Using this action, you can allow users to re-activate the subscription they have
</figure>


## 5. Testing

You can test your subscriptions using sandbox environments, which simulate real store behavior without incurring costs. [This document](https://www.revenuecat.com/docs/test-and-launch/sandbox) provides detailed guidelines for testing purchases on [Android](https://www.revenuecat.com/docs/test-and-launch/sandbox/google-play-store) and [iOS devices](https://www.revenuecat.com/docs/test-and-launch/sandbox/apple-app-store).
## Testing Subscriptions

## 6. Launch
You can test your subscriptions using sandbox environments, which simulate real store behavior without incurring costs. Check out the full **[Sandbox Testing Guide](https://www.revenuecat.com/docs/test-and-launch/sandbox)** for more details.

Before launching your app to production make sure you go through the **Launch Checklist** of RevenueCat:
Before going live, make sure to review **[RevenueCat’s Launch Checklist](https://docs.revenuecat.com/docs/launch-checklist)** to ensure everything is properly set up for production.

[In-App Purchase Launch Checklist – RevenueCatRevenueCat](https://docs.revenuecat.com/docs/launch-checklist)

## FAQs

Expand All @@ -251,3 +240,8 @@ See more details [here](https://community.revenuecat.com/sdks-51/why-are-offerin
</p>
</details>

## Looking for other options?

If you're looking for other tools to manage in-app subscriptions, [**Adapty**](https://adapty.io/) is a solid alternative to RevenueCat — it offers advanced analytics, paywall A/B testing, and seamless integration with iOS and Android apps.
You can explore the [**Adapty Library on our Marketplace**](https://marketplace.flutterflow.io/item/Mf1oFJcqngHzERZSPNA8) — it's actively maintained by the Adapty team and always kept up to date.