diff --git a/docs/ff-concepts/adding-customization/custom-functions.md b/docs/ff-concepts/adding-customization/custom-functions.md index 5060ea06..0398d1ba 100644 --- a/docs/ff-concepts/adding-customization/custom-functions.md +++ b/docs/ff-concepts/adding-customization/custom-functions.md @@ -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 @@ -77,38 +101,5 @@ function code. Instead, you can pass the app state variable as a parameter and t -## Some common examples - -
-Calculating Discounts: - -``` -double calculateDiscount(double price, double discountRate) { -return price - (price * discountRate / 100); -} -``` - -
- - -
-String Capitalization: - -``` -String capitalize(String input) { -return input.isNotEmpty ? '${input[0].toUpperCase()}${input.substring(1)}' : ''; -} -``` -
- -
-Temperature Conversion: - -``` -double celsiusToFahrenheit(double celsius) { -return (celsius * 9/5) + 32; -} - -``` -
- +## 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. diff --git a/docs/ff-concepts/adding-customization/custom-widgets.md b/docs/ff-concepts/adding-customization/custom-widgets.md index 7f4ddbec..9478c1cd 100644 --- a/docs/ff-concepts/adding-customization/custom-widgets.md +++ b/docs/ff-concepts/adding-customization/custom-widgets.md @@ -99,6 +99,8 @@ FlutterFlow: +

+ :::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). ::: diff --git a/docs/ff-concepts/design-system/design-system.md b/docs/ff-concepts/design-system/design-system.md index e90eb83a..5d54cd85 100644 --- a/docs/ff-concepts/design-system/design-system.md +++ b/docs/ff-concepts/design-system/design-system.md @@ -645,12 +645,12 @@ You can add the responsive style by following the instructions below:

-### 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*: @@ -718,15 +718,18 @@ If you prefer watching a video tutorial, here's the one for you:

-### 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. @@ -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.
-

\ No newline at end of file +

+ +## 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. \ No newline at end of file diff --git a/docs/ff-integrations/payments/revenuecat.md b/docs/ff-integrations/payments/revenuecat.md index a661c44e..4ee49a51 100644 --- a/docs/ff-integrations/payments/revenuecat.md +++ b/docs/ff-integrations/payments/revenuecat.md @@ -40,40 +40,32 @@ The [**underlying package for RevenueCat**](https://pub.dev/packages/purchases_f

-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:

![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: @@ -103,9 +95,9 @@ To enable RevenueCat in FlutterFlow, follow the steps below:

-## 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: @@ -135,7 +127,7 @@ Here is an example of retrieving monthly subscription details:

-## 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: @@ -222,15 +214,12 @@ Using this action, you can allow users to re-activate the subscription they have -## 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 @@ -251,3 +240,8 @@ See more details [here](https://community.revenuecat.com/sdks-51/why-are-offerin

+## 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. +