diff --git a/docs/accounts-billing/imgs/add-domain-team.avif b/docs/accounts-billing/imgs/add-domain-team.avif
new file mode 100644
index 00000000..70711269
Binary files /dev/null and b/docs/accounts-billing/imgs/add-domain-team.avif differ
diff --git a/docs/accounts-billing/imgs/add-domain.avif b/docs/accounts-billing/imgs/add-domain.avif
new file mode 100644
index 00000000..70820173
Binary files /dev/null and b/docs/accounts-billing/imgs/add-domain.avif differ
diff --git a/docs/accounts-billing/imgs/pricing-timeline-2025-dark.png b/docs/accounts-billing/imgs/pricing-timeline-2025-dark.png
new file mode 100644
index 00000000..521f6422
Binary files /dev/null and b/docs/accounts-billing/imgs/pricing-timeline-2025-dark.png differ
diff --git a/docs/accounts-billing/imgs/pricing-timeline-2025-light.png b/docs/accounts-billing/imgs/pricing-timeline-2025-light.png
new file mode 100644
index 00000000..8f34e71b
Binary files /dev/null and b/docs/accounts-billing/imgs/pricing-timeline-2025-light.png differ
diff --git a/docs/accounts-billing/imgs/remove-domain-team.avif b/docs/accounts-billing/imgs/remove-domain-team.avif
new file mode 100644
index 00000000..4782a8b1
Binary files /dev/null and b/docs/accounts-billing/imgs/remove-domain-team.avif differ
diff --git a/docs/accounts-billing/imgs/renew.png b/docs/accounts-billing/imgs/renew.png
new file mode 100644
index 00000000..a0a2027d
Binary files /dev/null and b/docs/accounts-billing/imgs/renew.png differ
diff --git a/docs/accounts-billing/manage-custom-domains.md b/docs/accounts-billing/manage-custom-domains.md
index 49d2b682..6c85c302 100644
--- a/docs/accounts-billing/manage-custom-domains.md
+++ b/docs/accounts-billing/manage-custom-domains.md
@@ -2,29 +2,29 @@
# Manage Custom Domains
-Only *Pro* and *Teams* plans include **one** free custom domain. The *Teams* plan comes with one custom domain for the whole team. If you are on the *Standard* plan, you will need to purchase a custom domain, as it is not included in the plan for free.
+All paid plans include one free custom domain, with the option to purchase more if needed.
### How do I purchase additional custom domains?
-To purchase domains:
+To purchase domains, paid users can go to their [**account**](https://app.flutterflow.io/account) page, find the **Custom Domains** section, and click the **Add Domains** button.
-1. *Standard* and *Pro* users can go to their [**account**](https://app.flutterflow.io/account) page, find the **Custom Domains** section, and click the **Add Domains** button.
-2. The *Team* owner can buy from the My Organization page.
-3. Click **Add Domains** to buy a new one.
+
+
+
+The **Team** owner can purchase domains from the **My Team** page. Under the **Custom Domains** section, click **Add Domains** to add one for the team.
+
+
:::note
Note that purchasing a domain is not possible during the trial period. If you're interested in obtaining a domain, please reach out to our support team for further assistance.
:::
-
### How do I remove custom domains?
-To remove the custom domain:
+To remove the custom domain, paid users can go to their [**account**](https://app.flutterflow.io/account) page, find the **Custom Domains** section, and click **Remove Domains** to remove the existing custom domain.
-1. *Standard* and *Pro* users can go to their [**account**](https://app.flutterflow.io/account) page, find the **Custom Domains** section, and click the **Add Domains** button.
-2. The *Team* owner can buy from the My Organization page.
-3. Click **Remove Domains** to remove the existing custom domain.
+The **Team** owner can remove domain from the **My Team** page. In the **Custom Domains** section, click **Remove Domains**.
-
\ No newline at end of file
+
diff --git a/docs/accounts-billing/new-pricing-comparison.md b/docs/accounts-billing/new-pricing-comparison.md
new file mode 100644
index 00000000..20d496f1
--- /dev/null
+++ b/docs/accounts-billing/new-pricing-comparison.md
@@ -0,0 +1,757 @@
+---
+slug: plan-comparison
+title: "Plan Comparison"
+description: "Compare FlutterFlow plans and features to find the right plan for your needs"
+hide_table_of_contents: true
+sidebar_position: 3
+---
+
+
+
+
+
+import {useState, useEffect} from 'react';
+
+export const PricingToggles = () => {
+ const [currency, setCurrency] = useState('USD');
+ const [billingPeriod, setBillingPeriod] = useState('monthly');
+
+ // Update sticky header when pricing changes
+ useEffect(() => {
+ // Trigger sticky header recreation when pricing data changes
+ const event = new CustomEvent('pricingChanged');
+ window.dispatchEvent(event);
+ }, [currency, billingPeriod]);
+
+ const pricingData = {
+ USD: {
+ monthly: {
+ free: 0,
+ individual: 39,
+ growth: '1st seat: $80, \n 2nd seat: $55',
+ business: '1st seat: $150, \n Seats 2-5: $85 each*',
+ enterprise: 'Custom'
+ },
+ annual: {
+ free: 0,
+ individual: 351, // $360/year = $30/month effective
+ growth: '1st seat: $720, \n 2nd seat: $495',
+ business: '1st seat: $1,350, \n Seats 2-5: $765*', // $4752/year = $396/month effective
+ enterprise: 'Custom'
+ }
+ },
+ INR: {
+ monthly: {
+ free: 0,
+ individual: 1300, // Official INR rate
+ growth: '1st seat: ₹2,650, \n 2nd seat: ₹1,850', // Official INR rate
+ business: '1st seat: ₹5,100, \n Seats 2-5: ₹2,850 each*', // Official INR rate
+ enterprise: 'Custom'
+ },
+ annual: {
+ free: 0,
+ individual: 11700, // ₹11,700/year = ₹975/month effective
+ growth: '1st seat: ₹27,000, \n 2nd seat: ₹13,500',
+ business: '1st seat: ₹45,900, \n Seats 2-5: ₹25,650*',
+ enterprise: 'Custom'
+ }
+ }
+ };
+
+ const formatPrice = (price) => {
+ // Return the string directly if the price is a string
+
+ if (typeof price === 'string') return price;
+
+ if (currency === 'USD') {
+ return `$${price}`;
+ } else {
+ return `₹${price.toLocaleString('en-IN')}`;
+ }
+ };
+
+ const getPeriodText = () => {
+ return billingPeriod === 'annual' ? (
+ <>
+ billed annually
+
+ ) : 'per month';
+ };
+
+ const currentPrices = pricingData[currency][billingPeriod];
+
+ return (
+
Visual Development Environment Drag & drop builder for creating apps visually
+
✅
+
✅
+
✅
+
✅
+
✅
+
+
+
1K+ Prebuilt Templates Ready-to-use app templates and components
+
✅
+
✅
+
✅
+
✅
+
✅
+
+
+
Project Count Number of projects you can create
+
2 projects
+
Unlimited
+
Unlimited
+
Unlimited
+
Custom
+
+
+
AI Generation AI-powered assistance for building and coding
+
5 requests/lifetime
+
50 requests/mo
+
200 requests/mo
+
500 requests/mo
+
Custom
+
+
+
+
Data & Integrations
+
+
+
Firebase Integration Connect to Firestore, Firebase Auth, and more
+
✅
+
✅
+
✅
+
✅
+
✅
+
+
+
Supabase Integration Connect to Supabase for database and auth
+
✅
+
✅
+
✅
+
✅
+
✅
+
+
+
AI Agents Create AI agents with OpenAI, Anthropic, and Google
+
0
+
1
+
Unlimited
+
Unlimited
+
Unlimited
+
+
+
API Endpoints Connect to external APIs and services
+
2
+
Unlimited
+
Unlimited
+
Unlimited
+
Custom
+
+
+
Swagger/OpenAPI Imports Import API specifications automatically
+
❌
+
✅
+
✅
+
✅
+
✅
+
+
+
Development Environments Separate databases and configuration values for testing and production
+
1 (default only)
+
1 (default only)
+
Up to 1 additional (+default)
+
Up to 2 additional (+default)
+
Custom
+
+
+
+
Development Features
+
+
+
Code Extensibility Add custom code to extend functionality
+
✅
+
✅
+
✅
+
✅
+
✅
+
+
+
Live Debugging Test your app in the browser and hot reload
+
✅
+
✅
+
✅
+
✅
+
✅
+
+
+
Visual Logic Builder Create app logic with a visual editor
+
✅
+
✅
+
✅
+
✅
+
✅
+
+
+
State Management Manage app data and user interface states
+
✅
+
✅
+
✅
+
✅
+
✅
+
+
+
Custom Code Expressions Write custom expressions and logic
+
❌
+
✅
+
✅
+
✅
+
✅
+
+
+
One-Click Localization (i18n) Automatically translate your app using Google Translate API
+
❌
+
❌
+
✅
+
✅
+
✅
+
+
+
Push to GitHub Push your project code to GitHub
+
❌
+
❌
+
✅
+
✅
+
✅
+
+
+
VS Code Extension Sync custom code files back and forth between FlutterFlow and VS Code
+
❌
+
❌
+
✅
+
✅
+
✅
+
+
+
Automated Testing Run automated tests on your applications
+
❌
+
❌
+
1 test per project
+
Up to 3 tests per project
+
Unlimited tests
+
+
+
Custom Classes Bring custom Dart classes into your app
+
❌
+
✅
+
✅
+
✅
+
✅
+
+
+
YAML Editing Refactor your project with by editing the YAML representation
+
❌
+
✅
+
✅
+
✅
+
✅
+
+
+
Project API Programmatic access to project data
+
❌
+
✅
+
✅
+
✅
+
✅
+
+
+
MCP Server (Experimental) Model Context Protocol server integration
+
❌
+
✅
+
✅
+
✅
+
✅
+
+
+
Cloud Functions Write and deploy Firebase Cloud Functions directly from FlutterFlow
+
✅
+
✅
+
✅
+
✅
+
✅
+
+
+
CLI Command-line interface for downloading code and project management
+
❌
+
✅
+
✅
+
✅
+
✅
+
+
+
Configuration File Snippets Directly modify Info.plist, main.dart, Android manifest, and other config files
+
❌
+
✅
+
✅
+
✅
+
✅
+
+
+
Local Run Desktop Emulator Run code locally with automatic environment setup
+
❌
+
✅
+
✅
+
✅
+
✅
+
+
+
+
Design Features
+
+
+
Design Systems Consistent color schemes, typographic, icons, and more
+
✅
+
✅
+
✅
+
✅
+
✅
+
+
+
Animations & Haptic Touch Add animations and haptic feedback to your app
+
✅
+
✅
+
✅
+
✅
+
✅
+
+
+
Custom Fonts & Icons Upload and use custom fonts and icons
+
✅
+
✅
+
✅
+
✅
+
✅
+
+
+
Custom Typography Presets Create reusable text styles and presets
+
❌
+
❌
+
❌
+
✅
+
✅
+
+
+
Screenshot Generator Generate app screenshots automatically for App Store review
+
✅
+
✅
+
✅
+
✅
+
✅
+
+
+
Figma Theme Import Import color and typography themes from Figma
+
✅
+
✅
+
✅
+
✅
+
✅
+
+
+
Figma Frame Import AI-powered import of Figma frames to FlutterFlow
+
❌
+
❌
+
❌
+
100 requests/mo
+
Custom
+
+
+
+
Advanced App Features
+
+
+
Push Notifications Send notifications to app users
+
❌
+
✅
+
✅
+
✅
+
✅
+
+
+
Payments Integration Integrate Stripe and other payment providers
+
❌
+
✅
+
✅
+
✅
+
✅
+
+
+
Ads Integration Monetize your app with advertisements
+
❌
+
✅
+
✅
+
✅
+
✅
+
+
+
Third-Party Package Imports Add pub.dev packages and GitHub dependencies
+
❌
+
✅
+
✅
+
✅
+
✅
+
+
+
Debug Panel Advanced debugging tools and console
+
❌
+
✅
+
✅
+
✅
+
✅
+
+
+
+
Collaboration Features
+
+
+
Number of Editors Team members who can edit projects
+
1
+
1
+
Up to 2
+
Up to 5*
+
Custom
+
+
+
Single Project Collaborator Add-Ons Allow non-team members to collaborate on a single project
+
None
+
None
+
Up to 4 collaborators available for purchase
+
Up to 10 collaborators available for purchase
+
N/A
+
+
+
Real-Time Collaboration Work together on projects simultaneously
+
❌
+
❌
+
✅
+
✅
+
✅
+
+
+
Project Commenting Add comments and feedback to projects
+
❌
+
✅
+
✅
+
✅
+
✅
+
+
+
Manual Commits Make explicit named commits to the current branch for version control
+
✅
+
✅
+
✅
+
✅
+
✅
+
+
+
Number of Branches Create and manage multiple project branches (all plans include main branch)
+
1 (main only)
+
1 (main only)
+
Up to 2 open branches (+main)
+
Up to 5 open branches (+main)
+
Custom
+
+
+
Automated Snapshot Backups Automatic project backups and version control
+
Up to 1 hour prior
+
Up to 1 day prior
+
Up to 3 days prior
+
Up to 7 days prior
+
Custom
+
+
+
Activity Logging Track project changes and user activity
+
❌
+
❌
+
❌
+
❌
+
✅
+
+
+
Project Level Access Control Manage permissions for individual projects
+
Manage view-only collaborators only
+
Manage view-only collaborators only
+
✅
+
✅
+
✅
+
+
+
Centralized Billing Manage team billing from one account
+
❌
+
❌
+
✅
+
✅
+
✅
+
+
+
+
Library Features
+
+
+
Library Imports Add FlutterFlow libraries to your projects
+
✅
+
✅
+
✅
+
✅
+
✅
+
+
+
Library Publishing Publish your projects as reusable libraries
+
❌
+
✅
+
✅
+
✅
+
✅
+
+
+
+
Deployment
+
+
+
Web Deployment Deploy your app as a web application
+
✅
+
✅
+
✅
+
✅
+
✅
+
+
+
Free Subdomains Deploy your web app to FlutterFlow subdomains
+
Up to 2
+
Up to 20
+
Up to 20
+
Up to 20
+
Unlimited
+
+
+
Custom Domains Deploy to your own custom domain
+
❌
+
Connect 1 domain for free, additional connections will be charged
+
Connect 1 domain for free, additional connections will be charged
+
Connect 1 domain for free, additional connections will be charged
+
Custom
+
+
+
Custom Web Favicon Set custom favicon for web publishing
+
❌
+
✅
+
✅
+
✅
+
✅
+
+
+
FlutterFlow Watermark Removal Remove FlutterFlow branding from published apps
+
❌
+
✅
+
✅
+
✅
+
✅
+
+
+
Code Download Download your project's source code
+
❌
+
✅
+
✅
+
✅
+
✅
+
+
+
APK Download Download Android APK files
+
❌
+
✅
+
✅
+
✅
+
✅
+
+
+
One-Click Apple & Google Store Deployment Deploy directly to app stores with one click
+
❌
+
✅
+
✅
+
✅
+
✅
+
+
+
+
Support
+
+
+
Account and Billing Support Help with account management and billing questions
+
✅
+
✅
+
✅
+
✅
+
✅
+
+
+
Community Support Access to FlutterFlow community forums
+
✅
+
✅
+
✅
+
✅
+
✅
+
+
+
Email Support Get help via email from our support team
+
❌
+
✅
+
✅
+
✅
+
✅
+
+
+
In-App Support Chat support directly within FlutterFlow
+
❌
+
❌
+
✅
+
✅
+
✅
+
+
+
Dedicated Live Support Direct access to dedicated support specialists
+
❌
+
❌
+
❌
+
❌
+
✅
+
+
+
+
+ );
+};
+
+# Plan Comparison
+
+Choose the plan that fits your development needs and team size.
+
+
+
+ ← Scroll horizontally to see all plans →
+
+
+
+
+
+## Business Plan Extensions
+
+### *Agencies Expansion
+Includes all Business features, plus the ability to add up to 7 additional seats (12 total per team) at **$85/seat/month** (USD) or **₹2,850/seat/month** (INR) and collaborate with up to 20 other paid users at the project level via Single Project Collaborator Passes. Must be approved as an Expert Agency via [Contra](https://contra.com/opportunity/rWlmk2Yv-become-a-flutter-flow-agency).
+
+### Localized Pricing
+INR pricing reflects localized rates adjusted for local purchasing power, providing the same features and plan structures as USD pricing. All plans include the same comprehensive feature set regardless of currency.
\ No newline at end of file
diff --git a/docs/accounts-billing/payments-billing.md b/docs/accounts-billing/payments-billing.md
index a712e574..b92af815 100644
--- a/docs/accounts-billing/payments-billing.md
+++ b/docs/accounts-billing/payments-billing.md
@@ -5,7 +5,7 @@ This section contains information on the payment methods we accept and how to ch
## Invoices
#### Can I Add A Tax ID (e.g. VAT) to my invoice?
-Unfortunately, at this time we are not able to process Tax IDs.
+If you need to include VAT in your invoices, please reach out to our support team at support@flutterflow.io, and we’ll be happy to assist you with the process.
## Payment Methods
diff --git a/docs/accounts-billing/plan-pricing.md b/docs/accounts-billing/plan-pricing.md
index e187fee8..180d3313 100644
--- a/docs/accounts-billing/plan-pricing.md
+++ b/docs/accounts-billing/plan-pricing.md
@@ -4,13 +4,598 @@ title: Plans & Pricing
tags: []
toc_max_heading_level: 5
sidebar_position: 2
+hide_table_of_contents: true
---
+import Head from '@docusaurus/Head';
+import ThemedImage from '@theme/ThemedImage';
+
+
+
+
+
# Plans & Pricing
-:::note
+:::info
For our most up-to-date information, please visit **[FlutterFlow pricing](https://flutterflow.io/pricing)**.
-:::
-
-:::note
Regional discounts are available, please **[log in to FlutterFlow](https://app.flutterflow.io/)** to see the pricing for your region.
:::
+
+## Pricing Update [June 2025]
+
+FlutterFlow has evolved significantly, from a visual builder to a complete development environment with features like code export, GitHub integration, branching, AI agents, and app deployment tools. As the platform has matured, so have the ways people use it. To better reflect how teams build and scale today, we're introducing updated pricing plans. These updates will help us continue improving the platform, supporting your workflows, and delivering the advanced features needed for building production-ready apps.
+
+
+### What's Changing?
+
+As part of broader improvements to the platform, FlutterFlow is updating its pricing and packaging model effective **August 18, 2025**. The update introduces new plan tiers aligned with team size, simplifies billing, and ensures better alignment between user needs and platform capabilities.
+
+**Key Changes**
+
+- We're retiring our legacy plans: **Standard**, **Pro**, and **Teams** and introducing a new, simplified lineup: **Free**, **Basic**, **Growth**, **Business**. Our Enterprise offering will continue as is, providing advanced features and support for larger teams.
+- If you're already using FlutterFlow, you'll be automatically moved to the new plan that best fits your current team size. No action needed on your part.
+- That said, feature access will look a little different. Some users will gain powerful new capabilities, while others might see a few features move to higher tiers.
+
+
+To understand how each new plan compares, **[view the detailed plan comparison](new-pricing-comparison.md).**
+
+
+
+## FAQS
+
+### General / Timeline
+
+
+
+Who is affected by this pricing change?
+
+
+All current Free, Standard, Pro, and Teams plan users will move to the new structure.
+
+Enterprise customers on custom contracts are not affected by these changes.
+
+
+
+
+
+
+When does the new pricing take effect for me?
+
+
+- For new users, the pricing and packaging will apply immediately on August 18, 2025. After this date, no legacy plans (Standard, Pro, Teams) can be purchased or updated.
+- For existing Free, Standard, Pro, and Teams plan users, billing and feature access will remain unchanged during a **30-day transition period** where you will have the ability to select a new plan. On September 18, 2025, your account will be moved to one of the new plans if no action is taken.
+ - **Important exception:** If you're currently on a Teams plan, you will no longer be able to use your team features on personal projects starting August 18, 2025. To maintain existing Teams plan feature access on those projects, you must either:
+ - Move your personal projects into your Team, or
+ - Convert your current Teams plan to a new Growth or Business plan and purchase a separate Basic plan for your personal work.
+
+- **Note:** All plan updates will take effect at 12:00 AM local time on the specified effective date.
+
+
+
+
+
+
+
+
+Why is FlutterFlow updating its pricing?
+
+
+When we launched FlutterFlow, we had one goal: make it radically easier to build beautiful, powerful digital products. Four years later, we’re a full development platform that goes from idea to app store. We now have collaboration features, AI tools, lots of integrations, branching, development environments, and more, built in.
+
+Now our plans are evolving to reflect that growth. We’ve introduced new features across every tier and restructured our plans to better align with the way people build today and how their needs change as they move from MVP to scaling production apps.
+
+
+
+
+### Plans
+
+
+
+How do the new plans differ from the current plans?
+
+
+The new plans introduce pricing by team size, differentiation between team and personal projects, and more structured feature access to support different types of users and teams as they grow.
+
+
Key changes include:
+
+
New plan tiers based on team size, with clearer limits of number of developers that can work together.
+
Collaboration primarily at the team level to support scalable workflows and controls, with a new option to enable single-project collaboration as an add-on.
+
Updated feature access, with certain advanced features now only available in higher tiers.
+
Plan-based Support levels, with availability varying by plan.
+
Revised pricing structure, with updated USD and INR rates.
+
+
+For a detailed comparison of the current and new plans, including feature breakdown and pricing, please see the **[Detailed Plan Changes](new-pricing-comparison.md)** table above.
+
+
+
+
+
+What is the difference between team projects and personal projects?
+
+
Give you access to all the features of your Growth or Business plan
+
Can be shared with your whole team, or restricted to specific members
+
The team owner always has access to every project in the team
+
+
**Personal projects:**
+
+
Belong only to you; team owners cannot access them
+
Only include the features available in your personal plan
+
Note: If you want to use Growth or Business features by yourself, you can create a team of one
+
+
+To update the collaboration type of a project, go to the Collaboration tab in your project settings and choose from one of the following options: Team Project, Personal Project, or Restricted Team Project
+
+
+
+
+
+Which plan is best suited for different types of users?
+
+
The tiers are designed as a general guide to help highlight which plans tend to work best for different types of use cases, but we know that every user’s needs are different and you’re always welcome to choose the one that works best for you. That said, here’s how we generally recommend thinking about the tiers based on common usage patterns:
Growth: Solo developers or small teams needing advanced functionality.
+
Business: Established teams (3–5 users) ready for advanced development workflows.
+
Enterprise: Larger teams needing advanced security, governance, and collaboration features.
+
+
+
+
+
+How do I know which plan I will be moved to if I do not make a selection before September 18, 2025?
+
+
+If you do not make a selection during the election period (August 18, 2025 - September 17, 2025), your new plan will be automatically determined based on your current **team size**. For example:
+
+
+
Users on the Free plan will remain in the Free plan, but with new feature restrictions.
+
Solo users in Standard will move to the **Basic** plan.
+
Pro plan users and Teams of 2 will move to the **Growth** plan.
+
Teams of 3-5 will move to the **Business** plan.
+
Teams with 6+ users will move to the Business plan and retain their current seat count as of September 18, 2025 for up to 12 months. During this period, no additional seats can be added. After 12 months, you will need to upgrade to an Enterprise plan to continue building with more than 5 team seats.
+
We highly encourage you to begin evaluating your team’s resourcing and expansion needs early, as this plan will not support usage growth beyond the feature limits of the Business tier. Early planning and engaging with our sales team can help ensure a smooth migration, avoid disruption, and prevent any risk of project or data access issues at the 12-month cut-off. To start the conversation, please reach out to sales@flutterflow.io to explore the best solution package for your team.
+
Expert Agencies (approved via **Contra**) will move to the Business plan with Agencies Expansion included.
+
+
+
+
+
+We'll notify you directly in the app and by email before the September 18, 2025 migration, so you'll have a chance to review or adjust your plan if needed. If you're unsure, contact us and we'll help you confirm your new plan
+
+
+
+
+
+Are there any benefits to electing into a new plan vs. being auto-migrated?
+
+
+Yes! By proactively choosing to move to any of the new plans with annual billing during the election period (before September 18, 2025), you will receive **20% off your first year**.
+
+
+
+
+
+Can I stay on my old plan?
+
+
+No. All existing plans will be retired on September 18, 2025, and users will be automatically transitioned to the new plans based on their current team size. This helps us simplify billing, improve feature alignment, and deliver a more consistent experience across all teams.
+
+
+If you’re currently a paying user and would prefer not to be part of the migration to one of the new paid plans, you have two paths:
+
+
+
**Continue building on the Free plan**: you can downgrade your plan to Free, where you will be able to view, edit, and run any 2 existing projects of your choosing inside the editor, but paid‑tier features, deployments, and team seats will be disabled until you upgrade.
+
**Export your code**: download the full Flutter source and assets for each project before September 18, 2025 and continue building locally to retain full ownership of your codebase.
+
+
+If you’d like to review your options or adjust your usage ahead of time, our support team is here to help. You will receive an email confirming the plan your account will move to, but can also confirm by logging into your account after August 18, 2025 to see how your team maps to the new tiers.
+
+
+
+
+
+What's included in the Enterprise plan?
+
+
+The Enterprise plan is built for organizations that need advanced security, scale, and white-glove support while managing production-grade apps across teams. In addition to all features available in lower tiers, Enterprise includes:
+
+
+
Controlled FlutterFlow upgrades through version pinning
+
Unlimited access to automated snapshot backups for project history and rollback
+
Single Sign-On (SSO) and Activity Logging for secure, centralized access
+
Unlimited development environments to mirror staging, QA, and production workflows
+
Advanced accessibility features to meet regulatory requirements
+
No automatic right for FlutterFlow to use your logo
+
Live and dedicated technical support, plus access to custom engineering solutions when needed
+
+
+To learn more or explore a custom Enterprise solution for your team, please reach out to sales@flutterflow.io – we'd be happy to walk you through options that match your scale and needs.
+
+1. No, your current apps will continue to function and remain deployed, though access to certain features may change depending on your new plan tier starting September 18, 2025\.
+2. If you elect into a new plan during the election period before September 18, 2025, those feature changes will take effect as soon as your new plan becomes active.
+
+
+
+
+
+
+What happens to features I already use but are not part of my new plan?
+
+
+
+ Access to features will be updated according to your new plan beginning September 18, 2025. If you're currently using a feature that is moving to a higher tier, there are two possible outcomes:
+
+
+ Build-time features (like activity logging, automated testing, or Figma Frame imports) will no longer be accessible. You’ll see an upgrade prompt if you attempt to use them.
+
+
+ Run-time features (like API endpoints, branching, GitHub integration, or dev environments) will be grandfathered and continue to work as-is, but you won’t be able to create additional instances beyond what you already have. For example:
+
+
+ If you are currently building on a Free plan with 3 API endpoints, you can continue editing them, but won’t be able to add a 4th without upgrading to a paid plan.
+
+
+ If you’ve used branching or added multiple development environments and currently exceed your new plan limits, those remain active but you’ll be prompted to upgrade if you try to add more.
+
+
+
+
+
+
+ This approach ensures existing work isn’t disrupted, while still aligning future access with your selected plan.
+
+
+
+
+
+
+### Free Users
+
+
+
+I am a Free user and I will lose access to technical support. Where else can I look to for help when building?
+
+
+
+ Starting August 18, 2025 for new users and September 18, 2025 for existing users, 1:1 support will no longer be included with the Free plan. However, we offer a collection of self-serve resources to help you continue building with confidence:
+
+
+ Our Help Center at docs.flutterflow.io offers a free collection of step-by-step guides on how to build, get started, and make the most of FlutterFlow’s features.
+
+
+ We are also launching new troubleshooting guides to help you resolve common issues and workflows.
+
+
+ Plus, a new AI-powered assistant will help you quickly find answers and relevant resources within the Help Center.
+
+
+
+
+ You can turn to our Community Forum to ask questions, share learnings, and get help from other FlutterFlow builders.
+
+
+ We also offer free educational content via our YouTube channel to support your learning and skill development.
+
+
+
+
+ These resources are designed to help all users succeed without needing to rely on 1:1 technical support.
+
+
+ Our Support team will still be available at support@flutterflow.io to all users to assist with billing or account-related issues.
+
+
+
+
+
+
+
+
+
+I am a Free user and have more than 2 projects – what will happen to them?
+
+
+
+ Starting September 18, 2025, all personal Free plan projects will be archived until you actively select two to keep editable. This selection is permanent and cannot be changed afterwards. All other projects will be archived – they'll still appear on your dashboard, and published apps will remain live, but you won't be able to open, edit, or publish updates unless you upgrade.
+
+
+ **Marketplace exception:** Existing Free plan projects published to the Marketplace prior to August 18, 2025 will not count toward your 2-project limit. If a project is later removed from Marketplace and you exceed the limit, it will be automatically archived.
+
+
+
+
+ For users on a team-based plan but not on a personal paid plan, this 2-project selection requirement only applies to your personal projects. You will still be able to edit any projects that belong to your team.
+
+
+ We've set this policy to ensure everyone can explore FlutterFlow for free while keeping heavy usage sustainable. We won't remove any of your existing projects. They're safe and accessible whenever you decide to upgrade.
+
+
+
+
+
+
+Can I still deploy my existing FlutterFlow apps if I stay on the Free Plan with >2 projects?
+
+
+Any existing projects already live will remain deployed, even if you have more than 2 projects currently deployed. However, on the new Free plan, you’ll be limited to editing and publishing updates to at most 2 active projects. All other projects will remain deployed, but you won’t be able to make changes or redeploy them unless you upgrade to a paid plan.
+
+
+
+
+
+What if I delete one of my 2 active projects?
+
+
+If you delete one of your active projects, we’ll automatically unarchive your most recently edited archived project to replace it.
+
+
+If you only had 2 projects total and delete one, you’ll be able to create a new project instead.
+
+
+
+### Teams (Growth/Business)
+
+
+
+What happens to projects with multiple collaborators?
+
+
+Starting September 18, 2025, all project collaboration must occur within a team (Growth or Business). This means:
+
+
+
Team projects. Everyone on your team keeps full edit access. Any project collaborator who is not a paid seat on your team will be switched to view-only access at the project level until they’re added as a paid team member.
+
Projects not associated with a team. The project owner keeps full edit access and all other project collaborators become view-only members on that project. To keep editing together, move the project into a team and invite those collaborators as team members.
+
Solo projects: If you are the only editor, nothing changes. You retain full edit access.
+
+
+Note: If you choose to migrate to a new paid plan before September 18, 2025, any collaborators not on your team will immediately move to view-only access at the time of conversion.
+
+
+
+
+
+
+I’m currently on a Teams plan and want to change the number of users. Can I still do this on or after August 18, 2025?
+
+
+No. As a part of the existing Teams plan retirement, team size will be locked on August 18, 2025. To adjust your team size after that date, please transition to one of the new plans (Growth or Business).
+
+
+
+
+
+I am currently on a Teams plan with 6+ users and do not want to migrate to the Enterprise plan – how do I stay on the Business tier and how will I be charged?
+
+
+- Teams with more than 5 users who do not wish to move yet to an Enterprise contract can continue on the Business tier under a transitional pricing structure. These teams will be billed at the standard Business tier seat pricing and then $85/seat/month for each additional seat over 5. Pricing will be based on the number of users in the team as of September 18, 2025 and billed on a monthly basis.
+
+
+- This option allows larger retail teams to continue operating under the Business feature set without immediate contract negotiation, but will be available only to existing 6+ seat teams for 12 months from September 18, 2025 through September 18, 2026 to ensure continuity without immediate contract negotiation.
+
+
+- Note: Your seat count will be locked based on your team size as of September 18, 2025. You may reduce seats later, but will not be able to add more or expand beyond the feature set and usage limits of the current Business tier (except for any run-time features already in use that are grandfathered).
+
+
+However, if you would like to maintain a single account, collaboration across all of your team members, enterprise level features and support, please reach out to sales@flutterflow.io.
+
+
+
+
+
+Can I belong to multiple teams? How will that be billed?
+
+
+Yes, starting August 18, 2025, users will be able to belong to multiple teams in FlutterFlow in the new plans – this is a new capability as part of our updated team and collaboration structure. Each team is treated as a separate billing entity, with its own plan, users, and usage limits.
+
+
+If you are added as an editor on more than one team, you will count toward the seat total on each of those teams, and each team will manage your seat and billing as part of their own subscription. You will not be billed individually – all billing remains centralized at the team level.
+
+
+Note: you can also be added as a view-only collaborator on projects that are a part of different teams. View-only collaborators do not count toward any seat limits or billing.
+
+
+
+
+
+Can I share projects across multiple teams?
+
+
+- No, projects cannot be shared across multiple teams. Each project belongs to at most one team, and access is managed within that team’s structure.
+- If you want someone from another team to collaborate on a project, they must be invited into your team as an editor or granted access using a Single Project Collaborator Pass.
+
+
+
+
+
+What if I want to continue collaborating with project collaborators who are not on a Teams plan with me?
+
+
+- With the new pricing model, collaboration is only supported within shared Teams plans. This means that to work together on a project, all collaborators must be part of the same Growth, Business, or Enterprise team. However, users can now be members of multiple teams at the same time, which allows you to create separate teams for different projects, depending on who you need to collaborate with.
+- Project-level collaboration (where individuals outside your team could be added to specific projects) is being phased out to simplify permissions, ensure security, and support shared billing.
+- If you would like to continue collaborating:
+ - You can invite others to join your team (additional seats may require an upgrade depending on your plan).
+ - Or, they can create a new team and invite you, depending on who should own billing and project access.
+ - **New:** If you're on a Growth or Business plan, you may also purchase Single Project Collaborator passes, which allows you to grant another paid user access to a single project without adding them to your full team. Each pass is $15/month and can be reassigned to different collaborators or projects as needed. You can purchase up to 4 (Growth) or up to 10 (Business). This collaborator must also be on a paid plan to be eligible to be a single project collaborator.
+- This change ensures that every project has clear ownership, consistent permissions, and a scalable path for team-based collaboration.
+
+
+
+
+
+
+I build apps for clients (agency/freelancer). What plan should I choose?
+
+
+
+ We will now offer multiple plan options to support agencies of all sizes – whether you’re a solo freelancer, a fast-growing studio, or an established consultancy. We believe the best path depends on your team size and how you prefer to work with your clients:
+
+
+ Solo freelancers or small agencies (1-5 developers)
+
+
+ We recommend the Business plan, which supports up to 5 team members with advanced features like branching and access control.
+
+
+
+
+ Agencies with more than 5 developers:
+
+
+ If your client plans to manage the code:
+
+
+ We recommend encouraging your client to purchase their own Business or Enterprise plan and then invite your agency developers to join, either as Team members or as collaborators (with a collaborator pass). To learn more about our Enterprise offering, they can reach out to sales@flutterflow.io.
+
+
+
+
+ If you intend to maintain the code on behalf of your client:
+
+
+ You may qualify for our new Agencies Expansion package, coming out with the Business plan and available to all verified FlutterFlow Expert Agencies.
+
+
+ As part of the add-on, you can:
+
+
Continue to purchase additional seats beyond the 5 included in Business at $85/seat/month
+
And, continue to invite additional paid users to specific projects without requiring them to be team members via Single Project Collaborator Passes.
+
+
+
+ To become eligible now, you can apply to be an Expert Agency on our Contra page. Existing Expert Agencies listed on Contra will be pre-approved to select the Agencies Expansion package starting August 18, 2025.
+
+
+
+
+
+
+
+
+
+
+
+You can transfer ownership of projects between yourself and your client. To transfer a project to a client, simply add them as a collaborator using a pass, transfer ownership, and then remove them and the pass if no longer needed after the handoff.
+
+
+
+
+
+### Billing
+
+
+
+How will my billing cycle be affected when I move to the new plan?
+
+
+To ensure a smooth transition, billing changes will align with your existing billing cycle:
+
+
+
You will stay on your current pricing until your next billing renewal (monthly or annual). For example:
+
+
If your monthly billing date is September 3, 2025, your features will switch to the new plan on September 18, 2025 (or earlier if you elect to switch), but new pricing will apply starting your next billing cycle on October 3, 2025.
+
If you’re on an annual plan, your price won’t change until your next annual renewal. After that, the new pricing will apply for the following 12 months.
+
+
You will have the option to upgrade early to the new pricing plan if you choose, with any remaining credit from your current plan applied toward the new plan.
+
+
+If you are currently on an annual plan and choose to cancel your subscription during the transition period (August 18, 2025 - September 17, 2025), you will be eligible for a pro-rated refund. This is to account for any features you may have prepaid for under your current plan that will no longer be available once the new plans take effect.
+
+
+If you have questions about your billing, please contact support at support@flutterflow.io
+
+
+
+
+
+Will there still be a discount for paying annually on the new plans?
+
+
+Yes, we will continue offering a meaningful discount on all new plans when billed annually instead of monthly – typically around 25%. This discount remains available regardless of your location or currency and reflects 12 months of service at a reduced monthly rate.
+
+
+Note: Annual billing is not available for Business teams with greater than 5 seats on transitional pricing, as this is intended to support existing users during their migration period.
+
+
+
+
+
+How will prices change with respect to country discounts?
+
+
+Localized pricing will continue where applicable. If you’re in a supported region, your billing will reflect adjusted rates at existing discounts based on your location.
+
+
+
+
+
+What if I am billed in INR right now?
+
+
+If your account is billed in INR, your pricing will follow our localized rates:
+
+
+
**Basic Plan:** ₹1,300 INR per seat per month.
+
**Growth Plan:** ₹2,650 INR for the first seat, and ₹1,850 INR for the second seat per month.
+
**Business Plan:** ₹5,100 INR for the first seat, and ₹2,850 INR each for seats 2–5 per month.
+
Agencies Expansion: Each additional seat beyond 5 at ₹2,850 INR/month.
+
+
+All INR pricing reflects the same features and plan structures as USD pricing, with adjustments for local purchasing power.
+
+
+
+### Miscellaneous
+
+
+
+I have special access. How will this change impact me?
+
+
+- If you currently have Special Access (such as through a community program, academic use, or other exception), your FlutterFlow experience will remain unchanged. You will continue to have the same benefits provided under your existing Special Access status, which is separate from the new plan structure.
+- **Note:**
+ - Users with Special Access can collaborate with an unlimited number of users, but those collaborators must also have either Special Access or be on a paid teams (Growth or Business) plan.
+ - Special Access may be granted at either the individual or team level. If only the individual has Special Access, they will not have full feature access when working on team projects unless the team also has Special Access.
+
+
+
+
+
+
+Will the referral program still exist with the new plans, now that the Pro plan is going away?
+
+
+- With the retirement of the Pro plan, our current referral program will also be sunset. This means any active referral discounts will end at your next renewal. However, any earned referral credits will remain in your account and can be redeemed for equivalent free months of the new Growth plan.
+- We’re actively exploring what a future referral or incentive program could look like under the new pricing model, with the goal of better supporting and rewarding our community as we grow.
+
+
+
+
+
+
+Are there any changes to DreamFlow plans as well?
+
+
+Dreamflow is a separate product and Dreamflow plans are not affected by this plan update.
+
+
diff --git a/docs/accounts-billing/privacy-terms-of-service.md b/docs/accounts-billing/privacy-terms-of-service.md
index 0adeadbc..2e956362 100644
--- a/docs/accounts-billing/privacy-terms-of-service.md
+++ b/docs/accounts-billing/privacy-terms-of-service.md
@@ -12,7 +12,7 @@ To request deletion of your personal data, please reach out to our support team
To unsubscribe from FlutterFlow emails, please click the “Unsubscribe” link in the footer of our emails.
### Where can I view your Privacy Policy?
-You can review the most recent version of our Privacy Policy here.
+You can review the most recent version of our Privacy Policy [on the website](https://www.flutterflow.io/privacy).
### Where can I view your Terms of Service (ToS)?
-You can review the most recent version of our Terms of Service here.
\ No newline at end of file
+You can review the most recent version of our Terms of Service [linked on the website](https://www.flutterflow.io/tos).
\ No newline at end of file
diff --git a/docs/accounts-billing/referral-program.md b/docs/accounts-billing/referral-program.md
index c6203012..45c091da 100644
--- a/docs/accounts-billing/referral-program.md
+++ b/docs/accounts-billing/referral-program.md
@@ -1,37 +1,8 @@
# Referral Program
-Everyone with a FlutterFlow account has a personal referral code to share with friends and colleagues. For every referral that subscribes, you will receive one month of FlutterFlow Pro credited to your account.
+:::warning[Discontinued]
+With the retirement of the Pro plan, the existing referral program has been discontinued. Any active referral discounts will end at your next renewal. However, referral credits you’ve already earned will remain in your account and can be redeemed for free months on the new Growth plan.
-In order to receive this reward, the person you referred will need to:
-
-1. Click your referral link and create a FlutterFlow account.
-2. Complete purchase of a FlutterFlow Standard or Pro Plan (after their trial period ends).
-
-You are only eligible for one referral reward per individual. If your referral has already signed up for FlutterFlow, this will not be eligible for a reward.
-
-:::info
-In order to account for refunds and cancellations, referral credits will be processed 45 days after your referral's first payment.
+We are also exploring new referral and incentive programs to better support and reward our community under the updated pricing model.
:::
-
-### How To Find And Share Your Referral Code
-
-Your personal referral code is listed on your [My Account Page](https://app.flutterflow.io/account).
-
-1. Navigate to the [My Account Page](https://app.flutterflow.io/account) and scroll down to the **Referrals** section.
-2. To copy your referral code, press the copy icon.
-
-
-
-### How To Track How Many People Have Signed Up Using Your Referral Code
-
-You can track your referrals in the **Referrals** section on the [My Account Page](https://app.flutterflow.io/account). Here you will see:
-
-* **Signed Up:** How many people have signed up for FluterFlow using your referral link.
-* **Subscribed:** How many people have subscribed to FlutterFlow Pro or Standard using your referral link.
-
-
-
-### I forgot to sign-up using the referral link, can I add this after creating account?
-
-Unfortunately, we are unable to retroactively change this after your account has been created.
\ No newline at end of file
diff --git a/docs/accounts-billing/subscriptions/flutterflow-for-teams.md b/docs/accounts-billing/subscriptions/flutterflow-for-teams.md
deleted file mode 100644
index 536b2cd0..00000000
--- a/docs/accounts-billing/subscriptions/flutterflow-for-teams.md
+++ /dev/null
@@ -1,107 +0,0 @@
----
-slug: subscriptions/flutterflow-teams
-title: FlutterFlow for Teams
-tags: []
-toc_max_heading_level: 5
-sidebar_position: 1
----
-
-
-# FlutterFlow For Teams
-
-## How do I upgrade to a Teams plan?
-
-:::info
-Teams plans are annual plans and can have up to 20 team members. For an account with more than 20 members, please reach out to sales@flutterflow.io
-:::
-
-To change your account to a Teams Plan, please follow these steps:
-
-1. After logging into your FlutterFlow account, head to your account [Dashboard](https://app.flutterflow.io/) and select **My Organization** from the top right.
-2. Select **Create Team**.
-
-
-
-
-
-
-
-3. Next, enter your organization name (e.g. FlutterFlow) and your website/email domain (e.g. flutterflow.io) and select **Create Team**.
-
-
-
-## How do I add users to my *Teams* plan?
-
-To add users to your Teams plan, you will need to complete two steps:
-
-### 1. Adding seats to your organization
-
-A seat grants one user the ability to use Flutterflow. You will need to purchase a seat for each team member that you would like to add to your Team. To do so:
-
-1. From the **My Organization** tab, select **Subscribe**.
-
-
-
-2. A popup will appear, select the number of seats (subscriptions) and Billing Cycle Additional users can be added to your team at any time. **You can select from a monthly or annual plan.**
-
-
-
-
-3. A checkout page will appear for you to complete the purchase. **Please note: this can take a few seconds to load.** If you want to add more seats at a later time, you can do so by selecting the Add Seats button.
-
-
-
-:::tip
-You can see how many seats you have used here
-
-
-:::
-
-
-### 2. Inviting users to your Team
-
-:::warning
-If you add an existing Flutterflow user to your Teams plan, they will need to manually cancel their subscription using these [**instructions**](subscriptions.md#cancel-my-plan). Once this is completed, please reach out to support@flutterflow.io or chat to process the refund for any remaining time on your monthly plan. We're working on automating this process soon!
-:::
-
-1. After you've purchased your seats, this will be reflected in the **Seats** section under **My Organization** (example below).
-2. To invite a new user, select the **Invite User(s)** button.
-
-
-
-3. A popup will appear, type the email of the user you would like to add.
-4. If they are not an existing user of FlutterFlow, they will be sent an invitation to join.
-
-:::note
-* Teams plans do not include a trial period.
-* You must verify your email before inviting users.
-:::
-
-
-
-
-## Delete users from Teams plan
-
-To remove a user from the teams, click on the **red cancel button** and select **Yes** in the popup to confirm the removal.
-
-
-
- 
- Delete users from Teams Plan
-
-
-
-
- 
- Confirmation Popup
-
-
----
-
-## FAQs
-
-#### Can I reduce my Teams plan to one seat?
-
-No, you can't. The minimum requirement is two seats, which includes one for the owner's pro plan + an additional team seat.
-
-
diff --git a/docs/accounts-billing/subscriptions/more-subscription-faqs.md b/docs/accounts-billing/subscriptions/more-subscription-faqs.md
deleted file mode 100644
index b3d452a3..00000000
--- a/docs/accounts-billing/subscriptions/more-subscription-faqs.md
+++ /dev/null
@@ -1,40 +0,0 @@
-
-
-# Other Subscription Questions
-
-### When Will My Plan Renew / When Will I Be Charged?
-
-You can view the next billing cycle date in the "My Plan" section of the [Flutterflow Account Page](https://app.flutterflow.io/account).
-
-
- 
- The next billing cycle date for this account is August 31, 2021
-
-
-
-
-### Do Subscriptions Renew Automatically?
-
-Yes, our subscriptions renew automatically to avoid disrupting your app development. Monthly subscriptions renew on the same day each month (typically the day you subscribed).
-
-### Can I Pause My Subscription?
-
-We do not currently offer the option to pause your subscription.
-
-### Can I Transfer My Subscription To Another User?
-
-We are unable to transfer a paid FlutterFlow subscription to another FlutterFlow account.
-
-### If I have a paid plan will project collaborators be able to use paid features?
-
-FlutterFlow subscriptions are seat based. A user added to your project will only have access to the features of their account plan. In order to access paid features, each individual user will need to have a paid plan.
-
-### If I upgrade from Standard Plan to Pro Plan in the middle of my billing cycle, will I be charged for both plans?
-
-Upgrades are automatic, so the system will count the remaining days from the Standard, and reduce it from the Pro Plan price.
-
-For example, if you have paid $42 for Standard and you have 15 days remaining in the billing cycle, then on upgrading to Pro(let's say priced at $70) you will eventually pay $(70-21) = $49.
-
-:::info
-FlutterFlow provides different pricing options depending on your region. To see the exact prices for your area, visit the [**Plans & Pricing**](../plan-pricing.md) page in our documentation.
-:::
\ No newline at end of file
diff --git a/docs/accounts-billing/refund.md b/docs/accounts-billing/subscriptions/refund.md
similarity index 88%
rename from docs/accounts-billing/refund.md
rename to docs/accounts-billing/subscriptions/refund.md
index b854f0f8..4c4dde27 100644
--- a/docs/accounts-billing/refund.md
+++ b/docs/accounts-billing/subscriptions/refund.md
@@ -8,6 +8,6 @@ sidebar_position: 4
# Refunds
-If you're not happy with your FlutterFlow subscription, you can [cancel at any time](subscriptions/subscriptions.md#cancel-my-plan).
+If you're not happy with your FlutterFlow subscription, you can [cancel at any time](./subscriptions.md#cancel-my-plan).
However, there are no refunds for cancellation. In the event that the Company suspends or terminates your Account or these Terms, you understand and agree that you shall receive no refund, whether for any unused time on a subscription, any license or subscription fees for any portion of the Service, any content or data associated with your User Account, or for anything else.
\ No newline at end of file
diff --git a/docs/accounts-billing/subscriptions/subscriptions.md b/docs/accounts-billing/subscriptions/subscriptions.md
index 5f95d27a..c757b2cf 100644
--- a/docs/accounts-billing/subscriptions/subscriptions.md
+++ b/docs/accounts-billing/subscriptions/subscriptions.md
@@ -3,76 +3,113 @@ slug: subscriptions
title: Subscriptions
tags: []
toc_max_heading_level: 5
-sidebar_position: 3
+sidebar_position: 0
---
# Subscriptions
-This section contains information on free trials, changing your plan, and other subscription questions.
+This section provides information on free trials, plan changes, and other subscription-related questions.
## Free Trials
-All paid plans come with a free 14-day trial.
-### How do I Start A Free Trial?
-To start a free trial, please follow these steps:
+The first paid plan you purchase will come with a free 14-day trial. For 14 days, you will have access to the features of the plan you selected before you are charged. If you can cancel your subscription during this 14-day trial, you will not be charged.
+
+:::info
-1. From flutterflow.io select Create Account in the top right corner.
-2. Enter your name, email address, and password and select Create Account.
-3. Select Upgrade at the top of the screen.
-4. Enter your billing and payment information and select Subscribe.
+The 14-day trial applies only to your first paid plan. Any later plan (Basic, Growth, or Business) won’t include a trial, even if the first plan is still in trial.
-### What Happens At The End of The Trial Period?
-At the end of your trial period, your payment method will be charged. You cancel at any time during the trial period.
+:::
+### How do I start a free trial?
-## Upgrade Plan
+To start a free trial, please follow these steps:
+
+1. Navigate to [app.flutterflow.io](http://app.flutterflow.io/)
+2. Click the “Create Account” text and enter your name, email address, and password. Then press the “Create Account” button to create your account.
+3. Validate your email address by clicking on the link in the message sent to the email address you provided.
+4. To start trialing on a **Basic** plan, click on your profile picture in the bottom left corner, then click “Upgrade Plan.” Select “Start Free Trial” and fill out and submit the form with your payment information.
+5. To instead start trialing on a **Growth** or **Business** plan, click “My Team”, and create a team. Then press the “Subscribe” button, select your desired plan and number of seats, click on “Start Free Trial”, and fill out and submit the form with your payment information.
+### What happens at the end of the trial period?
+At the end of your trial period, your payment method will be charged. You can cancel at any time during the trial period.
+
+## Upgrade Plan
### How do I upgrade my plan?
-To upgrade your plan type, please follow these steps:
-1. After logging into your FlutterFlow, select “Account” from the top right.
-2. In the My Plan section, select Change Plan.
-3. Select the button under the plan you would like to upgrade to.
-4. Enter your payment information and select Subscribe. The main FlutterFlow page will open.
+If you would like to upgrade from a Basic plan, follow the steps to purchase a new Growth or Business plan, and then cancel your existing Basic plan if you no longer want it.
-### How do I check what plan I am subscribed to?
-To view your plan details, go to the [**FlutterFlow Account Page**](https://app.flutterflow.io/account) and select **Manage Billing.**
+To upgrade a team directly from a Growth plan to a Business plan, please follow these steps:
-The **Current Plan** section will show which plan you are subscribed to.
+1. Click on “My Team” and select the team that has the Growth plan you wish to upgrade.
+2. Click on “Upgrade to Business Plan” near the top right corner.
+3. View the invoice and confirm that you are willing to be charged this amount for the upgrade.
-:::warning[Teams Plan]
-For information on the Teams plan, please use [**this link**](flutterflow-for-teams.md).
-:::
+### How do I check what plan I am subscribed to?
+To view your plan details, go to the [**FlutterFlow Account Page**](https://app.flutterflow.io/account) and select **Manage Billing.** The **Current Plan** section will show which plan(s) you are subscribed to.
## Downgrade Plan
+
### How to downgrade?
-If you wish to downgrade from Pro to Standard or from Teams to Pro or Standard, you should cancel your existing plan and then sign up for the new one after it expires.
-### What happens when I downgrade to the free plan? Will my apps be deleted?
-You will still be able to access the apps you created and make changes inside FlutterFlow.
+If you wish to downgrade from Growth to Basic or from Business to Growth or Basic, you should cancel your existing plan and then sign up for the new one after it expires.
-However, you won't be able to access any premium features such as custom APIs, GitHub integration, and code downloads. Additionally, premium features will no longer work in Preview and Run Mode.
+### What happens when I downgrade to the free plan? Will my projects be deleted?
+On the free plan, you will be restricted to two projects. Any other projects won't be deleted, but will be archived and made accessible if you return to any paid plan.
## Cancel My Plan
+
You can cancel your plan at any time. You will have access to the paid features until your next billing cycle date.
Please follow these steps to cancel your account:
-1. Log in to FlutterFlow and go to the Account page.
-2. Select **Change Plan** from My Plan.
-3. Under your plan type, select **Cancel Plan.**
-4. Complete the Cancellation Survey and select **Cancel Subscription.**
-5. You will be taken to a new page. Under Current Plan select **Cancel**. A popup will appear, select Cancel.
+1. Log in to FlutterFlow and click on your profile picture to go to the Account page.
+2. Find the plan you want to cancel, and select **Cancel Plan**.
+3. Complete the Cancellation Survey and select **Cancel Subscription.**
+
+:::warning
+
+Your FlutterFlow account can have multiple team plans and a personal plan at the same time; you must cancel each plan manually. Canceling one plan does not automatically cancel any other active plan.
-:::note
-When you cancel a paid plan, your account will be converted to a Free account.
:::
-You can confirm your account has been canceled from the My Plan section of the **[Account Page](https://app.flutterflow.io/account)**. Your account will now say **ends at** vs. **renews at.**
+## Other Subscription Questions
+
+### When will my plan renew / When will I be charged?
+
+You can view the next billing cycle date in the "My Plan" section of the [Flutterflow Account Page](https://app.flutterflow.io/account).
+
+
+
+The next billing cycle date for this plan is September 12, 2025.
+
+### Do subscriptions renew automatically?
+
+Yes, our subscriptions renew automatically to avoid disrupting your app development. Monthly subscriptions renew on the same day each month (typically the day you subscribed).
+
+### Can I pause my subscription?
+
+We do not currently offer the option to pause your subscription.
+
+### Can I transfer my subscription to another user?
+
+We are unable to transfer a paid FlutterFlow subscription to another FlutterFlow account.
+
+### If I have a paid plan, will project collaborators be able to use paid features?
+
+No. Having a paid plan yourself does not give your project collaborators access to paid features. Starting **September 17, 2025**, all collaboration must happen within a **Growth, Business, or Enterprise plan**, and every collaborator must have a **paid seat** in that team to have full edit access. Anyone not on your team will be switched to **view-only** until added as a paid team member.
+
+### If I upgrade from the Growth Plan to the Business Plan in the middle of my billing cycle, will I be charged for both plans?
+
+Upgrades are automatic, so the system will count the remaining days from the Growth plan and reduce it from the Business Plan price.
+
+For example, if you paid $80 for Growth and you have 15 days remaining in the billing cycle, then on upgrading to Business (let's say priced at $150), you will eventually pay $(150-40) = $110.
+
+:::info
-
+FlutterFlow provides different pricing options depending on your region. To see the exact prices for your area, visit the [**Plans & Pricing**](../plan-pricing.md) page.
+:::
\ No newline at end of file
diff --git a/docs/ff-concepts/adding-customization/cloud-functions.md b/docs/ff-concepts/adding-customization/cloud-functions.md
index 216a8971..fbd34dc3 100644
--- a/docs/ff-concepts/adding-customization/cloud-functions.md
+++ b/docs/ff-concepts/adding-customization/cloud-functions.md
@@ -245,6 +245,44 @@ For this example, we'll use the result (i.e., generated logo image URL) and set
+## Testing Cloud Functions in Google Cloud console
+
+The Google Cloud console has built-in functionality to allow you to trigger a Cloud Function for testing. This means that after deploying Cloud Functions, you can test them without writing to Firestore (either from FlutterFlow or otherwise).
+
+Here's how to test FlutterFlow's `sendUserPushNotificationsTrigger` function in the Google Cloud console:
+
+1. Open your browser and navigate to the following URL:
+`https://console.cloud.google.com/functions/details/us-central1/sendUserPushNotificationsTrigger?env=gen1&project=&tab=testing`
+\
+ In here:
+ - Replace `` with your GCP or Firebase project.
+ - If you want to test a different Cloud Function, update `sendUserPushNotificationsTrigger` with the relevant cloud function name.
+2. Paste the following JSON into the Configure Triggering Event text area.
+ - If you want to test a different Cloud Function, update `sendUserPushNotificationsTrigger` with the relevant cloud function name.
+ ```json
+ {
+ "value": {
+ "name": "projects//databases/(default)/documents/sendUserPushNotificationsTrigger/",
+ "fields": {
+ "scheduled_time": { "stringValue": "" },
+ "initial_page_name": { "stringValue": "" },
+ "notification_title": { "stringValue": "Your friends are missing you!" },
+ "notification_text": { "stringValue": "Please come back to Nanochat" },
+ "user_refs": { "stringValue": "users/VXu6EvFMl5M8KMXriYRvFEWTFHA2" }
+ }
+ }
+ }
+ ```
+3. In the `name` property:
+ - Replace `` with your GCP or Firebase project.
+ - Replace `` with the ID of the document. This document must already exist in Firestore.
+ - If you're testing another function than `sendUserPushNotificationsTrigger`, update `ff_user_push_notifications` with the collection where the document is written.
+4. Update the values under the `fields` property for the message you want to send.
+\
+The `fields` in the example above are for FlutterFlow's built-in `sendUserPushNotificationsTrigger` function. If you're testing a different Cloud Function, you will need to update the `fields` for the code in *that* function.
+5. Click the TEST THE FUNCTION button.
+
+The Cloud Function will now run and gather the relevant entries from Google Cloud Logging.
## FAQs
@@ -282,5 +320,20 @@ If you encounter deployment errors, it may be helpful to check out [this communi
+
+Why am I getting a CORS error when executing my Cloud Function?
+
+The CORS error occurs because the **Access-Control-Allow-Origin** header is missing from the response, preventing your request from being completed. This issue can arise with new Cloud Functions, whether deployed through FlutterFlow or not.
+
+Follow the steps below to fix the issue:
+1. Open your Google Cloud Project's [**Cloud Functions List**](https://console.cloud.google.com/functions/list)
+2. Select the function causing the issue.
+3. Navigate to the **Permissions** tab.
+4. Open the **VIEW BY ROLES** tab.
+5. Ensure there's a row with `Cloud Functions Invoker` with principal set to `allUsers`. If it’s missing, click on the **Grant Access**, add `allUsers` with the `Cloud Functions Invoker` role.
+
+
+
+
diff --git a/docs/ff-concepts/adding-customization/code-file.md b/docs/ff-concepts/adding-customization/code-file.md
new file mode 100644
index 00000000..135b0034
--- /dev/null
+++ b/docs/ff-concepts/adding-customization/code-file.md
@@ -0,0 +1,473 @@
+---
+slug: /concepts/custom-code/code-file
+title: Code File
+description: Learn how to create and use custom classes and enums in FlutterFlow.
+tags: [Code File, Custom Code]
+sidebar_position: 5
+keywords: [FlutterFlow, Custom Classes, Custom Enums, Customizations, Flutter, Dart, Pub.dev]
+---
+
+# Code File
+
+FlutterFlow allows you to add your own custom Dart files with [classes](https://dart.dev/language/classes) and [enums](https://dart.dev/language/enums). This means you can create reusable building blocks to manage your app’s data and logic more easily. Using custom classes, you can create custom data types, use their properties in the UI, call methods in action flows, and much more.
+
+## Key Use Cases
+
+- **Custom Models**: Define your own data models, such as `UserProfile`, `Product`, or `Order`, and use them throughout your app.
+- **Business Logic**: Add reusable utility methods like tax calculations, formatting, or conditional evaluations.
+- **Reusable Enums**: Define enums and use them in UI conditions and dropdowns.
+
+:::warning[Limitations]
+
+- **No Generics:** Classes with generic types (e.g., `class ApiResponse {}`) are currently not supported.
+- **No Function-Typed Parameters:** Methods or fields that have function types as parameters or fields are ignored (e.g., void Function(int) onTap).
+- **No Extensions:** Dart Extensions (e.g., `extension StringX on String { … }`) are not supported yet.
+
+:::
+
+## Create Custom Class
+
+To add a custom class, go to the **Custom Code** from the left navigation menu, click **plus (+)** button, and select **Code File**. Set the name of the file, add your code, and hit the **Save** button. Now, you must **validate** your code in the editor to catch basic syntax errors. If there are no errors, click the **Parse** button. FlutterFlow will scan your code and automatically detect supported classes and enums.
+
+Here’s an example of adding a `Review` custom class:
+
+
+
+
+
+
+Here's the code snippet of the `Review` custom class:
+
+```jsx
+class Review {
+ String id;
+ String productId;
+ String userId;
+ String userName;
+ String comment;
+ double rating; // out of 5
+ ReviewStatus reviewStatus;
+ DateTime date;
+ int helpfulCount = 0;
+
+ Review(
+ this.id,
+ this.productId,
+ this.userId,
+ this.userName,
+ this.comment,
+ this.rating,
+ this.reviewStatus,
+ this.date,
+ );
+
+ // Method: Get a short version of the comment
+ String shortComment() {
+ if (comment.length <= 50) return comment;
+ return comment.substring(0, 47) + "...";
+ }
+
+ // Method: Get formatted date as string (e.g., "2024-05-22")
+ String formattedDate() {
+ return "${date.year}-${_twoDigits(date.month)}-${_twoDigits(date.day)}";
+ }
+
+ String _twoDigits(int n) {
+ return n >= 10 ? "$n" : "0$n";
+ }
+
+ // Method: Check if review is positive (4 stars or more)
+ bool isPositive() {
+ return rating >= 4.0;
+ }
+
+ // Method: Check if review is recent (within last 30 days)
+ bool isRecent() {
+ final now = DateTime.now();
+ return now.difference(date).inDays <= 30;
+ }
+
+ // Method: Mark this review as helpful
+ void markHelpful() {
+ helpfulCount += 1;
+ }
+}
+```
+:::tip
+You can also include import statements and access generated classes within your custom class files. For more details, [**see the examples**](common-examples.md) on how to access generated classes.
+:::
+
+## Create Custom Class Instance
+
+You need to create an instance of a class so you can work with actual data and use the class’s properties and methods in your app. Here’s a simple explanation:
+
+- A **class** is like a blueprint or template. For example, the `Review` class describes what a review is, but doesn’t hold any real review information itself.
+- An **instance** (or “object”) is a real, usable item made from that blueprint. See the code snippet below:
+
+ ```jsx
+ Review review1 = Review(
+ 'r001',
+ 'p123',
+ 'u456',
+ 'Alex Morgan',
+ 'Great quality T-shirt!',
+ 4.5,
+ DateTime(2025, 5, 22),
+ 3,
+ ReviewStatus.approved,
+ );
+ ```
+
+- In FlutterFlow, you will store the instance of the custom class in the [state variables](../../ff-concepts/state-management/state-variables.md#state-variables) of your app, page, or component.
+- You can create multiple instances of the same class, reusing the same structure multiple times, each with different review data.
+
+When you create an instance of a class, you can:
+
+- Store actual review details.
+- Access and update the fields (e.g., `review1.rating` or `review1.comment`).
+- Call methods that do something with that data (e.g., `review1.markHelpful()` or `review1.shortComment()`).
+
+To create an instance of a custom class, first you need to [create a state variable](../../ff-concepts/state-management/state-variables.md#creating-state-variables) (of type Custom Class) that will hold the instance. Then, to create and add the instance to the state variable, open the **Set from Variable** dialog and select **Create Custom Class Instance**. Choose the class you want to use, then select the class name from the **Constructor** dropdown. After that, set values for each of the required fields.
+
+
+
+
+
+
+
+## Using Custom Class
+
+Once the custom class is added successfully, you can access its fields and methods in the Variable Dialog, call its methods in the Action Flow Editor, assign instances to state variables, pass them to page or component parameters, and use enum values in dropdowns or conditionals.
+
+### Custom Class as Data Type
+
+You can select your custom class as a Type for variables, state, or parameters, just like a [Custom Data Type](../../resources/data-representation/custom-data-types.md).
+
+
+
+### Access Fields and Methods
+
+You can use custom class fields to display values directly in the UI, and call its methods in variable dialogs to return a result.
+
+
+
+### Set Field [Action]
+
+Use the **Set Field** action to update a specific property of a custom class instance. For example, you can set `review.comment = 'Great fit and quality!'` when a user updates the review, allowing the UI to reflect the new comment instantly.
+
+
+
+
+
+
+### Call Method [Action]
+
+Use the **Call Method** action to invoke a method defined in your custom class. For instance, if your `Comment` class has a `markHelpful()` method, you can trigger it when a user taps a “Helpful” button to record the interaction.
+
+
+
+
+
+
+## Using Static Members
+
+Sometimes, you may want to define fields and methods that are shared across your app. In such cases, `static` fields and methods are ideal. Because they're tied to the class rather than an instance, static members are accessible globally, for example, utilities for formatting, calculations, or global configuration.
+
+This approach is typically used for **stateless utility classes** where shared functionality is needed across the app. For example, look at the class below:
+
+```jsx
+class Utils {
+ static int square(int x) => x * x;
+}
+```
+
+The `Utils` class contains a static method `square` that returns the square of a number without needing to create an object of the class.
+
+Here are couple more examples to understand it better:
+
+- This `StringFormatter` class below provides reusable static methods to capitalize text, convert it to lowercase, or format it in snake_case.
+
+ ```jsx
+ class StringFormatter {
+ static String lastFormatted = '';
+ static int formatCount = 0;
+
+ static String capitalize(String input) =>
+ input[0].toUpperCase() + input.substring(1);
+
+ static String toLowerCase(String input) => input.toLowerCase();
+
+ static String toSnakeCase(String input) =>
+ input.replaceAll(' ', '_').toLowerCase();
+ }
+ ```
+
+- The `MathHelper` class offers handy static methods to calculate tax, apply discounts, find percentages, and round off numbers.
+
+ ```jsx
+ class MathHelper {
+ static double calculateTax(double amount) => amount * 0.18;
+
+ static double applyDiscount(double amount, double discountPercent) =>
+ amount - (amount * discountPercent / 100);
+
+ static double calculatePercentage(double part, double total) =>
+ (part / total) * 100;
+
+ static int roundOff(double value) => value.round();
+ }
+ ```
+
+:::tip
+
+You can mix both **static** and **instance** members in a single class. Static members are shared across all instances, while instance members hold data specific to each object. For example, look at the class below:
+
+```jsx
+class Review {
+ static List flaggedWords = ['bad', 'spam', 'fake'];
+
+ String id;
+ String userId;
+ String comment;
+ int helpfulCount = 0;
+
+ Review(
+ this.id,
+ this.userId,
+ this.comment
+ );
+
+ static bool isCommentAppropriate(String input) {
+ return !flaggedWords.any((word) => input.toLowerCase().contains(word));
+ }
+
+ void markHelpful() {
+ helpfulCount += 1;
+ }
+}
+```
+
+- `flaggedWords` is a static list used across all reviews.
+- `isCommentAppropriate()` is a static method that can be used without creating a `Review` instance, useful for validating comments before saving them.
+
+:::
+
+:::warning
+
+Using static members are powerful, but they should be used carefully. Overusing static methods can lead to less flexible code and potential issues, especially when the logic requires access to state or needs to evolve over time. Stick to static methods only when the logic is truly independent and doesn’t rely on instance-specific data.
+
+:::
+
+### Access Static Fields and Methods
+
+You can access the static class data and methods directly via the ****Set from Variable**** menu.
+
+
+
+### Set Static Field [Action]
+
+Use the **Set Static Field** action to update a static field on a custom class. For example, if you have a class `MathHelper` with a static field `amount`, you can set it using an input value when a user enters a price. This allows you to store that value globally and use it across different calculations.
+
+
+
+
+
+
+
+### Call Static Method [Action]
+
+Use the **Call Static Method** action to run a static method of your class. For instance, you can call `MathHelper.calculateTax(amount)` to compute tax on a given amount during a checkout action, without needing to create an instance of the class.
+
+
+
+
+
+
+## Custom Enums
+
+Similar to how you add a custom class, you can also add Custom Enums in your app. [Enums](../../resources/data-representation/enums.md) are a great way to define a fixed set of values, such as user roles, order statuses, or content types. Once parsed, these enums become available throughout your app and can be used in dropdowns, conditionals, and UI bindings.
+
+For example, you could define an enum called `ReviewStatus` with values like `pending`, `approved`, and `rejected`. Here's the code snippet for it:
+
+```jsx
+enum ReviewStatus {
+ pending,
+ approved,
+ rejected,
+}
+```
+
+
+
+You can access the custom enums from **Set from Variable** menu > **Custom Enum** section. You’ll see your Dart file listed by name. Select the enum you want to use, such as `ReviewStatus`, and then choose the specific value you want to assign.
+
+
+
+
+
+
+
+## Tips & Best Practices
+
+- Keep your custom class files modular and focused; ideally one class per file for better organization and reusability.
+- Avoid advanced Dart features that are not supported by FlutterFlow’s parser, such as generics or function-typed fields.
+- Re-parse your code after making changes to ensure FlutterFlow updates the parsed structure correctly.
+- Document your code with comments to make your custom classes easier to understand and maintain over time.
+
+## FAQs
+
+
+
+Can I add Custom Classes (Code Files) in a Library Project?
+
+
+Yes, you can. When a Library Project is imported, any custom code files you’ve defined will be parsed, and the resulting classes will be available for use in the consuming project.
+
+
\ No newline at end of file
diff --git a/docs/ff-concepts/adding-customization/common-examples.md b/docs/ff-concepts/adding-customization/common-examples.md
index a54b6b59..34b44218 100644
--- a/docs/ff-concepts/adding-customization/common-examples.md
+++ b/docs/ff-concepts/adding-customization/common-examples.md
@@ -35,7 +35,7 @@ import '/auth/firebase_auth/auth_util.dart';
```
:::
-### Accessing FlutterFlow Generated Classes
+### Access FlutterFlow Generated Classes
FlutterFlow generates a complete Flutter codebase for you as you build apps in its platform. Part of this code includes custom classes that are designed to streamline common tasks and encapsulate reusable properties or logic.
@@ -67,7 +67,7 @@ Use this approach only when the component is a fixed element that does not chang
:::
In a **[Custom Widget](custom-widgets.md)**, you can integrate a previously built **[FlutterFlow Component](../../resources/ui/components/intro-components.md)** directly, saving you from recreating child content in code. For example, if you’re building a Custom Widget to display custom dialog boxes or bottom sheets using a package from
-[pub.dev](custom-code.md#pubdev), you can simply return an existing Component created on the canvas, rather than coding a new one from scratch.
+[pub.dev](https://pub.dev/), you can simply return an existing Component created on the canvas, rather than coding a new one from scratch.
:::tip[Imports]
When referencing a Component class in your code, FlutterFlow will automatically add the necessary import statement.
@@ -78,7 +78,7 @@ When referencing a Component class in your code, FlutterFlow will automatically
-### Accessing FlutterFlow Theme in Custom Widget
+### Get FlutterFlow Theme in Custom Widget
When building custom widgets, you often need to style parts of the widget, such as setting colors. Instead of using hardcoded color values, you can directly access the **FlutterFlow Theme**. This theme provides consistent styling across your app and reflects colors set by you or your project developer.
@@ -128,18 +128,17 @@ class _CustomButtonState extends State {
}
}
```
-:::info
-Find the list of colors,
-### Manipulating AppState from Custom Code
-In FlutterFlow, you can access or update AppState directly from the Action Flow Editor. However, certain scenarios may require you to access or modify AppState within custom code for more control over the operation flow. The FFAppState class also provides additional helper functions to manipulate AppState variables. Let’s look at some examples:
+### Modifying AppState from Custom Code
+
+In FlutterFlow, you can access or update AppState directly from the Action Flow Editor. However, certain scenarios may require you to access or modify AppState within custom code for more control over the operation flow. The `FFAppState` class also provides additional helper functions to modify AppState values. Let’s look at some examples:
:::tip[Imports]
Ensure you import `import '../../flutter_flow/flutter_flow_util.dart';` when accessing `FFAppState` in custom code resources.
:::
-- **Accessing AppState in Custom Code**
+- **Get AppState value in Custom Code**
```js
@@ -218,7 +217,7 @@ final newProduct = ProductStruct(
```
-#### Example 2: Accessing Properties of an Existing `ProductStruct` object
+#### Example 2: Get Properties of an Existing `ProductStruct` object
If you have an existing `ProductStruct` object (e.g., retrieved from a list of products), you can access its properties or return specific values back to the calling Action.
@@ -230,7 +229,7 @@ This function retrieves and returns the product's name. The return type is `Stri
```js
// Function to return the product name from a ProductStruct instance
String? getProductName(ProductStruct product) {
- // Access and return the product name
+ // Get and return the product name
return product.name;
}
```
@@ -346,3 +345,94 @@ Here’s a list of other Firebase Auth variables that can be referenced in Custo
- These variables make it easy to integrate Firebase Auth data into custom functionality, enhancing the user experience.
+
+### Get Dev Environment Values in Custom Code
+
+Similar to `FFAppState`, FlutterFlow generates a singleton `FFDevEnvironmentValues` class in your FlutterFlow generated codebase, if you are using **[Dev Environments](../../testing-deployment-publishing/development-environments/development-environments.md)**. This class can also be accessed from custom code if needed. It is generated based on the environment selected by the user at the time of code generation.
+
+To access any Dev Environment values in custom code, simply use:
+
+```js
+Future getWebhookId() async {
+ // Add your function code here!
+ return FFDevEnvironmentValues().webhookId;
+}
+```
+
+### Access Library Components in Custom Code
+
+When using a library dependency in your project, you can also access its components, such as Library App State, Library Values, and Library Widgets, in the user project's custom code. Here are a few examples:
+
+#### Get Library Values
+
+Similar to `FFAppState` or `FFDevEnvironmentValues` class, FlutterFlow generates a singleton `FFLibraryValues` class for library projects, which provides direct access to **[Library Values](../../resources/projects/libraries.md#library-values)**.
+
+To access Library Values directly in custom code:
+
+```js
+Future getSchema(StateStruct? syncStatus) async {
+ print(FFLibraryValues().schema);
+}
+```
+
+#### Get Library Custom Code
+
+When you add a library dependency to your FlutterFlow project, FlutterFlow automatically includes necessary imports, allowing you to utilize custom code resources from the library project in your user project's custom code files.
+
+For example, if you have a library with project ID `library_hybw3o`, FlutterFlow will add the following import to your project:
+
+```js
+import 'package:library_hybw3o/flutter_flow/custom_functions.dart' as library_hybw3o_functions;
+```
+
+
+Now, let's use the library’s custom functions in the user project's custom function:
+
+```js
+int getRandomIndex(List indexList) {
+ final item = library_hybw3o_functions.getRandomItem(); // Library's custom function
+ // get Random Index
+ final randomNumber = math.Random();
+ return ...
+}
+```
+
+#### Manually Add Library Imports
+If the library import doesn’t appear in your project automatically, you can manually add it and assign a custom alias. For example, to import a library’s custom actions into your project’s Custom Widget resource, add the import yourself as shown below:
+
+For example, let's import the library's custom actions into the user project's Custom Widget resource.
+
+If the import is not already available, you can add it manually as follows:
+
+```js
+// Custom import
+import 'package:library_hybw3o/custom_code/actions/index.dart' as library_hybw3o_actions; // Assigning a custom alias to the import
+
+// Example Widget code
+class CustomDialog extends StatefulWidget {
+ const CustomDialog({
+ super.key,
+ this.width,
+ this.height,
+ });
+
+ final double? width;
+ final double? height;
+
+ @override
+ State createState() => _CustomDialogState();
+}
+
+class _CustomDialogState extends State {
+ @override
+ void initState() {
+ library_hybw3o_actions.getSchema(StateStruct()); // calling library custom action
+ super.initState();
+ }
+ @override
+ Widget build(BuildContext context) {
+ return Container(height: 50, width: 50);
+ }
+}
+```
+
diff --git a/docs/ff-concepts/adding-customization/configuration-files.md b/docs/ff-concepts/adding-customization/configuration-files.md
new file mode 100644
index 00000000..a0067b99
--- /dev/null
+++ b/docs/ff-concepts/adding-customization/configuration-files.md
@@ -0,0 +1,886 @@
+---
+slug: /concepts/custom-code/configuration-files
+title: Configuration Files
+description: Learn how to modify platform-specific files for Android and iOS to extend your app's capabilities.
+tags: [Configuration Files, Custom Code]
+sidebar_position: 5
+keywords: [FlutterFlow, Configuration Files, Customizations, Flutter, Dart, Pub.dev, Edit Native Files, Android, iOS, AndroidManifest.xml, Info.plist, Entitlements.plist, main.dart, proguard]
+---
+
+# Configuration Files
+
+FlutterFlow allows you to modify configuration files for your app, and platform-specific files, without leaving the FlutterFlow interface.
+
+In some cases, you’ll need to tweak the configuration files that FlutterFlow generates. This is usually required when integrating third-party packages such as analytics, ad networks, and payment solutions.
+
+Here are the key configuration files you can edit:
+
+- [**`AndroidManifest.xml`**](#androidmanifestxml-android) – Configures app permissions, metadata, and intent filters for Android.
+- [**`build.gradle`**](#buildgradle-android) – Defines Android specific build configurations such as compile SDK version, dependencies, build types, and signing configurations.
+- [**ProGuard files**](#proguard-file-android) – Used for code shrinking and obfuscation in Android builds.
+- [**`Info.plist`**](#infoplist-ios)– Manages iOS app settings, including permissions and configurations.
+- [**`Entitlements.plist`**](#entitlementsplist-ios) – Defines iOS app privileges such as push notifications and Apple Pay.
+- [**`AppDelegate.swift`**](#appdelegateswift-ios) – Manages iOS app launch behavior and runtime configuration. It registers Flutter plugins, initializes services like Firebase, and handles app lifecycle events and deep linking.
+- [**`main.dart`**](#maindart-flutter) – The entry point of your Flutter app, where you can modify app-level logic.
+
+
+:::warning
+
+While editing configuration files can unlock advanced functionality, it comes with risks. A small mistake (e.g., a missing XML tag or a wrong key) can cause your app to fail compilation or crash at runtime. Incorrect changes might lead to App Store/Play Store rejections. So, it’s important to note your changes and thoroughly test your app after each edit.
+
+In short, edit native code only when necessary, and do so carefully.
+
+:::
+
+## Editing Files
+
+FlutterFlow provides two main ways to modify native files: [**Add Individual Snippets**](#option-1-add-individual-snippets) and [**Manual Edit Mode**](#option-2-manual-edit-mode).
+
+### Option 1: Add Individual Snippets
+
+**Snippets** are small pieces of code that you can inject into the native files at predefined locations. Instead of opening the whole file to edit, you provide just the fragment you want to add, and FlutterFlow merges it into the file in the correct place. This is safer and easier for small additions such as a permission line or a meta-data tag.
+
+#### Snippet Placement for Android
+
+Let’s see how to add a snippet for the `AndroidManifest.xml` file, where you can add the following tags:
+
+- **Activity Tags:** Inserts XML code inside the `MainActivity` block. This is typically used to add child XML elements within the MainActivity, such as `` or `` to control aspects such as deep linking, theme application, or launch mode.
+- **Application Tags**: Used to inject properties or attributes directly on the `` tag itself. For example, you can use this to set values such as `android:icon`, `android:label`, `android:allowBackup`.
+- **App Component Tags**: Inserts complete XML components inside the `...` block. Use this to add additional activities, services, broadcast receivers, or content providers that your app depends on.
+
+To add a snippet to your `AndroidManifest.xml`, navigate to **Custom Code** from the left navigation menu, select **Configuration Files**, then choose `AndroidManifest.xml`. Click the **plus (+)** button next to the tag where you want to insert the snippet. Provide a name (this will be included as a comment in the file) and paste your snippet code.
+
+
+
+
+
+
+#### Snippet Placement for iOS
+
+For iOS, let’s see how to add a snippet for the `Info.plist` and `Entitlements.plist` files. There’s no nested application/activity structure like on Android. Instead, both files are dictionaries of key-value pairs. When you add a snippet, it’s placed directly under the root `` element of these plist files.
+
+To add a snippet to native iOS files, navigate to **Custom Code** (from the left-side menu) > **Configuration Files**, and select the desired file. Click the **plus** (+) button, provide a descriptive name (which will appear as a comment in the file), and paste your snippet code.
+
+
+
+
+
+
+:::tip
+- Snippet insertion isn't available for `main.dart`. Instead, you can directly modify the file using [**Manual Edit Mode**](#option-2-manual-edit-mode).
+- You can also use your Development [**Environment Values**](../../testing-deployment-publishing/development-environments/development-environments.md#environment-values) and [**Library Values**](../../resources/projects/libraries.md#library-values) inside snippets. For more details, refer to the [**Include Variables in Native Code**](#include-variables-in-native-code) section.
+:::
+
+### Option 2: Manual Edit Mode
+
+For more complex changes, you can enable **Manual Edit Mode**, which unlocks the entire file for free-form editing. This is like opening the raw file in a text editor directly within FlutterFlow. **Note that** the manual mode is powerful but should be used carefully.
+
+To manually edit native files, navigate to **Custom Code** (from the left-side menu) > **Configuration Files**, select the file you want to edit, and click the **lock** button to unlock it. You can now freely modify the file.
+
+:::warning
+Once unlocked, the file stays in manual editing mode until you lock it again. Re-locking it will reset the file to a version generated by FlutterFlow, which will overwrite any manual changes you've made.
+:::
+
+
+
+
+
+
+:::tip
+
+- Don’t remove FlutterFlow’s existing entries unless you are sure. It’s safer to only add or modify necessary lines and leave the rest as is.
+- Use Manual Edit Mode for bulk or complex edits that the snippet can’t easily do, such as reordering tags, removing something, or pasting in a large chunk of config. Always verify that the app still builds and runs after such edits.
+- You can also use your Development [**Environment Values**](../../testing-deployment-publishing/development-environments/development-environments.md#environment-values) and [**Library Values**](../../resources/projects/libraries.md#library-values) inside snippets. For more details, refer to the [**Include Variables in Native Code**](#include-variables-in-native-code) section.
+:::
+
+## Include Variables in Native Code
+
+When editing native files in FlutterFlow, you may need to include dynamic values, such as API keys, app configurations, or environment-specific settings. Instead of hardcoding these values directly in **`AndroidManifest.xml`**, **`Info.plist`**, or other native files, you can use FlutterFlow [**Environment Values**](../../testing-deployment-publishing/development-environments/development-environments.md#environment-values) and [**Library Values**](../../resources/projects/libraries.md#library-values) to keep your app flexible and secure.
+
+To include a variable in a configuration file, start by creating a **file-level variable** and assigning it a value from either your **Environment Values** or **Library Values**. Then, reference this variable using a placeholder format (e.g., `{{apiToken}}`) within the configuration file. These placeholders in native files are automatically replaced with their actual values during the code generation process.
+
+Here’s exactly how you do it:
+
+
+
+
+
+
+
+You can also directly insert a variable placeholder (e.g., `{{variableName}}`) into the code using a snippet or manual edit mode and FlutterFlow automatically creates the corresponding file-level variable.
+
+
+
+
+
+
+
+
+:::tip
+You can use the file level variable across different snippets within the same file.
+:::
+
+Here are some examples that utilize variables in native code:
+
+**Example 1: Using API Keys in `AndroidManifest.xml`**
+
+Let’s say you are integrating the Mapbox package in your FlutterFlow app, and it requires an API Key in the form of a token inside the `AndroidManifest.xml` file. Instead of hardcoding the token, you can use a variable like this:
+
+```xml
+
+```
+
+Here, `{{MAPBOX_ACCESS_TOKEN}}` is a file level variable that holds the Environment Value.
+
+
+**Example 2: Configuring `Info.plist` for iOS**
+
+For iOS apps, you might need to configure App Transport Security (ATS) to allow non-HTTPS connections. Instead of manually setting `NSAllowsArbitraryLoads` to `true`, you can use a variable:
+
+```xml
+NSAllowsArbitraryLoads
+<{{ALLOW_HTTP_TRAFFIC}}/>
+```
+
+If `ALLOW_HTTP_TRAFFIC` is set to `true` in FlutterFlow’s Environment Value, the app will allow HTTP connections.
+
+
+**Example 3: Using Library Values**
+
+If you are building a [FlutterFlow Library](../../resources/projects/libraries.md) and need to include public API keys in native code, you can use [Library Values](../../resources/projects/libraries.md#library-values) as placeholders. This ensures that when someone installs your library, they can define their own values.
+
+For example, if your library integrates with a public weather API that requires an API key (such as Open-Meteo or WeatherAPI for general use), it’s best not to add the key directly in the manifest file. Instead, create a file-level variable and assign it a Library Value.
+
+```jsx
+
+
+
+```
+
+The library user will define their own API key under Library Values when importing your library. At build time, FlutterFlow replaces `{{WEATHER_API_KEY}}` with the user-defined key.
+
+## Editable Files
+
+FlutterFlow allows editing several key native files. Below, we cover each file’s role, why you might need to edit it, and examples of real-world use cases.
+
+### `AndroidManifest.xml` (Android)
+
+`AndroidManifest.xml` is the master configuration file for your Android app. It is located in the root directory of the app's `android/app/src/main` folder and declares essential app information to the Android OS and Google Play. This includes your app’s package name, components (activities, services, receivers), and the permissions it needs.
+
+It defines hardware and software features the app depends on, such as Bluetooth, GPS, or sensors. The manifest manages intents and filters, determining how the app responds to system events and deep linking. It also includes metadata and configuration for SDKs and libraries, such as API keys or feature flags.
+
+In short, the manifest is like an app’s identity card and permission sheet for Android.
+
+Here are some scenarios where you may need to modify the `AndroidManifest.xml` file:
+
+**Example 1: Declaring App Components (Activities, Services, Receivers)**
+
+For including additional screens (activities), background processes (services), or listeners (broadcast receivers), you must declare them in `AndroidManifest.xml`.
+
+```xml
+
+
+
+
+
+
+
+
+
+
+```
+
+This registers `NewScreenActivity` so the system knows it exists.
+
+**Example 2: Requesting Permissions**
+
+If your app requires access to restricted resources such as wake locks (to keep the device awake) or audio recording, you must declare the necessary permissions in `AndroidManifest.xml` by [manually editing](#option-2-manual-edit-mode) the file. **Tip:** You can also add custom permissions directly through the [**Permission Settings**](../../resources/projects/settings/project-setup.md#adding-custom-permission) in FlutterFlow.
+
+```xml
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+Without these, the app cannot keep the device awake or record audio.
+
+**Example 3: Adding Metadata for SDKs and Libraries**
+
+Many third-party packages (Google Maps, Firebase, AdMob, etc.) require `` tag in `AndroidManifest.xml` to pass configuration values. For example, the [**Mapbox Flutter**](https://pub.dev/packages/mapbox_flutter) plugin requires adding your Mapbox access token as a metadata entry for initialization. A real example: to initialize Mapbox, you’d add:
+
+```xml
+
+
+
+
+
+
+
+
+
+```
+
+**Example 4: Restricting the App to Specific Devices**
+
+You can specify device hardware requirements (e.g., GPS, camera, touchscreen) to ensure the app only installs on compatible devices.
+
+```xml
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+This prevents installation on devices without a camera.
+
+**Example 5: Enabling Cleartext Traffic**
+
+If your app needs to communicate over HTTP (unencrypted) for testing or legacy reasons, you might need to add `android:usesCleartextTraffic="true"` in the `` tag. This is to relax network security for HTTP URLs.
+
+```xml
+
+
+
+
+
+
+
+
+
+```
+
+:::tip
+You can modify the `AndroidManifest.xml` file by either [**adding a snippet**](#snippet-placement-for-android) or [**editing it manually**](#option-2-manual-edit-mode).
+:::
+
+### `build.gradle` (Android)
+
+The `build.gradle` file is the main Gradle build script for your Android app module. It resides in the `android/app/` directory and controls how your Android app is compiled, packaged, and built. This file defines critical configuration such as:
+
+- SDK versions (`compileSdkVersion`, `minSdkVersion`, `targetSdkVersion`)
+- Dependencies for third-party libraries
+- Build types (like debug vs. release)
+- Signing configurations for release builds
+- Kotlin and Flutter settings
+- MultiDex and ProGuard rules
+- Android packaging options
+
+In short, the `build.gradle` file acts as the blueprint for how your Android app is built and prepared for distribution.
+
+**Example 1: Changing SDK Versions**
+
+To set which Android SDK your app compiles with, update the following section in `build.gradle`:
+
+```jsx
+android {
+ compileSdkVersion 33
+
+ defaultConfig {
+ applicationId "com.example.myapp"
+ minSdkVersion 21
+ targetSdkVersion 33
+ versionCode 1
+ versionName "1.0"
+ }
+}
+```
+
+Use this when you want to upgrade to a newer Android API level or need compatibility with certain libraries.
+
+
+**Example 2: Adding Third-Party Libraries**
+
+To use Android-specific libraries (such as Play Services or Jetpack), add them in the `dependencies` section:
+
+```jsx
+dependencies {
+ implementation 'com.google.android.gms:play-services-maps:18.1.0'
+ implementation 'androidx.work:work-runtime:2.7.1'
+}
+```
+
+Use this when integrating services like Google Maps, Firebase Messaging, or WorkManager.
+
+
+**Example 3: Adding ProGuard Rules for Release Build**
+
+If your app uses ProGuard (code shrinking/obfuscation), you can define custom rules or reference a rules file:
+
+```jsx
+android {
+ buildTypes {
+ release {
+ minifyEnabled true
+ proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+ }
+ }
+}
+```
+
+Use this to reduce APK size and protect code in production.
+
+**Example 4: Enabling MultiDex for Large Apps**
+
+If your app exceeds the 64K method limit (common when using many dependencies), enable MultiDex support:
+
+```jsx
+defaultConfig {
+ ...
+ multiDexEnabled true
+}
+```
+
+Use this when your build fails with `Too many methods` errors or when integrating large libraries like Firebase.
+
+:::tip
+You can modify the `build.gradle` file by either [**adding a snippet**](#snippet-placement-for-ios) or [**editing it manually**](#option-2-manual-edit-mode).
+:::
+
+### ProGuard File (Android)
+
+The **ProGuard file (`proguard-rules.pro`)** is a configuration file used in Android projects to optimize, shrink, and obfuscate the app’s code. It helps reduce APK or AAB size, improves performance, and protects the app’s code from reverse engineering by making it difficult to decompile.
+
+The ProGuard files allow you to specify rules to keep certain classes or methods (prevent them from being removed or renamed), or to tweak the obfuscation behavior. Located in the **`android/app/proguard-rules.pro`** directory of an Android project, the ProGuard rules are applied when code shrinking is enabled in a release build.
+
+Here are some scenarios where you may need to modify the ProGuard file:
+
+**Example 1: Preventing Issues with Third-Party Libraries**
+
+ProGuard can obfuscate critical libraries, breaking their functionality. To prevent this, you need to keep specific classes used by the library.
+
+```jsx
+# Firebase
+-keep class com.google.firebase.** { *; }
+
+# Gson (JSON Serialization)
+-keep class com.google.gson.** { *; }
+-keepattributes *Annotation*
+```
+
+This ensures that Firebase and Gson classes are not obfuscated, preventing serialization errors.
+
+**Example 2: Debugging ProGuard Issues**
+
+If your app crashes in release mode but works in debug mode, ProGuard might be removing important classes. To troubleshoot, you can add logging and keep rules.
+
+```jsx
+-assumenosideeffects class android.util.Log {
+ public static *** d(...);
+ public static *** v(...);
+ public static *** i(...);
+}
+```
+
+This removes debug logs in release builds but retains them for troubleshooting.
+
+**Example 3: Improving Security by Removing Debug Information**
+
+Attackers can decompile APKs and view sensitive debug logs. To remove these debug logs, add:
+
+```jsx
+-dontwarn android.util.Log
+```
+
+
+**Example 4: Keeping Native Libraries (JNI) Safe**
+
+If your app uses native C/C++ libraries (JNI), ProGuard may mistakenly remove required components. To prevent this:
+
+```jsx
+-keep class com.example.native.** { *; }
+-keepclassmembers class * {
+ native ;
+}
+```
+
+This keeps all native methods intact.
+
+**Example 5: Preventing Issues with Reflection-Based Code**
+
+Some libraries rely on reflection to dynamically call methods, which ProGuard may remove.
+
+```jsx
+-keep class * implements android.os.Parcelable { *; }
+-keepclassmembers class ** {
+ @android.webkit.JavascriptInterface ;
+}
+```
+
+This ensures reflection-based code continues working.
+
+### `Info.plist` (iOS)
+
+`Info.plist` (Information Property List) is the configuration file for iOS apps. It’s a structured XML file that provides iOS with essential information about your app’s configuration and requirements.
+
+The `Info.plist`defines things such as your app’s bundle identifier, display name, version, and most importantly, usage descriptions for permissions and other settings iOS needs at runtime. The file is required for every iOS app and is located in the project’s `/ios/Runner/` directory of your FlutterFlow apps.
+
+Essentially, it’s the blueprint for iOS to understand your app’s capabilities and needs.
+
+Here are some scenarios where you may need to modify the `Info.plist` file:
+
+**Example 1: Requesting Permissions**
+
+If your app requires location access both while in use and in the background, you must declare the appropriate permissions in `Info.plist`. **Tip:** You can also add custom permissions directly through the [**Permission Settings**](../../resources/projects/settings/project-setup.md#adding-custom-permission) in FlutterFlow.
+
+```xml
+NSLocationWhenInUseUsageDescription
+This app requires location access while in use to provide location-based services.
+
+NSLocationAlwaysAndWhenInUseUsageDescription
+This app requires background location access to enable continuous location tracking.
+
+```
+
+This ensures the app can access location services even when the user is not actively using it.
+
+**Example 2: Enabling App Transport Security (ATS) for HTTP Requests**
+
+By default, iOS enforces HTTPS connections for security reasons. If your app needs to communicate with **HTTP-only** servers, you must modify `Info.plist`.
+
+```xml
+NSAppTransportSecurity
+
+ NSAllowsArbitraryLoads
+
+
+```
+
+This allows all HTTP requests but should be used with caution
+
+**Example 3: Configuring Background Modes**
+
+If your app requires background functionality (e.g., playing music, location tracking), you must enable background modes in `Info.plist`.
+
+```xml
+UIBackgroundModes
+
+ audio
+ location
+
+```
+
+This allows the app to play audio or track location when running in the background.
+
+**Example 4: Adding Keys**
+
+Many third-party packages require to add keys in the in `Info.plist` file. For example, If you’re using the Mapbox SDK, you need to provide an access token in `Info.plist` to enable map functionality.
+
+```xml
+io.flutter.embedded_views_preview
+
+MGLMapboxAccessToken
+YOUR_MAPBOX_ACCESS_TOKEN
+```
+
+The **`MGLMapboxAccessToken`** key is required for initializing Mapbox maps in your app. Additionally, the **`io.flutter.embedded_views_preview`** key must be set to `true` to support embedding native views inside Flutter widgets.
+
+:::tip
+You can modify the `Info.plist` file by either [**adding a snippet**](#snippet-placement-for-ios) or [**editing it manually**](#option-2-manual-edit-mode).
+:::
+
+### `Entitlements.plist` (iOS)
+
+The `Entitlements.plist` file is a property list in iOS applications that defines the app’s security-related capabilities and permissions. It grants specific privileges to an app, allowing it to access Apple services such as iCloud, Push Notifications, App Groups, Background Modes, and Keychain access. It is located in the **`/ios/Runner/`** directory of your FlutterFlow app and is named **`Runner.entitlements`**.
+
+This file ensures that only authorized apps can use these features, maintaining security and preventing unauthorized access to sensitive system functions.
+
+Here are some scenarios where you may need to modify the `Entitlements.plist` file:
+
+**Example 1: Enabling iCloud Storage**
+
+If your app integrates **iCloud services**, such as syncing user data or storing documents, you must add iCloud entitlements.
+
+```xml
+com.apple.developer.icloud-container-identifiers
+
+ iCloud.com.yourcompany.appname
+
+
+com.apple.developer.icloud-services
+
+ CloudDocuments
+
+```
+
+This grants your app access to iCloud storage under the specified container.
+
+**Example 2: Enabling Keychain Access**
+
+If your app needs to store secure credentials, enabling Keychain Sharing is required.
+
+```xml
+keychain-access-groups
+
+ com.yourcompany.appname
+
+```
+
+This allows secure storage of login credentials, API tokens, or encryption keys in the iOS Keychain.
+
+**Example 3: Enabling App Groups for Shared Data**
+
+If your app shares data between multiple apps or an app extension (e.g., a widget or a Siri shortcut), you must enable App Groups.
+
+```xml
+com.apple.security.application-groups
+
+ group.com.yourcompany.shared
+
+```
+
+This allows different apps or extensions to access shared storage and user defaults.
+
+**Example 4: Enabling Wallet (Apple Pay & Passes)**
+
+If your app integrates with Apple Wallet, you need to add Wallet entitlements.
+
+```xml
+com.apple.developer.pass-type-identifiers
+
+ pass.com.yourcompany.appname
+
+```
+
+This enables your app to create, manage, and present passes in Apple Wallet.
+
+:::tip
+You can modify the `Entitlements.plist` file by either [**adding a snippet**](#snippet-placement-for-ios) or [**editing it manually**](#option-2-manual-edit-mode).
+:::
+
+### `AppDelegate.swift` (iOS)
+
+The `AppDelegate.swift` file is the entry point for your iOS application. It plays a crucial role in setting up your app’s runtime environment and handling app lifecycle events such as launching, backgrounding, and termination. This file is also where you register Flutter plugins and initialize SDKs like Firebase or Branch.
+
+It’s located at: `ios/Runner/AppDelegate.swift`
+
+**Example: Registering Custom iOS Plugins**
+
+For custom native iOS plugins that aren’t auto-registered, you can manually register them inside `AppDelegate.swift`.
+
+```jsx
+override func application(
+ _ application: UIApplication,
+ didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
+) -> Bool {
+ let controller: FlutterViewController = window?.rootViewController as! FlutterViewController
+ let myPlugin = CustomPlugin()
+ myPlugin.register(with: controller)
+ return super.application(application, didFinishLaunchingWithOptions: launchOptions)
+}
+```
+
+Use this for custom iOS integrations that require manual setup.
+
+:::tip
+You can modify the `AppDelegate.swift` file by either [**adding a snippet**](#snippet-placement-for-ios) or [**editing it manually**](#option-2-manual-edit-mode).
+:::
+
+### `main.dart` (Flutter)
+
+The `main.dart` file is the entry point of every FlutterFlow app. It is the first file that runs when the app starts and is responsible for initializing the application, configuring dependencies, and defining the root widget. Located in the **`lib/`** directory, `main.dart` contains the `main()` function, which is required for every FlutterFlow app.
+
+If you need to execute any custom Dart code at startup — such as initializing third-party SDKs, setting global configurations, service locators, printing a debug log, or running certain functions once — `main.dart` is the place to do it.
+
+:::info
+[**Adding Snippets**](#option-1-add-individual-snippets) isn't available for `main.dart`. Instead, you can directly modify the file using [**Manual Edit Mode**](#option-2-manual-edit-mode).
+:::
+
+Here are some scenarios where you may need to modify the `main.dart` file:
+
+**Example 1: Initializing Third-Party Packages**
+
+Many packages have initialization calls. For example, if you added a custom package for analytics or error tracking (say Sentry or a logging service), you might need to call `SentryFlutter.init()` or set up an error handler at app startup. By placing that call in `main.dart` (before or right after `runApp`), you ensure it’s executed early.
+
+```jsx
+import 'dart:async';
+
+import 'package:flutter/widgets.dart';
+import 'package:sentry_flutter/sentry_flutter.dart';
+
+Future main() async {
+ runZonedGuarded(() async {
+ await SentryFlutter.init(
+ (options) {
+ options.dsn = 'https://example@sentry.io/add-your-dsn-here';
+ },
+ );
+
+ runApp(MyApp());
+ }, (exception, stackTrace) async {
+ await Sentry.captureException(exception, stackTrace: stackTrace);
+ });
+}
+```
+
+This ensures Sentry is ready before the app starts, just like Firebase initialization.
+
+**Example 2: Customizing the Status Bar Appearance**
+
+If you want to change the status bar color and adjust icon brightness for Android and iOS, you need to modify `main.dart` before calling `runApp()`.
+
+```jsx
+
+import 'package:flutter/services.dart';
+
+void main() {
+ SystemChrome.setSystemUIOverlayStyle(
+ SystemUiOverlayStyle(
+ statusBarColor: Colors.redAccent, // Custom status bar color
+ statusBarIconBrightness: Brightness.dark, // Dark icons for Android
+ statusBarBrightness: Brightness.light, // Light icons for iOS
+ ),
+ );
+
+ runApp(MyApp());
+}
+
+```
+
+**Example 3: Locking the Screen Orientation**
+
+Some apps require landscape-only or portrait-only modes. You can enforce screen orientation in `main.dart` before launching the app.
+
+```jsx
+import 'package:flutter/services.dart';
+
+Future main() async {
+ WidgetsFlutterBinding.ensureInitialized();
+
+ await SystemChrome.setPreferredOrientations([
+ DeviceOrientation.landscapeLeft,
+ DeviceOrientation.landscapeRight,
+ ]);
+
+ runApp(MyApp());
+}
+```
+
+This ensures the app only runs in landscape mode.
+
+**Example 4: Observing App Lifecycle Changes**
+
+If your app needs to respond to lifecycle events, such as tracking when the app goes into the background or returns to the foreground, you can attach an observer.
+
+```jsx
+import 'package:flutter/widgets.dart';
+
+void main() {
+ WidgetsFlutterBinding.ensureInitialized();
+ WidgetsBinding.instance.addObserver(AppLifecycleObserver());
+ runApp(MyApp());
+}
+
+class AppLifecycleObserver with WidgetsBindingObserver {
+ @override
+ void didChangeAppLifecycleState(AppLifecycleState state) {
+ if (state == AppLifecycleState.resumed) {
+ print('App is in foreground');
+ } else if (state == AppLifecycleState.paused) {
+ print('App is in background');
+ }
+ }
+}
+```
+
+
+## Best Practices
+
+- **Backup:** Before making native file changes, ensure you have a backup of at least the text of the original file. You could also commit your changes so you can revert if needed. This way, if things go wrong, you can manually restore.
+- **One Change at a Time:** Add or modify one item at a time and then test your app. If you add multiple things and something breaks, it’s harder to pinpoint which change did it.
+- **Consult Package Documentation:** When you’re making changes for third-party packages, follow their instructions exactly. Usually, package docs show a snippet – use that in FlutterFlow’s [snippet](#option-1-add-individual-snippets). Double-check official docs for Android or iOS if you’re unsure about the correct keys or tags. For example, if enabling background fetch, Apple’s docs will list the exact string to use in `Info.plist` (`fetch` in `UIBackgroundModes` array).
+- **Keep it Minimal:** Only add what you truly need. Don’t add a bunch of entitlements or permissions “just in case” as that can bloat and complicate your app, and even trigger store reviews for uses that your app doesn’t actually have.
+- **Use Comments:** As you modify files, annotate them. If six months later you or a team member look at the manifest, a comment like `` is very helpful.
+- **Testing on Devices:** Especially for anything related to `Info.plist` or entitlements, always test on a real iOS device if possible. Some issues (like missing entitlements or background mode usage) won’t show up in the simulator. Similarly, test Android changes on a device or emulator with a release build – because ProGuard rules effects, for example, only show in release mode.
+- **Monitoring Logs and Errors:** After making changes, monitor the Xcode console or Android logcat when running the app. If there are misconfigurations, you often get warnings.
+- **Stay Updated:** FlutterFlow may improve native editing features over time. Keep an eye on FlutterFlow’s docs or community announcements. If they introduce a new easier way, prefer that to manual editing when possible, as it will be more foolproof.
+- **Security Consideration:** Remember that anything in these files (especially `Info.plist`, `AndroidManifest.xml`) is essentially public in the distributed app. Don’t assume an API key in `Info.plist` is hidden – it’s not. For keys you must include (maps, etc.), consider using [private environment values](../../testing-deployment-publishing/development-environments/development-environments.md#private-environment-values) and monitoring their usage.
+
+## FAQs
+
+
+
+My app won’t install on an iOS device. What should I check?
+
+
+Confirm that the entitlements in `Entitlements.plist` match your provisioning profile. If you see a “Missing entitlement” error, it means you added an entitlement not allowed by your profile. Remove it or update the profile in the Apple Developer Portal.
+
+
+
+
+
+How do I fix “Manifest merger failed” on Android?
+
+
+This error indicates a conflict in your `AndroidManifest.xml`. Common issues include **duplicate permissions** or attributes (e.g., two `` entries). The error message usually identifies the conflicting line. Remove the duplicate or ensure each property is set only once to resolve the conflict.
+
+
+
+
+
+Why my app isn't running in Test Mode after editing the `main.dart` file with Supabase enabled?
+
+
+There's a known limitation where editing the `main.dart` file with Supabase enabled prevents Test Mode from running. As a workaround, please use [**Local Run**](../../testing-deployment-publishing/running-your-app/local-run.md) to test your app instead.
+
+
+
+
+
+Can I modify the Configuration Files in a Library project?
+
+
+Yes, you can. When a Library Project is imported, any configuration file snippets, such as those for `AndroidManifest.xml`, `Info.plist`, or `Entitlements.plist` are automatically merged into the importing project's configuration files.
+
+Additionally, your Library Project can pass values (like API keys) into those snippets using [**Library Values**](../../resources/projects/libraries.md#library-values), making it easy to customize.
+
+
+
+This makes Libraries incredibly powerful and enables easy integration of tools like **PostHog** (analytics), **Sentry** (crash reporting), **CleverTap**, **flutter_local_notifications**, **flutter_nfc_kit**, and many more directly from the Marketplace.
+
+
\ No newline at end of file
diff --git a/docs/ff-concepts/adding-customization/custom-code.md b/docs/ff-concepts/adding-customization/custom-code.md
index 8d76ab3a..c0c8414d 100644
--- a/docs/ff-concepts/adding-customization/custom-code.md
+++ b/docs/ff-concepts/adding-customization/custom-code.md
@@ -14,12 +14,14 @@ While FlutterFlow provides a wide range of pre-built components and functionalit
times when you need to extend your app with custom logic or UI components that are not available out of the box.
This is where writing custom code comes into play.
-There are a few different ways to make custom code accessible in FlutterFLow:
+There are a few different ways to make custom code accessible in FlutterFlow:
* **[Custom Functions](custom-functions.md):** Custom Dart functions that can be used to set Widget or Action properties.
* **[Custom Actions](custom-actions.md):** Custom Dart functions that can be triggered by [Action Triggers](https://docs.flutterflow.io/resources/functions/action-triggers/) or used as nodes in an [Action Flow](https://docs.flutterflow.io/resources/functions/action-flow-editor#action-flow-editor). These are usually `async` functions and are able to import [custom package dependencies](#adding-a-pubspec-dependency).
+* **[Code File](code-file.md):** You can define custom classes, enums, and logic to manage your app’s data and behavior.
* **[Custom Widgets](custom-widgets.md):** Custom Flutter widgets that can also import [custom package dependencies](#adding-a-pubspec-dependency) and be used in the same way as [Components](https://docs.flutterflow.io/resources/ui/components) throughout your project.
-* **[Custom Files](custom-files.md):** Within Custom Files, you'll have the ability to edit some parts of the `main.dart` file.
+* **[Configuration Files](configuration-files.md):** You'll have the ability to edit native files for Android and iOS.
+
:::tip[Why Write Custom Code?]
@@ -44,6 +46,12 @@ You can use the In-App Code Editor to view and edit custom code directly in the
+:::tip
+To leverage the capabilities that go beyond our in-app code editor, you can click on the **VS Code icon** to open and edit your custom code directly in VS Code using the FlutterFlow [**VSCode extension**](vscode-extension.md).
+
+
+:::
+
:::warning[Using the In-App Code Editor on Desktop]
Note that the desktop version of the In-App Code Editor is limited. We recommend using the Web editor
or the **[VSCode Extension](vscode-extension.md)**.
@@ -60,7 +68,9 @@ necessary code.
This can significantly speed up the building process and reduce the need for in-depth programming
knowledge, making it especially useful for custom functions and actions.
-**Limitation:** The prompts are limited to 100 characters currently.
+:::info[Limitation]
+Your prompt must be at least 3 words and no more than 500 characters.
+:::
Project Dependencies**, then open the **Custom Dependencies** tab. Click **Add Pub Dependency**, enter the **package name** and **version**, and click **Add** to include it in your project.
-5. Click "Save & **[Compile Code](#compile-code)**" to apply the changes.
+
+
+
+
### Choosing the correct package from pub.dev
@@ -297,6 +331,100 @@ one.
When adding a pubspec dependency to your custom code in FlutterFlow, you’ll need two pieces of [information](#setup-code): the Package name with its Version number and the Import statement.
+### Using Unpublished or Private Packages
+FlutterFlow supports the use of unpublished packages, which allows you to integrate packages that are not yet available on **pub.dev**. This capability is particularly useful when working with custom, forked, or private packages hosted on public or private repositories. By leveraging this, you can enhance your app’s functionality with customized or proprietary libraries tailored to your specific needs.
+
+:::info[Possible Use Cases]
+
+- **Using a Different Branch of a Package**: When you need to test or use features that are only available on a specific branch of a package.
+- **Forked Version for Customizing Features**: When you need to fork a package to customize its functionality or fix issues that the original maintainer hasn’t addressed.
+- **Private Packages for Internal Use**: Companies or enterprises may have internal Flutter libraries that they want to use in their FlutterFlow app but cannot publish publicly due to confidentiality or proprietary restrictions.
+
+:::
+
+#### Add Packages from Public Repositories
+
+For packages hosted on public repositories (e.g., GitHub), you can add them to your FlutterFlow project by specifying the repository URL in the following format.
+
+```js
+ package_name:
+ git:
+ url: https://github.com/username/repository_name.git
+```
+
+You can also fine-tune the dependency by using additional parameters like `ref` and `path` in the given format. Here are some examples:
+
+- **To use a specific branch** (e.g., `development`):
+
+```js
+ package_name:
+ git:
+ url: https://github.com/username/repository_name.git
+ ref: development
+```
+
+- **To use from a specific commit**:
+
+```js
+dependencies:
+ package_name:
+ git:
+ url: https://github.com/username/repository_name.git
+ ref: a1b2c3d4
+
+```
+
+- **To use package located in a subdirectory of the repository**:
+
+```js
+ package_name:
+ git:
+ url: https://github.com/username/repository_name.git
+ path: packages/subpackage_name
+```
+
+Here’s exactly how you do it:
+
+
+
+
+
+
+#### Add Packages from Private Repositories
+
+For packages hosted in private repositories, you’ll need to authenticate access. This can be done using HTTPS with a personal access token.
+
+For GitHub, you can go to your GitHub account’s settings and [generate a token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-personal-access-token-classic) with the necessary permissions and use it in the following format. You can also create and use a [fine-grained access token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-fine-grained-personal-access-token) that only has certain permissions.
+
+```js
+package_name:
+ git:
+ url: https://:@github.com/username/private_repo.git
+```
+
+Replace `` with your GitHub username and `` with the generated token.
+
### Setup Code
To configure your custom code with the package, copy and paste the following items from the package's pub.dev page:
@@ -304,7 +432,7 @@ To configure your custom code with the package, copy and paste the following ite
To use the dependency in your Custom Action or Custom Widget resource file, go to the package's pub.dev page and click the **Copy to Clipboard** icon next to the package name and version. Then, paste it into the **Pubspec Dependency** section (bottom right) of the FlutterFlow code editor.
-
+
See **[example](#add-pubspec-dependency-to-custom-code-example-guide)** for more information.
@@ -349,7 +477,7 @@ FlutterFlow:
width: '100%'
}}>
-
\ No newline at end of file
+
diff --git a/docs/ff-concepts/adding-customization/custom-files.md b/docs/ff-concepts/adding-customization/custom-files.md
deleted file mode 100644
index 55e96577..00000000
--- a/docs/ff-concepts/adding-customization/custom-files.md
+++ /dev/null
@@ -1,159 +0,0 @@
----
-slug: /concepts/custom-code/custom-files
-title: Custom Files
-description: Learn how to manage and use custom files in your FlutterFlow app to extend its capabilities.
-tags: [Custom Files, Custom Code]
-sidebar_position: 5
-keywords: [FlutterFlow, Custom Files, Customizations, Flutter, Dart, Pub.dev]
----
-
-# Custom Files
-
-We allow you to add a custom code directly into the `main.dart` file of your app. This means that you can easily implement specific functionalities and customize your app as per your requirements without downloading the entire project and manually modifying the file.
-
-By default, the file you want to edit is in 'read-only' mode. However, using our editor, you can
-add a code snippet in the form of [Custom Actions](custom-actions.md).
-
-:::warning[Please note]
-You can only add custom actions that have no arguments (including *BuildContext*).
-:::
-
-## Edit `main.dart`
-
-The **main.dart** is a critical file in your project, as it serves as the entry point for the
-application. This file contains the `main()` function, which is responsible for starting the application by running the code that builds the UI and initializes any other necessary components.
-
-You can edit the **main.dart** file to include anything in `main()` function that we don't yet
-support. For example, initializing third-party plugins or libraries and setting up system-level configurations, such as changing the status bar color or orientation.
-
-Let's see an example of how you can add a code in **main.dart** file to change the status bar
-color for the mobile app. Here's how it looks:
-
-
- 
- Changing the status bar color for the mobile device
-
-
-To do so, you can edit *main.dart* file by following the steps below:
-
-1. Create a [Custom Action](custom-actions.md) for the code you want to include in a `main.
- dart` file. For this
- example, here's code in a custom action named 'setStatusbarColor'.
-
-```js
-// Automatic FlutterFlow imports
-import '/backend/backend.dart';
-import '/flutter_flow/flutter_flow_theme.dart';
-import '/flutter_flow/flutter_flow_util.dart';
-import '/custom_code/actions/index.dart'; // Imports other custom actions
-import '/flutter_flow/custom_functions.dart'; // Imports custom functions
-import 'package:flutter/material.dart';
-// Begin custom action code
-// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
-
-import 'package:flutter/services.dart';
-
-Future setStatusbarColor() async {
- // Add your function code here!
-
- // Set status bar color
- SystemChrome.setSystemUIOverlayStyle(
- SystemUiOverlayStyle(
- statusBarColor: Colors.redAccent, // <-- see here
- statusBarIconBrightness:
- Brightness.dark, //<-- For Android see here (dark icons)
- statusBarBrightness: Brightness.light, //<-- For iOS see here (dark icons)
- ),
- );
-}
-```
-
-1. Now click on **Custom Functions** from the
-[**Navigation Menu**](../../../docs/intro/ff-ui/builder.md#navigation-menu) and open the **Custom Files > main.dart**.
-2. Determine where to place the code (i.e., **Initial Action** or **Final Action**), click the **+** button, and select the custom action.
-3. Click **Save**.
-
-
-
-
-## More examples
-
-Let's see some more examples of adding code to the *main.dart* file to solidify understanding and use it in real-world scenarios.
-
-### Example 1: Lock device orientation
-
-You might want to lock the device orientation in portrait or landscape mode to prevent it from rotating the screen automatically when the user tilts or rotates the device. This is useful in scenarios where the layout of the app is designed to work only in one specific orientation or when you want to ensure that the app is always displayed in a consistent manner.
-
-To set the device orientation in landscape-only mode, [create a custom action](custom-actions.md) with the
-following code and [add it to a `main.dart`](#edit-maindart) file.
-
-```js
-// Automatic FlutterFlow imports
-import '/backend/backend.dart';
-import '/flutter_flow/flutter_flow_theme.dart';
-import '/flutter_flow/flutter_flow_util.dart';
-import '/custom_code/actions/index.dart'; // Imports other custom actions
-import '/flutter_flow/custom_functions.dart'; // Imports custom functions
-import 'package:flutter/material.dart';
-// Begin custom action code
-// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
-
-import 'package:flutter/services.dart';
-
-Future setLandscapeMode() async {
- // Add your function code here!
- await SystemChrome.setPreferredOrientations([
- DeviceOrientation.landscapeLeft,
- DeviceOrientation.landscapeRight,
- ]);
-}
-```
-
-
- 
- Edit main.dart file to lock the device orientation
-
-
-
-### Example 2: Getting app lifecycle callback
-
-If you want to ensure that your app appropriately manages its lifecycle and handles any necessary actions when it transitions between different states, such as 'resumed' and 'paused,' you can add the `AppLifecycleObserver` in the *main.dart* file.
-
-To do so, [create a custom action](custom-actions.md) with the following code and [add it to a `main.dart`](#edit-maindart) file.
-
-
-```js
-// Automatic FlutterFlow imports
-import '/backend/backend.dart';
-import '/flutter_flow/flutter_flow_theme.dart';
-import '/flutter_flow/flutter_flow_util.dart';
-import '/custom_code/actions/index.dart'; // Imports other custom actions
-import '/flutter_flow/custom_functions.dart'; // Imports custom functions
-import 'package:flutter/material.dart';
-// Begin custom action code
-// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
-
-Future onAppBackground() async {
-// Add your function code here!
- WidgetsBinding.instance.addObserver(AppLifecycleObserver());
-}
-
-class AppLifecycleObserver with WidgetsBindingObserver {
-@override
- void didChangeAppLifecycleState(AppLifecycleState state) {
- if (state == AppLifecycleState.resumed) {
-// Do something when app is resumed
- print('App is in foreground');
- } else if (state == AppLifecycleState.paused) {
-// Do something when app is paused
- print('App is in background');
- }
- }
-}
-
-```
-
- 
- Edit main.dart file to get lifecycle callback
-
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..07bd43db 100644
--- a/docs/ff-concepts/adding-customization/custom-widgets.md
+++ b/docs/ff-concepts/adding-customization/custom-widgets.md
@@ -80,7 +80,7 @@ FlutterFlow:
width: '100%'
}}>
-
-
-
-#### 2. Add APNs key to Firebase project
-
-To add APNs key to Firebase project:
-
-1. From the Firebase dashboard from your project, navigate to the far left menu. Select Project
- Settings( ) --> Project Settings.
-
-2. Select the **Cloud Messaging** tab.
-
-3. Scroll down and find your iOS app under the **Apple app configuration** section.
-
-4. Under the **APNs Authentication Key** section, click on **Upload**. A popup will appear to
- upload and enter the key details.
-
-5. Click on the **Browse** button to locate and upload the APNs auth key file.
-
-6. Enter the *Key ID*. You can find your Key ID in the Apple Developer Center under [Certificates,
- Identifiers & Profiles](https://developer.apple.com/account/resources) -> [Keys](https://developer.apple.com/account/resources/authkeys/list) -> Click on **Key**.
-
-7. Enter the *Team ID*. You can find your Team ID in the Apple Member Center under the [membership
- tab](https://developer.apple.com/account/#/membership).
-
-
-
-
-
-#### 3. Adding identifier
-
-You must add an Identifier to be able to send the push notifications to the iOS devices after you deploy your app to the app store.
-
-To add an Identifier:
-
-1. From your *Apple developer account* open the [**Identifiers**](https://developer.apple.com/account/resources/identifiers/list) section.
-
-2. Click on the **(+)** button on the right side of the **Identifiers** label.
-
-3. Select the **App IDs** and click **Continue**.
-
-4. Select the *Type* **App** and click **Continue.**
-
-5. Enter the **Description** as **ImageNotification.**
-
-6. Enter the **Bundle ID** as your package name and add **.ImageNotification** in the end.
-
-7. Click **Continue** and then click **Register**.
-
-
-
-
-
-#### 4. Enable push notifications in your App ID
-
-:::note
-Continue with this step only if you have an APP or Bundle ID created in your developer account.
-:::
-
-Add the 'Push Notifications' capability to your existing App ID in order to avoid any issues when you re-deploy your app. Here's how you do it:
-
-1. From your *Apple developer account,* open the [**Identifiers**](https://developer.apple.com/account/resources/identifiers/list) section.
-
-2. Open the identifier with your existing APP ID.
-
-3. Select **Push Notifications** from the list and click **Save**.
-
-
-
-
-
-### Sending push notifications
-
-Use these steps to create and send push notifications:
-
-1. Click on the **Settings and Integrations** -> App Settings -> **Push Notifications**.
-
-2. Find the **Manually Trigger Notifications** section and click on it to expand the section.
-
-3. In the **Notification Title**, enter the text that you want to set as a title for notification.
-
-4. In the **Notification Text**, enter the content of your notification.
-5. Optional: Click on the **Upload Notification Image** to set the image that you want to appear in the notification.
-6. Find the **Target Audience** dropdown. Keep the **All** option selected if you want to send notifications to both *Android* and *iOS* users. You can select **Android** or **iOS** if you wish to target OS-specific users.
-7. Enable **Deliver With Sound** if you wish to.
-8. If you have more than 10K users, you might want to enable the **Batch Notifications**.
-9. To send push notifications to a specific or few users, enter the user document reference (from the 'users' collection in Firestore) into the *User References*.
-10. Find the **Initial Page** dropdown and select a page that you would like to open when a user clicks on the notification.
-11. Click on **Send Notification**.
-12. To confirm you want to send this notification, a popup will appear. You need to enter the text '**Send Notification**' and click on **Send Notification** again.
-
-
-
-
-
-## Push notifications with data
-
-Sometimes you might want to include additional data with your push notifications, which can then be used to display more detailed information on the page when it's opened through a push notification.
-
-For instance, consider a news app that sends push notifications for breaking news. When the user taps the notification, the additional data could include the news article's title, summary, and image.
-
-:::warning[Note]
-Currently we only support sending *Firestore document references* as data.
-:::
-
-To send a push notification with data:
-
-1. You must have a page that accepts a parameter of type 'DocumentReference'.
-2. Build a notification using the instructions [here](#add-push-notifications).
-3. Set the **Initial Page** to the one that accepts the parameter.
-4. Find the **Parameter Data** section, copy the document reference from the Firestore, and paste it into the input box below.
-5. Click on **Send Notification**.
-
-
-
-
-
-## Trigger push notification
-
-You might want to send a push notification when something happens in your app. For example, sending a push notification on a message sent, a push notification on a new appointment booked, a push notification on a price change, etc.
-
-You can send the push notification on such event occurrence by adding the **Trigger Push Notification** action.
-
-For demonstration purposes, consider an example of sending a push notification to a post creator when someone comments on a post.
-
-
-
-
-
-Here are the steps:
-
-### 1. Retrieve the document reference of the user
-
-The document reference of the user is required to send a push notification to a specific user, in this case, it would be the document reference of the post creator.
-
-Normally, you would obtain the user document reference from the Firestore document, where a field like 'created_by' stores the document reference of the post creator. However, for the sake of simplicity, let's assume that we are storing this reference in an app state variable, which looks like this:
-
-
- 
- User document reference in app state variable
-
-
-If you need to send push notifications to multiple users, consider a scenario where you want to notify all users who liked a post when someone comments on it. You can retrieve the list or array of user document references from the Firestore document or any app state variable within your app. Here's what a list of document references in an app state variable might look like:
-
-
- 
- Multiple user document references in app state variable
-
-
-:::info
-Learn more about working with
-[**App State variables**](../../resources/data-representation/app-state.md).
-:::
-
-### 2. Trigger Push Notification [Action]
-
-Using this action, you can trigger the push notification when an event occurs in your app. For example, sending the push notification to the post creator when someone comments on a post.
-
-Follow the steps below to add this action to any widget.
-
-1. Select the **Widget** (e.g., IconButton, Button, etc.) on which you want to add the action.
-
-2. Select **Actions** from the Properties Panel (the right menu), and click **Open**. This will open an **Action Flow Editor** in a new popup window.
- 1. Click on the **+ Add Action**.
-
- 2. On the right side, search and select the **Trigger Push Notification** action.
- 3. To set who should receive the push notification, set the **Audience** to **Single
- Recipient** or **Multiple Recipient**.
- * If you want to send a notification to a single user, set it to 'Single Recipient'. For example, sending a notification only to the group creator when someone joins the group.
- * If you want to send a notification to multiple users, set it to 'Multiple Recipients'. For example, sending a notification to all group members when someone joins the group.
- 4. Set the **Source** of user document reference (e.g., app state variable or Firestore document).
- 5. Further options are available based on the selected source.
- 6. To set the specific notification title text, enter the **Notification Title**.
- 7. You can set the **Notification Text** from a variable.
- 8. Optional: Open the **Notification Image** section to set the image that you want to appear in the notification.
- 9. Turn on the **Deliver with Sound** if you want to send a notification with the user's default sound/vibration.
- 10. To set which page to open when a user taps the notification, set the **Initial Page** to the page you would like to open. You can also [pass on the parameters](#push-notifications-with-data) if page requests.
-
-
-
-
-
-
----
-
-## FAQs
-
-
-Push notifications not working; Getting cloud function error: PERMISSION_DENIED: Missing or insufficient permissions
-
-If you encounter an error with push notifications, specifically a cloud function failure due to permission issues, it might be related to your Google Cloud organization's settings. Organizations can disable automatic IAM grants for default service accounts, leading to this error.
-
-To fix this issue, manually grant the Editor role to the default service account used by your project. You can do this by visiting the GCP IAM page and assigning the Editor role to the following service account:
-
-- For App Engine (Gen 1): `{firebase-project-id}@appspot.gserviceaccount.com`
-- For Compute Engine (Gen 2): `{project-number}-compute@developer.gserviceaccount.com`
-
-
-
-Also, ensure that these principals (emails) and their roles are present in the permissions tabs in *App Engine Default service account*, *Default compute service account*, and *firebase-adminsdk*. You can do this by visiting the GCP Service Accounts page, clicking on each service account email, and granting access to these principals in the permissions tab.
-
-Below is a sample image for App Engine Default service account.
-
-
-
-
-
diff --git a/docs/ff-concepts/alerts/_category_.json b/docs/ff-concepts/alerts/_category_.json
new file mode 100644
index 00000000..bbed890b
--- /dev/null
+++ b/docs/ff-concepts/alerts/_category_.json
@@ -0,0 +1,4 @@
+{
+ "label": "Alerts",
+ "position": 8
+}
\ No newline at end of file
diff --git a/docs/ff-concepts/alerts-notification/alert-dialog.md b/docs/ff-concepts/alerts/alert-dialog.md
similarity index 99%
rename from docs/ff-concepts/alerts-notification/alert-dialog.md
rename to docs/ff-concepts/alerts/alert-dialog.md
index 022c69d9..deed8936 100644
--- a/docs/ff-concepts/alerts-notification/alert-dialog.md
+++ b/docs/ff-concepts/alerts/alert-dialog.md
@@ -1,6 +1,6 @@
---
title: Alert Dialog
-slug: /concepts/alerts-notification/alert-dialog
+slug: /concepts/alerts/alert-dialog
sidebar_position: 0
tags: [Actions, Alerts & Notifications]
keywords: [FlutterFlow, Actions, Alerts & Notifications, Alert Dialog]
diff --git a/docs/ff-concepts/alerts-notification/dismiss-custom-dialog.md b/docs/ff-concepts/alerts/dismiss-custom-dialog.md
similarity index 97%
rename from docs/ff-concepts/alerts-notification/dismiss-custom-dialog.md
rename to docs/ff-concepts/alerts/dismiss-custom-dialog.md
index a5b8ba41..c3b3d2b7 100644
--- a/docs/ff-concepts/alerts-notification/dismiss-custom-dialog.md
+++ b/docs/ff-concepts/alerts/dismiss-custom-dialog.md
@@ -1,6 +1,6 @@
---
title: Dismiss Custom Dialog
-slug: /concepts/alerts-notification/dismiss-custom-dialog
+slug: /concepts/alerts/dismiss-custom-dialog
sidebar_position: 1
tags: [Actions, Alerts & Notifications]
keywords: [FlutterFlow, Actions, Alerts & Notifications, Dismiss Custom Dialog]
diff --git a/docs/ff-concepts/alerts-notification/haptic-feedback.md b/docs/ff-concepts/alerts/haptic-feedback.md
similarity index 97%
rename from docs/ff-concepts/alerts-notification/haptic-feedback.md
rename to docs/ff-concepts/alerts/haptic-feedback.md
index aa73b601..095e0307 100644
--- a/docs/ff-concepts/alerts-notification/haptic-feedback.md
+++ b/docs/ff-concepts/alerts/haptic-feedback.md
@@ -1,6 +1,6 @@
---
title: Haptic Feedback
-slug: /concepts/alerts-notification/haptic-feedback
+slug: /concepts/alerts/haptic-feedback
sidebar_position: 4
tags: [Actions, Alerts & Notifications]
keywords: [FlutterFlow, Actions, Alerts & Notifications, Haptic Feedback]
diff --git a/docs/ff-concepts/alerts-notification/imgs/adding-dismiss-custom-dialog-action.png b/docs/ff-concepts/alerts/imgs/adding-dismiss-custom-dialog-action.png
similarity index 100%
rename from docs/ff-concepts/alerts-notification/imgs/adding-dismiss-custom-dialog-action.png
rename to docs/ff-concepts/alerts/imgs/adding-dismiss-custom-dialog-action.png
diff --git a/docs/ff-concepts/alerts-notification/imgs/align-custom-dialog.avif b/docs/ff-concepts/alerts/imgs/align-custom-dialog.avif
similarity index 100%
rename from docs/ff-concepts/alerts-notification/imgs/align-custom-dialog.avif
rename to docs/ff-concepts/alerts/imgs/align-custom-dialog.avif
diff --git a/docs/ff-concepts/alerts-notification/imgs/custom-dialog.avif b/docs/ff-concepts/alerts/imgs/custom-dialog.avif
similarity index 100%
rename from docs/ff-concepts/alerts-notification/imgs/custom-dialog.avif
rename to docs/ff-concepts/alerts/imgs/custom-dialog.avif
diff --git a/docs/ff-concepts/alerts-notification/imgs/img.png b/docs/ff-concepts/alerts/imgs/img.png
similarity index 100%
rename from docs/ff-concepts/alerts-notification/imgs/img.png
rename to docs/ff-concepts/alerts/imgs/img.png
diff --git a/docs/ff-concepts/alerts-notification/imgs/img_1.png b/docs/ff-concepts/alerts/imgs/img_1.png
similarity index 100%
rename from docs/ff-concepts/alerts-notification/imgs/img_1.png
rename to docs/ff-concepts/alerts/imgs/img_1.png
diff --git a/docs/ff-concepts/alerts-notification/imgs/img_2.png b/docs/ff-concepts/alerts/imgs/img_2.png
similarity index 100%
rename from docs/ff-concepts/alerts-notification/imgs/img_2.png
rename to docs/ff-concepts/alerts/imgs/img_2.png
diff --git a/docs/ff-concepts/animations/widget_animations.md b/docs/ff-concepts/animations/widget_animations.md
index 30a4c76f..d25830bf 100644
--- a/docs/ff-concepts/animations/widget_animations.md
+++ b/docs/ff-concepts/animations/widget_animations.md
@@ -208,7 +208,7 @@ If you notice carefully, the items appear in a staggered fashion. This can be ac
Select the item in the list and add the Slide animation.
-In the Delay property, open the variable menu and add a [code expression](../../resources/control-flow/functions/utility-functions.md#code-expressions) to calculate the delay value based on the item's index. For this example, we use the formula `[index] * 100`, where `index` represents the position of the item, and `100` is the delay in milliseconds. This means the first item will slide in after 100 ms, the second after 200 ms, and so on, creating a staggered animation effect.
+In the Delay property, open the variable menu and add a [inline function](../../resources/control-flow/functions/utility-functions.md#inline-function-code-expressions) to calculate the delay value based on the item's index. For this example, we use the formula `[index] * 100`, where `index` represents the position of the item, and `100` is the delay in milliseconds. This means the first item will slide in after 100 ms, the second after 200 ms, and so on, creating a staggered animation effect.
Design System**.
-2. Click **Create Design Library**.
-3. Enter the **Design Library Project Name**.
-4. Now you can configure the Colors, Typography & Icons, App Assets, NavBar & AppBar, and Theme Settings.
-5. To see how the app will look for the new design system, you can open it in preview mode (click the eye icon at the top right side).
+- **Enterprise Applications:** Large organizations can develop a centralized design system as a library to ensure all internal applications maintain a cohesive look and feel, enhancing brand identity and user experience.
+- **Startup MVPs:** Startups can expedite the development of Minimum Viable Products (MVPs) by leveraging a pre-built design system library like [**shadcn**](https://marketplace.flutterflow.io/item/cNlm0zWW1Nfq11cFXBmp), allowing them to focus on functionality and user validation.
+- **Cross-Platform Consistency:** Teams aiming to deploy apps across multiple platforms (iOS, Android, Web) can use a popular platform based design system library to ensure uniformity in design, reducing the effort required for platform-specific adjustments.
-
-
-
-
-
-
-
-6. To use the design system, open your project and navigate to **Theme Settings > Design System**.
-7. Click on the **No Design System Selected**.
-8. A pop will open displaying the list of the design systems, click on the newly created design system to add it to your project. **Note** that the design system created in [My Organization](../../resources/projects/how-to-collaborate-on-projects.md#sharing-a-project-with-an-organization) will also be available here.
+:::
-:::info
-After selecting the design system, you can't change the Colors, Typography, and Theme Widgets.
+To add a design system from a library, start by creating the design system in a new FlutterFlow project and [publishing it as a library](../../resources/projects/libraries.md#publishing-a-library). Next, [import](../../resources/projects/libraries.md#importing-a-library) that library into the project where you want to use the design system. Then, navigate to **Theme Settings > Design System** and click **No Design System Selected**. From the dropdown that appears, **Select a library** you’ve just imported to apply its design system to your project.
-:::
-
-
+You can also create fully custom text styles to match your design needs, going beyond the default styles like Display, Headline, or Title. Simply click the **+ Add Custom Text Style** button, a new text style will be added at the bottom, then edit the style name and customize the style properties.
+
+
+
+:::tip[PLANS]
+Custom Text Styles are available on the **Business** plan and higher. Check our [**pricing plans**](https://flutterflow.io/pricing).
+:::
#### Adding responsive text styles
@@ -675,12 +617,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*:
@@ -748,17 +690,20 @@ 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).
+1. Head over to the [IcoMoon](https://icomoon.io/app/#/select).
2. Import your custom icon (.svg) or select from the free icons set.
3. Select the **Generate Font** tab.
4. Click on the Settings button (gear icon) beside the download text on the bottom right side.
@@ -799,8 +744,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.
How is the theme widget different from creating a template and component?
The Theme Widget allows you to customize the visual appearance of a single widget, whereas templates consist of multiple widgets that create a unique UI layout with a specific purpose. On the other hand, components are fully-featured custom widgets that combine multiple widgets and actions to complete a task.
-
\ No newline at end of file
+
diff --git a/docs/ff-concepts/design-system/imgs/typography.avif b/docs/ff-concepts/design-system/imgs/typography.avif
new file mode 100644
index 00000000..6c769fcb
Binary files /dev/null and b/docs/ff-concepts/design-system/imgs/typography.avif differ
diff --git a/docs/ff-concepts/file-handling/audio/_category_.json b/docs/ff-concepts/file-handling/audio/_category_.json
deleted file mode 100644
index 23edcfe2..00000000
--- a/docs/ff-concepts/file-handling/audio/_category_.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "label": "Audio",
- "position": 0
-}
\ No newline at end of file
diff --git a/docs/ff-concepts/file-handling/audio/audio-player.md b/docs/ff-concepts/file-handling/audio/audio-player.md
deleted file mode 100644
index f5645ca4..00000000
--- a/docs/ff-concepts/file-handling/audio/audio-player.md
+++ /dev/null
@@ -1,194 +0,0 @@
----
-title: AudioPlayer
-slug: /concepts/file-handling/audio-player
-sidebar_position: 0
-tags: [Media, Widget]
-keywords: [Media, AudioPlayer, Play Audio File]
----
-
-# AudioPlayer
-
-The AudioPlayer widget plays audio from uploaded assets or the URL link.
-
-## Adding AudioPlayer Widget
-
-Here's how you can add the AudioPlayer widget to your project:
-
-1. Drag the **AudioPlayer** widget from the **Base Elements** tab (in the Widget Panel) or add it directly from the widget tree.
-2. Move to the properties panel (on the right side of your screen) and scroll down to the **Audio Options** section.
-3. Find the **Title** property and enter the value to display the audio title. You can also set this from the variable, such as the app state variable, API response variable, Firestore document, and more. To do so, click on the **Set from Variable**.
-4. Find the **Path** property and enter the **URL** for the new audio file.
-5. By default, the audio stops when you move to another page using the **Pause on Forward Navigation** property.
-6. When an app goes in the background while the audio player is running, you can control the audio player's behavior using the **Play in Background** property, which has following options:
- 1. **Enabled**: This keeps the audio player running.
- 2. **Disabled, restore on foreground**: This pauses the audio player and starts playing again as soon as the app is visible.
- 3. **Disabled, pause**: This stops the audio player as soon as the app goes in the background.
-
-:::info
-By default, every AudioPlayer widget added to the project will play a sample audio file from a network URL.
-:::
-
-
-
-
-
-
-## Use Audio from assets
-
-By default, the widget is set to play audio from the internet. However, you can change this to use the audio uploaded directly to your app.
-
-Here's how you can change the audio type:
-
-1. Select the **AudioPlayer** widget from the widget tree or the canvas area.
-2. Move to the properties panel (on the right side of your screen) and scroll down to the **Audio Options** section.
-3. Find the **Audio Type** dropdown and select **Asset**.
-4. Now, find the **Asset Audio** property, click the **Upload Audio** button, select the audio and upload it.
-
-
-
-
-
-
-:::info
-Once you upload the audio, you can use it throughout your app. You can manage your uploaded audio files with the Project Media Asset Manager.
-:::
-
-To use the uploaded audio:
-
-1. Select the **AudioPlayer** widget from the widget tree or the canvas area.
-2. Move to the properties panel (on the right side of your screen) and scroll down to the **Audio Options** section.
-3. Find the **Audio Type** dropdown and select **Asset**.
-4. Click on **No asset select** (inside the dropdown) and choose the audio.
-
-
-
-
-
-
-
-## Customization
-
-You can customize the appearance of this widget using the various properties available under the properties panel.
-
-### Changing colors
-
-To change the audio tile colors:
-
-1. Select the **AudioPlayer** widget from the widget tree or the canvas area.
-2. Move to the properties panel (on the right side of your screen) and scroll down to the **Audio Player Properties** section.
-3. To change the background color of the tile, Find the **Fill Color** property click on the box next to the already selected color, select the color, and then click **Use Color** or click on an already selected color and enter a Hex Code directly. You can also choose the color by clicking the **Palette** and **Simple** button.
-4. Similarly, you can change the **Playback Button Color** (play and pause button) and **Active Track Color** (the bar color that shows the progress of the currently playing audio).
-
-### Changing elevation
-
-To change the elevation (depth or Z-axis) of the audio tile:
-
-1. Select the **AudioPlayer** widget from the widget tree or the canvas area.
-2. Move to the properties panel (on the right side of your screen) and scroll down to the **Audio Player Properties** section.
-3. Find the **Elevation** input box and enter the value to see the drop shadow effect below the badge. The Higher value sets the bigger size of the shadow, whereas the 0 value removes the shadow.
-
-
-
-
-
-
-### Styling title text
-
-To change the title text style:
-
-1. Select the **AudioPlayer** widget from the widget tree or the canvas area.
-2. Move to the properties panel (on the right side of your screen) and scroll down to the **Title Text Style** section.
-3. Find the **Theme Text Style** property and change the style as per instructions [here](../../../resources/ui/widgets/basic-widgets/text.md#common-text-styling-properties).
-
-
-### Styling playback duration text
-
-To change the playback duration text style:
-
-1. Select the **AudioPlayer** widget from the widget tree or the canvas area.
-2. Move to the properties panel (on the right side of your screen) and scroll down to the **Playback Duration Text Style** section.
-3. Find the **Theme Text Style** property and change the style as per instructions [here](../../../resources/ui/widgets/basic-widgets/text.md#common-text-styling-properties).
\ No newline at end of file
diff --git a/docs/ff-concepts/file-handling/audio/audio-recroding.md b/docs/ff-concepts/file-handling/audio/audio-recroding.md
deleted file mode 100644
index bcf959c6..00000000
--- a/docs/ff-concepts/file-handling/audio/audio-recroding.md
+++ /dev/null
@@ -1,165 +0,0 @@
----
-title: Audio Recording
-slug: /concepts/file-handling/audio-recording
-sidebar_position: 1
-tags: [Media, Action]
-keywords: [Media, Audio Recording, Action, File Handling]
----
-
-# Audio Recording
-
-This action allows users to record audio. Using this action, you can add functionalities like recording voice notes in a note-taking app or practicing pronunciation in a language app.
-
-
-
-
-
-
-## Types of audio recording action
-
-Following are the types of audio recording actions you can trigger:
-
-1. [**Start Audio Recording**](#start-audio-recording-action): This starts the recording. It also provides a name to the recording, which you can use later to stop the recording using the "Stop Audio Recording" **action*.*
-2. [**Stop Audio Recording**](#stop-audio-recording-action): This halts the ongoing recording using the name from the "Start Audio Recording" action. To capture and play the recorded audio, make sure to specify the *Action Output Variable Name*, which can be used with the audio player.
-
-## Start Audio Recording [Action]
-
-Follow the steps below to start the recording:
-
-1. Select the widget (e.g., Button, Page, etc.) on which you want to add the action.
-2. Select **Actions** from the Properties panel (the right menu), and click **Open**. This will open an **Action Flow Editor** in a new popup window.
-3. Click on the **+ Add Action**.
-4. First, [request permission](../../../resources/projects/settings/project-setup.md#request-permission-action) for the microphone.
-5. Inside the **TRUE** section, add the **Start Audio Recording** (under *Utilities*) action.
-6. By default, the **Name** is set to any random string. However, you can change it to any friendly name.
-7. Optional: After starting recording, you might want to update the state variables to reflect changes on UI. For instance, you can enable/disable buttons or start recording animations to provide a visual cue of the ongoing process. This step allows you to enhance the user experience and provide real-time feedback during the recording.
-
-
-
-
-
-
-## Stop Audio Recording [Action]
-
-Follow the steps below to stop the recording:
-
-1. Select the widget (e.g., Button, Page, etc.) on which you want to add the action.
-2. Select **Actions** from the Properties panel (the right menu), and click **Open**. This will open an **Action Flow Editor** in a new popup window.
-3. Click on the **+ Add Action**.
-4. Search and select the **Stop Audio Recording** (under *Utilities*) action.
-5. Choose the **Recorder Name** from the dropdown. This will be the name you provided in the "Start Audio Recording" action.
-6. Specify the **Action Output Variable Name**. This will store the actual audio recording, which you can use with any audio player. It stores recording in an **Audio Path** data type.
-7. To upload the audio recording to Firebase or Supabase, you can use the [Upload file](../upload-save-file.md) action. When you add this action:
- 1. Set the **Upload Type** to the preferred one.
- 2. Set **File Type** to **Uploaded File** because the *Stop Audio Recording* action internally stores recorded audio bytes (inside widget state).
- 3. Set the **File to Upload** to **Widget State > [action_output_variable_name]Bytes**.
-8. For uploading via API, *you don't need to add the Upload file action*. Just directly add the [**API call**](../../../resources/control-flow/backend-logic/api/rest-api.md) and select the API that will upload the file to your server. **Note** that the request body for this API must be in *Multipart* format. You can pass the audio recording via **Widget State > [action_output_variable_name]Bytes** in the API variable. See how to [configure an API for the multipart request body](../../../resources/control-flow/backend-logic/api/rest-api.md#multipart-format).
-9. Optional: After stopping the recording, you might want to update the state variables to reflect changes on the UI. For instance, you can enable/disable buttons or stop recording animations.
-
-:::tip
-It's always a good idea to have a fail-safe mechanism to ensure recordings are properly stopped, even if the user forgets to do so manually. For instance, you can trigger this action when the user closes the app without explicitly stopping it.
-:::
-
-
-
-
-
-
-## Playing audio recording
-
-After you have stopped the recording, you can simply provide the *Action Output Variable Name* to the [Audio Player](audio-player.md) widget to start playing the recorded audio.
-
-:::warning
-Currently, recording audio isn't supported in Run or Test modes due to certain limitations. However, for Android and iOS platforms, you can test by downloading the code and following the instructions provided [here](../../../testing-deployment-publishing/exporting-code/ff-cli.md).
-:::
-
-Here's how you do it.
-
-
-
-
-
\ No newline at end of file
diff --git a/docs/ff-concepts/file-handling/audio/play-stop-sound.md b/docs/ff-concepts/file-handling/audio/play-stop-sound.md
deleted file mode 100644
index b9cbc8e5..00000000
--- a/docs/ff-concepts/file-handling/audio/play-stop-sound.md
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: Play / Stop Sound
-slug: /concepts/file-handling/play-stop-sound
-sidebar_position: 2
-tags: [Media, Action]
-keywords: [Media, Play Sound, Stop Sound, Action]
----
-# Play / Stop Sound
-The Play and Stop Sound actions allow you to enhance your app with audio effects.
-
-## Play Sound
-
-Using this action, you play a sound that notifies users about the action they have taken—for example, playing a sound after refreshing a list or sending a message.
-
-:::tip
-It is advisable to use this action only for short audio. To play the more extended audio, consider adding the [**AudioPlayer**](audio-player.md) widget.
-:::
-
-### Adding Play Sound [Action]
-
-Follow the steps below to add this action to any widget.
-
-1. Select the **Widget** (e.g., Button) on which you want to add the action.
-2. Select **Actions** from the properties panel, If it's the first action, click **+ Add Action** button. Otherwise, click the "**+**" button below the previous action tile (inside *Action Flow Editor*) and select **Add Action**.
-3. Search and select the **Play Sound** (under *Alerts/Notifications*) action.
-4. By default, this action will be given a random **Name** so it can be stopped by the [Stop Sound](#adding-stop-sound-action) action.
-5. Find the **Audio Type** dropdown and select **Network** or **Asset**.
-6. If you choose *Network*:
- 1. Inside the **Network Path** section,
- 1. To set the static audio, select the **Value Source > Specific** **Value** and enter the **Value** as a URL that will play the sound.
- 2. To set the dynamic audio, select the **Value Source > From Variable** > click **UNSET** and set the URL from a variable.
-7. If you choose *Asset,* click the **Upload Audio** button, select the sound and upload it.
-8. You can also control the sound volume using the **Volume** slider. It ranges from 0.0 to 1.0, where 0 is mute and 1 is full volume.
-9. By default, this action is 'non-blocking'**,** meaning it will trigger the following/next action (if any) as soon as this one is triggered. If you want to wait until the sound playing is finished before triggering any further action, enable **Await Playback** option.
-
-
-
-
-
-
-## Stop sound
-
-Using this action, you can stop a sound that is currently playing, which was started by the [Play Sound](#play-sound) action. For example, If your app is playing any sound effects, you may need to stop them when the app is paused or stopped.
-
-:::info
-This action only works if you have added a [**Play Sound**](#adding-play-sound-action) action on a page.
-:::
-
-### Adding Stop Sound [Action]
-
-Follow the steps below to add this action to any widget.
-
-1. Select the **Widget** (e.g., Button) on which you want to add the action.
-2. Select **Actions** from the properties panel (the right menu), If it's the first action, click **+ Add Action** button. Otherwise, click the "**+**" button below the previous action tile (inside *Action Flow Editor*) and select **Add Action**.
-3. Search and select the **Stop Sound** (under *Alerts/Notifications*) action, and then choose the sound *Name* that you want to stop.
-
-
\ No newline at end of file
diff --git a/docs/ff-concepts/file-handling/clear-delete-media.md b/docs/ff-concepts/file-handling/clear-delete-media.md
index 15438d4e..245b67e2 100644
--- a/docs/ff-concepts/file-handling/clear-delete-media.md
+++ b/docs/ff-concepts/file-handling/clear-delete-media.md
@@ -1,125 +1,34 @@
---
-title: Clear or Delete Media
slug: /concepts/file-handling/clear-delete-media
-sidebar_position: 7
-tags: [Media, Action]
-keywords: [Media, Clear Data, Delete Data Firebase Storage, Supabase Storage]
+title: Clear or Delete Media
+description: Learn how to add clear and delete file actions into your FlutterFlow app.
+sidebar_position: 4
+tags: [Media Files, Clear Delete Data]
+keywords: [Media Files, Clear Data, Delete Data, Firebase Storage, Supabase Storage]
---
# Clear or Delete Media
-The Clear and Delete Media actions provide essential functionalities for managing media files efficiently.
-
-## Clear Uploaded Data
+The **Clear** and **Delete** **Media** actions provide essential functionalities for managing media files efficiently.
-By utilizing this action, you can clear the *Uploaded File URL*. This functionality is handy when you want to offer users a straightforward method to remove any uploaded media, such as images or recordings, by providing them with an explicit option to do so.
+## Clear Uploaded Data [Action]
-
-
-
-
+When users upload media files, these files are first stored in a local state variable, i.e., *Uploaded File URL* for immediate access and display. This action is helpful when you want to offer users a straightforward method to remove any uploaded media, such as images or recordings.
:::info
-Before you use this action, you must have the [**Upload Data**](upload-save-media.md) action already added.
-:::
-
-### Adding Clear Uploaded Data action
-
-Follow the steps below to add this type of action to any widget:
-1. Select the **Widget** (e.g., Button) on which you want to add the action.
-2. Select **Actions** from the Properties panel (the right menu), and click **+ Add Action**.
-3. Search and select the **Clear Uploaded Data** (under *Utilities*) **> [Name of uploaded data]** (given in the [Upload Data](upload-save-media.md)) action.
+For this action to work, the [**Upload or Save Media**](uploading-files.md#upload-or-save-media-action) action must already be added to the actions workflow.
-
-
-## Delete Data
-
-Using this action, you can delete the uploaded media, such as photos, videos, and PDF files, from the [Firebase Storage](https://firebase.google.com/docs/storage) or [Supabase Storage](https://supabase.com/storage).
+:::
-
-
-
-
+## Delete Data [Action]
-:::info
-Before you add this action, ensure you can access the *Uploaded File URL* of the media. Check out the [**upload media**](upload-data.md) section to see how to get it.
-:::
+The **Delete Data** action permanently removes uploaded media—such as images, videos, and PDF files—from external storage platforms like [Firebase Storage](https://firebase.google.com/docs/storage) and [Supabase Storage](https://supabase.com/storage).
-### Adding Delete Media action
+Inside the **URL** section, provide a valid media URL. This must be either the direct **Uploaded File URL** or a variable that holds the URL.
-Follow the steps below to add this action to any widget.
+:::tip
-1. Select the **Widget** (e.g., Button) on which you want to add the action.
-2. Select **Actions** from the Properties panel (the right menu), and click **+ Add Action**.
-3. Search and select the **Delete Media** (under *Utilities*) action.
-4. Inside the **URL** section, provide a valid media URL. This must be either the direct **Uploaded File URL** or a variable that holds the URL.
-5. To let users know about the successful deletion of the media, you can [add the snackbar message](../../resources/ui/pages/page-elements.md#snackbar).
+Always prompt users for confirmation before deleting media files to prevent accidental loss of data.
-
-
-
-
\ No newline at end of file
+:::
\ No newline at end of file
diff --git a/docs/ff-concepts/file-handling/displaying-media.md b/docs/ff-concepts/file-handling/displaying-media.md
new file mode 100644
index 00000000..7adef3fb
--- /dev/null
+++ b/docs/ff-concepts/file-handling/displaying-media.md
@@ -0,0 +1,321 @@
+---
+slug: /concepts/file-handling/displaying-media
+title: Displaying Media
+description: Learn how to display media in FlutterFlow.
+tags: [Media Files, Widget]
+sidebar_position: 2
+keywords: [Media Files, Media Management, Assets, Network, Display Media, Media Widgets]
+---
+
+# Displaying Media
+
+Displaying media efficiently is crucial for enhancing user experience in your FlutterFlow app. Whether you're working with images, audio, video, or PDFs, FlutterFlow provides flexible options for integrating and managing media. This guide covers how to set media sources, customize playback settings, and implement best practices like lazy loading, caching, and BlurHash to optimize performance.
+
+## Media Types
+To display media on widgets, navigate to the **Properties Panel** and specify the media source under the **[Media] Type** option (e.g., ImageType, AudioType, VideoType). Here are the available options:
+
+### Network
+
+Enter the URL of the media directly into the **Path** input field. This is for media hosted online.
+
+
+
+If your media is uploaded to Firebase or Supabase, click **Set from Variable** on the **Path** input field, and select **Source** as **Widget State > Uploaded File URL**.
+
+
+
+For media uploaded via an API, choose **Source** as **Action Outputs > [Action Output Variable Name] (API Response)**. Ensure that the API response contains the URL of the uploaded file. Learn how to extract the URL using [JSON path](../../resources/control-flow/backend-logic/api/rest-api.md#json-path).
+
+
+
+:::info
+
+To handle scenarios where media takes time to load or fails to load, you can set a placeholder. Click **Set from Variable** on the **Path** field and specify a placeholder URL under the **Default Value** property.
+
+:::
+
+### Asset
+
+You can also display media files uploaded to your **Assets**. Assets are resources such as images, videos, documents, fonts, and other files that you include locally in your project. To upload assets, click on **Media Assets** in the left-side navigation menu and add files directly from your device. Alternatively, you can directly upload and display files when configuring media widgets by clicking the upload icon.
+
+:::tip
+For more details on how assets are stored in your project, see the directory [**Assets**](../../generated-code/directory-structure.md#assets) in the generated code.
+:::
+
+
+
+
+
+### Uploaded File
+
+You can also access media files within your app that are stored temporarily in your application. For example, if you'd like to preview an image before sending it to cloud storage, you can do so by setting the source to **Widget State -> Uploaded Local File**.
+
+
+
+## AudioPlayer
+
+The **AudioPlayer** widget allows you to integrate audio playback into your apps. You can play audio from both uploaded assets and external URLs. Refer to the [**Displaying Media**](#media-types) section for more details on accessing media.
+
+:::tip[Generated Code]
+The AudioPlayer widget in FlutterFlow uses the [**assets_audio_player**](https://pub.dev/packages/assets_audio_player) package for audio playback.
+:::
+
+**Customization Options**
+
+- **Title:** Specify the audio title in the **Title** property. You can set this directly or bind it to a variable, such as an app state variable, API response, or Firestore document.
+- **Pause on Forward Navigation:** By default, the audio stops when navigating to another page.
+- **Play in Background:** Define how the audio behaves when the app moves to the background:
+ - **Enabled:** The audio continues to play.
+ - **Disabled, restore on foreground:** The audio pauses and resumes when the app becomes active again.
+ - **Disabled, pause:** The audio stops immediately when the app goes into the background.
+- **Colors:**
+ - **Background Color:** Customize the background using the **Fill Color** property.
+ - **Playback Button Color:** Adjust the colors of the play and pause buttons.
+ - **Active/Inactive Track Color:** Change the progress bar color that indicates the current playback position.
+- **Elevation:** Use the **Elevation** property to modify the shadow beneath the audio tile. A higher value increases the shadow size, while setting it to 0 removes the shadow.
+- **Text Styling:**
+ - **Title Text:** Personalize the title’s font, size, and color in the **Title Text Style** section.
+ - **Playback Duration Text:** Adjust the style of the playback duration text in the **Playback Duration Text Style** section.
+
+## Audio Recording
+
+You can implement audio recording functionality using the **Start Audio Recording** and **Stop Audio Recording** actions.
+
+:::warning
+
+Currently, audio recording is not supported in **Run** or **Test** modes due to certain limitations.
+
+:::
+
+### Start Audio Recording [Action]
+
+This action starts the recording. It also provides a name to the recording, which you can use later to stop the recording using the [Stop Audio Recording](#stop-audio-recording-action) *action.*
+
+Before adding this action, ensure you [request microphone permission](../../resources/projects/settings/project-setup.md#request-permission-action). Within the **TRUE** block of the permission condition check, add the **Start Audio Recording** action. By default, the **Name** field value is a randomly generated string. You can change it to a more descriptive name for easier identification.
+
+:::tip
+
+After starting recording, you might want to update the state variables to reflect changes on the UI. For instance, you can enable/disable buttons or start recording animations to provide a visual cue of the ongoing process. This step allows you to enhance the user experience and provide real-time feedback during the recording.
+
+:::
+
+
+
+
+### Stop Audio Recording [Action]
+
+If you have multiple audio recording actions, all the Recorder object names (either auto-generated by FlutterFlow or manually set by the user) are listed under the Recorder Name dropdown. Choose the recorder object you want to stop, and it will stop the ongoing recording.
+
+ To capture and play the recorded audio, make sure to specify the *Action Output Variable Name*, which can be used with the audio player.
+
+Here’s how you can setup this action:
+
+1. When you add this action, choose the **Recorder Name** from the dropdown. This will be the name you provided in the Start Audio Recording action.
+2. Specify the **Action Output Variable Name**. This will store the actual audio recording, which you can use with any audio player. It stores recording in an **Audio Path** data type.
+3. If you want to upload the audio recording to Firebase or Supabase, you can use the [Upload file](uploading-files.md#upload-or-save-media-action) action. When you add this action:
+ 1. Set the **Upload Type** to the preferred one.
+ 2. Set **File Type** to **Uploaded File** because the *Stop Audio Recording* action internally stores recorded audio bytes (inside widget state).
+ 3. Set the **File to Upload** to **Widget State > Recorded File**.
+4. For uploading via API, *you don't need to add the Upload file action*. Just directly add the [**API call**](../../resources/control-flow/backend-logic/api/rest-api.md) and select the API that will upload the file to your server. **Note** that the request body for this API must be in *Multipart* format. You can pass the audio recording via **Widget State > Recorded File** in the API variable. See how to [configure an API for the multipart request body](../../resources/control-flow/backend-logic/api/rest-api.md#multipart-format).
+
+:::tip
+
+- After stopping the recording, you might want to update the state variables to reflect changes on the UI. For instance, you can enable/disable buttons or stop recording animations.
+- It's always a good idea to have a fail-safe mechanism to ensure recordings are properly stopped, even if the user forgets to do so manually. For example, you can use the [**On Dispose**](../../resources/ui/pages/page-lifecycle.md#on-dispose-action-trigger) action trigger to stop recording when a user closes the app without manually stopping it.
+
+:::
+
+
+
+
+
+
+
+### Playing audio recording
+
+After you have stopped the recording, you can simply provide the *Action Output Variable Name* to the [Audio Player](#audioplayer) widget to start playing the recorded audio.
+
+## Play or Stop Sound
+
+The **Play Sound** and **Stop Sound** actions offer flexibility for enhancing the user experience with audio effects or background sounds.
+
+### Play Sound [Action]
+
+The **Play Sound Action** allows you to play a sound that notifies users about the action they have taken—for example, playing a sound after refreshing a list or sending a message.
+
+:::tip
+
+It is advisable to use this action only for short audio. To play the more extended audio, consider adding the [**AudioPlayer**](#audioplayer) widget.
+
+:::
+
+By default, this action is assigned a random **Name** to be stopped later using the [Stop Sound](#stop-sound-action) action. You can adjust the volume using the **Volume** slider (0.0 = mute, 1.0 = full volume). The action is non-blocking by default, allowing subsequent actions to trigger immediately. To wait until playback finishes before proceeding, enable the **Await Playback** option.
+
+:::info[Use cases]
+
+- **Feedback Sounds:** Play sounds for button clicks, form submissions, or error alerts to improve user interaction and feedback.
+- **Notifications:** Play sound alerts for reminders, messages, or task completion.
+- **Gamification:** Enhance gaming experiences with sound effects for achievements, levels, or interactions.
+
+:::
+
+### Stop Sound [Action]
+
+You can stop a sound that is currently playing, which was started by the [Play Sound](#play-sound-action) action. For example, If your app is playing any sound effects, you may need to stop them when the app is paused or stopped.
+
+:::info
+
+This action is enabled only when you have added a [**Play Sound**](#play-sound-action) action on a page.
+
+:::
+
+## VideoPlayer
+
+The **VideoPlayer** widget is used to show a video from uploaded assets or the URL link. The VideoPlayer widget can play various video formats such as MP4, MOV, WAV, MPEG, and JPEG motion photos. Refer to the [**Displaying Media**](#media-types) section for more details on accessing media.
+
+:::tip[Generated Code]
+The VideoPlayer uses the [**video_player**](https://pub.dev/packages/video_player) package for reliable video playback across different platforms.
+:::
+
+**Customization Options**
+
+The **VideoPlayer** widget includes several options to align with your app's design and functionality:
+
+- **Aspect Ratio:** Set the desired aspect ratio (e.g., 1.7 for a 16:9 ratio) to ensure the video displays correctly.
+- **AutoPlay:** Enable this option to automatically start playing the video when the page loads.
+- **Loop Video:** Choose whether the video should replay automatically after it ends.
+- **Show Controls:** Display playback controls, including play/pause buttons and the seek bar.
+- **Allow Full Screen:** Enable users to expand the video to full-screen mode.
+- **Playback Speed Menu:** Let users adjust the video playback speed.
+- **Load on Page Load:** When enabled, the video will preload when the page loads, reducing buffering time when the user starts playback.
+- **Pause on Forward Navigation:** If enabled, the video will pause automatically when the user navigates away from the page.
+
+## YoutubePlayer
+
+The **YouTubePlayer** widget in FlutterFlow allows you to integrate and play YouTube videos within your app. It offers customizable playback options and an intuitive interface for enhancing the user experience.
+
+:::tip[Generated Code]
+The YoutubePlayer uses a custom version of the [**youtube_player_iframe**](https://pub.dev/packages/youtube_player_iframe) package, hosted on FlutterFlow's GitHub repository.
+:::
+
+**Customization Options**
+
+- **Loop Video:** When enabled, the video will automatically replay after it finishes.
+- **Mute Video:** Starts the video in a muted state.
+- **Show Controls:** Displays playback controls such as play/pause, volume, subtitles, and fullscreen options.
+- **Show Full Screen Control:** This specifically displays the fullscreen toggle button among the controls.
+- **Pause on Forward Navigation:** Automatically pauses the video when the user navigates away from the page.
+- **Strict Related Videos:** Ensures that related videos shown at the end of playback come from the same channel as the currently played video.
+
+## PdfViewer
+
+In FlutterFlow, the **PdfViewer** widget enables you to display PDF files within your app, supporting both network URLs and locally uploaded assets. Refer to the [**Displaying Media**](#media-types) section for more details.
+
+:::tip[Generated Code]
+The PdfViewer in FlutterFlow uses the [**pdfx**](https://pub.dev/packages/pdfx) package for rendering PDFs.
+:::
+
+**Customization Options**
+
+- **Horizontal Scroll:** By default, the PdfViewer allows vertical scrolling through pages. Enable this option to allow horizontal scrolling.
+- **Use Proxy:** By default, FlutterFlow routes PDF fetching through a proxy in **Run Mode** and **Test Mode** to avoid CORS (Cross-Origin Resource Sharing) issues. **Switch this off** if you do not want the PDF request to be routed through the proxy.
+- **Use Custom Proxy URL:** If you need a specific proxy, enable this option and provide your own proxy URL instead of using FlutterFlow’s default proxy.
+
+## Web Access for PDFs and Other Files
+
+Some types of files require additional configuration to be accessed on the web. In particular, the PDF Viewer requires network-hosted files (such as uploaded PDFs) to allow Cross-Origin Resource Sharing (CORS). For a deeper understanding of Cross-Origin Resource Sharing (CORS), you can refer to this guide.
+
+The key takeaway is that to allow users to upload and view PDFs using Firebase Storage, follow the steps below.
+
+
+You'll need to run a few commands to enable CORS for your Firebase project. No programming experience is required, but if you're comfortable with Firebase, you can refer to the official guide here: [Firebase CORS Configuration](https://firebase.google.com/docs/storage/web/download-files#cors_configuration).
+
+**Step 1: Find Your Firebase Project ID**
+
+You can find the Firebase project ID from **FlutterFlow > Settings and Integrations > Firebase**. Copy your **Firebase** **Project ID**.
+
+
+
+**Step 2: Open Cloud Shell in Google Cloud Console**
+
+1. Go to the following link, replacing **FIREBASE_PROJECT_ID** with your actual project ID:
+
+```jsx
+https://console.cloud.google.com/home/dashboard?cloudshell=true&project=FIREBASE_PROJECT_ID
+```
+
+1. If prompted, click **Continue**.
+2. You should see a terminal at the bottom of the screen. If your project ID is not displayed in yellow, click the **down arrow** (🔽) next to the project name and select the correct Firebase project.
+
+
+
+**Step 3: Run the CORS Configuration Command**
+
+1. Click on the **Cloud Shell terminal** (the black screen).
+2. Copy and paste the following command and replace `` with your actual storage bucket. To locate your Firebase Storage bucket name, navigate to Firebase Console > Storage > at top left side, you'll see your bucket's URL, which typically follows the format `your-project-id.appspot.com`.
+
+```jsx
+touch cors.json && \
+echo '[{"origin": ["*"], "method": ["GET"], "maxAgeSeconds": 3600}]' > cors.json && \
+gsutil cors set cors.json gs://
+```
+
+
+
+3. Press **Enter** (or **Return**) to execute the command.
+4. If prompted, click **Authorize** to allow Cloud Shell to access your Firebase project.
+5. Once the command executes successfully, you should see a confirmation message.
+
+
+
+
+## BlurHash
+
+In FlutterFlow, **BlurHash** is a technique used to enhance the user experience by displaying visually appealing placeholders while images are loading. Instead of showing empty spaces or generic loading indicators, BlurHash generates a blurred preview that resembles the actual image, providing users with a smoother and more engaging experience.
+
+
+
+Here are the steps to generate and use the BlurHash:
+
+1. When using the [**Upload/Save Media**](uploading-files.md#upload-or-save-media-action) action to upload images, you can enable the **Include Blur Hash** option. This setting automatically generates a BlurHash string for the uploaded image.
+
+
+
+1. After generating the BlurHash, it's advisable to store it alongside the image URL in your database (e.g., Firestore). The generated BlurHash is accessible via the **Widget State > Uploaded Local File > Media Blur Hash**. This approach ensures that both the image URL and its corresponding BlurHash are readily accessible when needed.
+
+
+
+1. To utilize the BlurHash as a placeholder, in the Image widget's properties, enable the **Use Blur Hash** option and then set the **Blur Hash String** value from a variable.
+
+
+
+## Best Practices
+
+- Enable [infinite scrolling](../../resources/ui/widgets/composing-widgets/list-grid.md#adding-infinite-scroll) (lazy loading) in list views to load additional content as users scroll, rather than loading all data at once.
+- Leverage FlutterFlow's built-in cache manager, which automatically handles image caching.
+- Implement [local caching](../../resources/control-flow/backend-logic/backend-query/backend-query.md#backend-query-caching) to store frequently accessed data on the device, reducing the need for repeated network requests.
+- Reduce the number of network calls by fetching only necessary data and utilizing caching strategies.
+- Ensure that database queries are efficient and retrieve only the data required for display.
+- Use [BlurHash](#blurhash) to display a blurred preview of images while they load, enhancing the user experience.
+- Display loading indicators to inform users that data is being fetched, improving perceived performance.
\ No newline at end of file
diff --git a/docs/ff-concepts/file-handling/download-file.md b/docs/ff-concepts/file-handling/download-file.md
index 7ed9ca01..81412103 100644
--- a/docs/ff-concepts/file-handling/download-file.md
+++ b/docs/ff-concepts/file-handling/download-file.md
@@ -1,12 +1,13 @@
---
-title: Download File
slug: /concepts/file-handling/download-file
-sidebar_position: 6
-tags: [Media, Download Data, File Management]
-keywords: [Media, Download Data, Firebase Storage, Supabase Storage]
+title: Download File
description: Learn how to add download file action into your FlutterFlow app.
+tags: [Media Files, Download Data]
+sidebar_position: 3
+keywords: [Media Files, Download Data, Firebase Storage, Supabase Storage]
---
+
# Download File
The **Download File** action allows you to enable users to download or save files locally on their devices.
@@ -49,7 +50,7 @@ The **Download File** action allows you to enable users to download or save file
To add a Download File action, select the **Widget** (e.g., button or any interactive widget) where you want users to initiate the file download and set the **Source** to one of the following.
- **From URL**: Use this option for downloading files that are accessible through a direct link and specify the URL of the file that should be downloaded.
-- **From File (Bytes)**: Use this option when the file is uploaded to the device using the [Local Upload (Widget State)](upload-data.md#local-upload-widget-state). You can access the file via ***Widget State > Uploaded Local File***.
+- **From File (Bytes)**: Use this option when the file is uploaded to the device using the [Local Upload (Widget State)](uploading-files.md#local-upload-widget-state). You can access the file via ***Widget State > Uploaded Local File***.
Optionally, you can specify a **Filename** to be used when the file is downloaded.
diff --git a/docs/ff-concepts/file-handling/file-handling.md b/docs/ff-concepts/file-handling/file-handling.md
new file mode 100644
index 00000000..c8149394
--- /dev/null
+++ b/docs/ff-concepts/file-handling/file-handling.md
@@ -0,0 +1,25 @@
+---
+slug: /concepts/file-handling
+title: File Handling
+description: Learn how to handle media files in FlutterFlow.
+tags: [Media Files, Upload Data, Download Data, Clear Delete Data]
+sidebar_position: 0
+keywords: [File Handling, Media Files, Upload Data, Download Data, Clear Delete Data, Media Management, Assets, Display Media, Media Widgets]
+---
+
+# File Handling
+
+FlutterFlow makes it easy to manage, upload, download, and display files within your app. It supports a variety of file types, including images, videos, and documents, and integrates seamlessly with popular storage solutions. Using built-in widgets and actions, you can effectively manage your app's media. This guide covers the following key aspects of file handling in FlutterFlow.
+
+- **Media Assets**: Upload any assets you want to use in your app from the Navigation Menu > Media Assets. This also shows the media assets of the Team.
+- [**Uploading Files**](uploading-files.md): Upload and save different file types, including images, audio, videos, and PDFs to cloud storage.
+- [**Displaying Media**](displaying-media.md): Fetch files from cloud storage or external URLs and display them in your app.
+- [**Download Files**](download-file.md): Allow users to download files directly to their devices.
+- [**Clear or Delete Media**](clear-delete-media.md): Allow users to delete uploaded files from their devices and cloud storage.
+
+:::info[Also see]
+
+- **Stream Media with Mux**: [**Integrate Mux's broadcasting**](../../ff-integrations/streaming/mux/initial-setup.md) services in FlutterFlow by using the MuxBroadcast widget for live streaming.
+- **Request Permissions**: [**Request user permissions**](../../resources/projects/settings/project-setup.md#request-permission-action) when implementing custom widgets or actions that access personal information, such as capturing photos or selecting images, especially if no built-in permission mechanism is available.
+
+:::
\ No newline at end of file
diff --git a/docs/ff-concepts/file-handling/imgs/adding-clear-uploaded-data-action.avif b/docs/ff-concepts/file-handling/imgs/adding-clear-uploaded-data-action.avif
deleted file mode 100644
index f31a208b..00000000
Binary files a/docs/ff-concepts/file-handling/imgs/adding-clear-uploaded-data-action.avif and /dev/null differ
diff --git a/docs/ff-concepts/file-handling/imgs/blurhash.avif b/docs/ff-concepts/file-handling/imgs/blurhash.avif
new file mode 100644
index 00000000..7ef74437
Binary files /dev/null and b/docs/ff-concepts/file-handling/imgs/blurhash.avif differ
diff --git a/docs/ff-concepts/file-handling/imgs/cloud-shell.avif b/docs/ff-concepts/file-handling/imgs/cloud-shell.avif
new file mode 100644
index 00000000..75704ced
Binary files /dev/null and b/docs/ff-concepts/file-handling/imgs/cloud-shell.avif differ
diff --git a/docs/ff-concepts/file-handling/imgs/compress-image.avif b/docs/ff-concepts/file-handling/imgs/compress-image.avif
new file mode 100644
index 00000000..827a7918
Binary files /dev/null and b/docs/ff-concepts/file-handling/imgs/compress-image.avif differ
diff --git a/docs/ff-concepts/file-handling/imgs/configure-upload-media-action.avif b/docs/ff-concepts/file-handling/imgs/configure-upload-media-action.avif
new file mode 100644
index 00000000..05cb8a05
Binary files /dev/null and b/docs/ff-concepts/file-handling/imgs/configure-upload-media-action.avif differ
diff --git a/docs/ff-concepts/file-handling/imgs/copy-firebase-project-id.avif b/docs/ff-concepts/file-handling/imgs/copy-firebase-project-id.avif
new file mode 100644
index 00000000..247e4f4d
Binary files /dev/null and b/docs/ff-concepts/file-handling/imgs/copy-firebase-project-id.avif differ
diff --git a/docs/ff-concepts/file-handling/imgs/cors-2.png b/docs/ff-concepts/file-handling/imgs/cors-2.png
new file mode 100644
index 00000000..c4375f34
Binary files /dev/null and b/docs/ff-concepts/file-handling/imgs/cors-2.png differ
diff --git a/docs/ff-concepts/file-handling/imgs/cors-3.png b/docs/ff-concepts/file-handling/imgs/cors-3.png
new file mode 100644
index 00000000..2aa773ff
Binary files /dev/null and b/docs/ff-concepts/file-handling/imgs/cors-3.png differ
diff --git a/docs/ff-concepts/file-handling/imgs/dm-api.avif b/docs/ff-concepts/file-handling/imgs/dm-api.avif
new file mode 100644
index 00000000..c8ae9731
Binary files /dev/null and b/docs/ff-concepts/file-handling/imgs/dm-api.avif differ
diff --git a/docs/ff-concepts/file-handling/imgs/dm-local-upload.avif b/docs/ff-concepts/file-handling/imgs/dm-local-upload.avif
new file mode 100644
index 00000000..e1342a24
Binary files /dev/null and b/docs/ff-concepts/file-handling/imgs/dm-local-upload.avif differ
diff --git a/docs/ff-concepts/file-handling/imgs/dm-network-path.avif b/docs/ff-concepts/file-handling/imgs/dm-network-path.avif
new file mode 100644
index 00000000..1cdc25d4
Binary files /dev/null and b/docs/ff-concepts/file-handling/imgs/dm-network-path.avif differ
diff --git a/docs/ff-concepts/file-handling/imgs/dm-uploaded-file.avif b/docs/ff-concepts/file-handling/imgs/dm-uploaded-file.avif
new file mode 100644
index 00000000..65081f59
Binary files /dev/null and b/docs/ff-concepts/file-handling/imgs/dm-uploaded-file.avif differ
diff --git a/docs/ff-concepts/file-handling/imgs/enable-blurhash.avif b/docs/ff-concepts/file-handling/imgs/enable-blurhash.avif
new file mode 100644
index 00000000..07f7b361
Binary files /dev/null and b/docs/ff-concepts/file-handling/imgs/enable-blurhash.avif differ
diff --git a/docs/ff-concepts/file-handling/imgs/full-screen-control-disabled.avif b/docs/ff-concepts/file-handling/imgs/full-screen-control-disabled.avif
deleted file mode 100644
index bf11b98a..00000000
Binary files a/docs/ff-concepts/file-handling/imgs/full-screen-control-disabled.avif and /dev/null differ
diff --git a/docs/ff-concepts/file-handling/imgs/img_1.png b/docs/ff-concepts/file-handling/imgs/img_1.png
deleted file mode 100644
index 01e7719f..00000000
Binary files a/docs/ff-concepts/file-handling/imgs/img_1.png and /dev/null differ
diff --git a/docs/ff-concepts/file-handling/imgs/img_10.png b/docs/ff-concepts/file-handling/imgs/img_10.png
deleted file mode 100644
index e46055e0..00000000
Binary files a/docs/ff-concepts/file-handling/imgs/img_10.png and /dev/null differ
diff --git a/docs/ff-concepts/file-handling/imgs/img_11.png b/docs/ff-concepts/file-handling/imgs/img_11.png
deleted file mode 100644
index 21d5c2ec..00000000
Binary files a/docs/ff-concepts/file-handling/imgs/img_11.png and /dev/null differ
diff --git a/docs/ff-concepts/file-handling/imgs/img_12.png b/docs/ff-concepts/file-handling/imgs/img_12.png
deleted file mode 100644
index f9e1adab..00000000
Binary files a/docs/ff-concepts/file-handling/imgs/img_12.png and /dev/null differ
diff --git a/docs/ff-concepts/file-handling/imgs/img_13.png b/docs/ff-concepts/file-handling/imgs/img_13.png
deleted file mode 100644
index 87d14cd2..00000000
Binary files a/docs/ff-concepts/file-handling/imgs/img_13.png and /dev/null differ
diff --git a/docs/ff-concepts/file-handling/imgs/img_2.png b/docs/ff-concepts/file-handling/imgs/img_2.png
deleted file mode 100644
index f4712e83..00000000
Binary files a/docs/ff-concepts/file-handling/imgs/img_2.png and /dev/null differ
diff --git a/docs/ff-concepts/file-handling/imgs/img_3.png b/docs/ff-concepts/file-handling/imgs/img_3.png
deleted file mode 100644
index d1be800f..00000000
Binary files a/docs/ff-concepts/file-handling/imgs/img_3.png and /dev/null differ
diff --git a/docs/ff-concepts/file-handling/imgs/img_4.png b/docs/ff-concepts/file-handling/imgs/img_4.png
deleted file mode 100644
index 75b84083..00000000
Binary files a/docs/ff-concepts/file-handling/imgs/img_4.png and /dev/null differ
diff --git a/docs/ff-concepts/file-handling/imgs/img_5.png b/docs/ff-concepts/file-handling/imgs/img_5.png
deleted file mode 100644
index ec8e4a7d..00000000
Binary files a/docs/ff-concepts/file-handling/imgs/img_5.png and /dev/null differ
diff --git a/docs/ff-concepts/file-handling/imgs/img_6.png b/docs/ff-concepts/file-handling/imgs/img_6.png
deleted file mode 100644
index 672bd56c..00000000
Binary files a/docs/ff-concepts/file-handling/imgs/img_6.png and /dev/null differ
diff --git a/docs/ff-concepts/file-handling/imgs/img_7.png b/docs/ff-concepts/file-handling/imgs/img_7.png
deleted file mode 100644
index 28730fb3..00000000
Binary files a/docs/ff-concepts/file-handling/imgs/img_7.png and /dev/null differ
diff --git a/docs/ff-concepts/file-handling/imgs/img_8.png b/docs/ff-concepts/file-handling/imgs/img_8.png
deleted file mode 100644
index af99faf3..00000000
Binary files a/docs/ff-concepts/file-handling/imgs/img_8.png and /dev/null differ
diff --git a/docs/ff-concepts/file-handling/imgs/img_9.png b/docs/ff-concepts/file-handling/imgs/img_9.png
deleted file mode 100644
index c2be9a3e..00000000
Binary files a/docs/ff-concepts/file-handling/imgs/img_9.png and /dev/null differ
diff --git a/docs/ff-concepts/file-handling/imgs/local-upload-to-firebase-supabase.avif b/docs/ff-concepts/file-handling/imgs/local-upload-to-firebase-supabase.avif
new file mode 100644
index 00000000..4610439d
Binary files /dev/null and b/docs/ff-concepts/file-handling/imgs/local-upload-to-firebase-supabase.avif differ
diff --git a/docs/ff-concepts/file-handling/imgs/save-blurhash.avif b/docs/ff-concepts/file-handling/imgs/save-blurhash.avif
new file mode 100644
index 00000000..54f0e38f
Binary files /dev/null and b/docs/ff-concepts/file-handling/imgs/save-blurhash.avif differ
diff --git a/docs/ff-concepts/file-handling/imgs/select-from-assets.avif b/docs/ff-concepts/file-handling/imgs/select-from-assets.avif
new file mode 100644
index 00000000..55bc4839
Binary files /dev/null and b/docs/ff-concepts/file-handling/imgs/select-from-assets.avif differ
diff --git a/docs/ff-concepts/file-handling/imgs/show-controls-disabled.avif b/docs/ff-concepts/file-handling/imgs/show-controls-disabled.avif
deleted file mode 100644
index e53279e7..00000000
Binary files a/docs/ff-concepts/file-handling/imgs/show-controls-disabled.avif and /dev/null differ
diff --git a/docs/ff-concepts/file-handling/imgs/show-controls-enabled.avif b/docs/ff-concepts/file-handling/imgs/show-controls-enabled.avif
deleted file mode 100644
index e1a94f20..00000000
Binary files a/docs/ff-concepts/file-handling/imgs/show-controls-enabled.avif and /dev/null differ
diff --git a/docs/ff-concepts/file-handling/imgs/start-audio-recording.avif b/docs/ff-concepts/file-handling/imgs/start-audio-recording.avif
new file mode 100644
index 00000000..762877dc
Binary files /dev/null and b/docs/ff-concepts/file-handling/imgs/start-audio-recording.avif differ
diff --git a/docs/ff-concepts/file-handling/imgs/stop-action.png b/docs/ff-concepts/file-handling/imgs/stop-action.png
deleted file mode 100644
index 0d1dea3a..00000000
Binary files a/docs/ff-concepts/file-handling/imgs/stop-action.png and /dev/null differ
diff --git a/docs/ff-concepts/file-handling/imgs/storage-bucket.avif b/docs/ff-concepts/file-handling/imgs/storage-bucket.avif
new file mode 100644
index 00000000..b5e6b36d
Binary files /dev/null and b/docs/ff-concepts/file-handling/imgs/storage-bucket.avif differ
diff --git a/docs/ff-concepts/file-handling/imgs/img.png b/docs/ff-concepts/file-handling/imgs/supabase-storage-bucket.png
similarity index 100%
rename from docs/ff-concepts/file-handling/imgs/img.png
rename to docs/ff-concepts/file-handling/imgs/supabase-storage-bucket.png
diff --git a/docs/ff-concepts/file-handling/imgs/upload-type-firebase.avif b/docs/ff-concepts/file-handling/imgs/upload-type-firebase.avif
new file mode 100644
index 00000000..b02f44be
Binary files /dev/null and b/docs/ff-concepts/file-handling/imgs/upload-type-firebase.avif differ
diff --git a/docs/ff-concepts/file-handling/imgs/upload-type-local-and-api.avif b/docs/ff-concepts/file-handling/imgs/upload-type-local-and-api.avif
new file mode 100644
index 00000000..3edc5b0a
Binary files /dev/null and b/docs/ff-concepts/file-handling/imgs/upload-type-local-and-api.avif differ
diff --git a/docs/ff-concepts/file-handling/imgs/upload-type-supabase.avif b/docs/ff-concepts/file-handling/imgs/upload-type-supabase.avif
new file mode 100644
index 00000000..551c1b28
Binary files /dev/null and b/docs/ff-concepts/file-handling/imgs/upload-type-supabase.avif differ
diff --git a/docs/ff-concepts/file-handling/imgs/use-blurhash.avif b/docs/ff-concepts/file-handling/imgs/use-blurhash.avif
new file mode 100644
index 00000000..22075461
Binary files /dev/null and b/docs/ff-concepts/file-handling/imgs/use-blurhash.avif differ
diff --git a/docs/ff-concepts/file-handling/pdf/_category_.json b/docs/ff-concepts/file-handling/pdf/_category_.json
deleted file mode 100644
index b9a86169..00000000
--- a/docs/ff-concepts/file-handling/pdf/_category_.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "label": "PDF",
- "position": 2
-}
\ No newline at end of file
diff --git a/docs/ff-concepts/file-handling/pdf/pdf-viewer.md b/docs/ff-concepts/file-handling/pdf/pdf-viewer.md
deleted file mode 100644
index 044294f2..00000000
--- a/docs/ff-concepts/file-handling/pdf/pdf-viewer.md
+++ /dev/null
@@ -1,161 +0,0 @@
----
-title: PdfViewer
-slug: /concepts/file-handling/pdf-viewer
-sidebar_position: 1
-tags: [Media, Widget]
-keywords: [Media, PdfViewer, Display PDF File]
----
-# PdfViewer
-The PdfViewer widget allows you to show the PDF file from uploaded assets or the URL link.
-
-## Adding PdfViewer Widget
-
-Here's how you can add the PdfViewer widget to your project:
-
-1. Drag the **PdfViewer** widget from the **Base Elements** tab (in the Widget Panel) or add it directly from the widget tree.
-2. Move to the Property Editor (on the right side of your screen) and scroll down to the **PDF Viewer** section.
-3. Find the **Network Path** property and enter the **URL** for the pdf file.
-
-:::info
-Every PdfViewer widget added to the project shows a default PDf from an online source.
-:::
-
-
-
-
-
-
-## Changing PDF Source
-
-By default, the widget is set to show the PDF file from Network. However, you can change this to use the PDF file uploaded directly to your app.
-
-Here's how you can change the PDF source:
-
-1. Select the **PdfViewer** widget from the widget tree or from the canvas area.
-2. Move to the Property Editor (on the right side of your screen) and scroll down to the **PDF Viewer** section.
-3. Find the **PDF Source** dropdown. Change it to **Asset**.
-4. Now, find the **PDF Asset** property, Click on the **Upload Pdf** button, select the pdf file and upload it.
-
-
-
-
-
-
-:::tip
-Once you upload the pdf file, you can use it throughout your app. You can manage your uploaded pdfs with the Project Media/Asset Manager.
-:::
-
-To use an uploaded pdf:
-
-1. Select the **PdfViewer** widget from the widget tree or from the canvas area.
-2. Move to the Property Editor (on the right side of your screen) and scroll down to the **PDF Viewer** section.
-3. Find the **PDF Source** dropdown. Change it to **Asset**.
-4. Click on **No asset selected** (inside the dropdown) and choose the pdf file.
-
-
-
-
-
-
-## Customizing
-
-You can customize the appearance and behavior of this widget using the various properties available under the properties panel.
-
-### Changing Scroll Direction
-
-By default, the PdfViewer allows you to scroll to the next pages in the vertical direction. However, you can change this behavior to allow scrolling in the horizontal direction.
-
-To change the scroll direction:
-
-1. Select the **PdfViewer** widget from the widget tree or from the canvas area.
-2. Move to the Property Editor (on the right side of your screen) and scroll down to the **PDF Viewer** section.
-3. Enable the **Horizontal Scroll**.
-
-
-
-
-
diff --git a/docs/ff-concepts/file-handling/upload-data.md b/docs/ff-concepts/file-handling/upload-data.md
deleted file mode 100644
index 28e59367..00000000
--- a/docs/ff-concepts/file-handling/upload-data.md
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: Upload Data
-slug: /concepts/file-handling/upload-data
-sidebar_position: 3
-tags: [Media, Upload Data]
-keywords: [Media, Upload Data, Firebase Storage, Supabase Storage]
----
-
-
-# Upload Data
-
-This section covers actions for uploading media such as photos, videos, PDFs, and Audio files.
-
-You can learn about adding each action by visiting the following pages.
-
-- [Upload/Save Media](upload-save-media.md)
-- [Upload/Save File](upload-save-file.md)
-
-## Types of upload
-
-To upload media, you have two options:
-
-### Firebase
-
-This will upload your media to [Firebase Storage](https://firebase.google.com/docs/storage). Once uploaded, you can directly use the ***Widget State > Uploaded File URL*** to preview media or save the URL.
-
-
-
-### Supabase
-
-Similar to Firebase, this will upload your media to the Supabase bucket (at a specific location that you specify). Once uploaded, you can directly use the ***Widget State > Uploaded File URL*** to preview media or save the URL.
-
-### Local Upload (Widget State)
-
-This will save your media to the device first. You can access it via ***Widget State > Uploaded Local File***. Then, make an API call to transfer the file to your server. **Note** that this API call must return the URL of the uploaded file, which you can later use to preview the media or store it somewhere in your database.
-
-
-## Web Access for PDFs and Other Files
-
-Some types of files require additional configuration to be accessed on the web. In particular, the PDF Viewer requires network files (such as uploaded PDFs) to allow what is called Cross-Origin Resource Sharing (CORS). Without diving too deep into that, the important part is that if you want users to be able to upload and view PDFs using Firebase Storage, follow the instructions below:
-
-**Put On Your Developer Hat**
-
-You'll need to run a few commands to get started. Don't worry though! No programming experience is required for this part, but you'll get to see how it's done 🙂
-
-:::note
-If you *do* have programming experience, you may find it easier to follow this guide instead: https://firebase.google.com/docs/storage/web/download-files#cors_configuration
-:::
-
-Start by finding the Project ID of your Firebase project. You can find that in the Firebase settings tab as seen below.
-
-
-
-Once you have that, follow these steps. Anywhere you see `*FIREBASE_PROJECT_ID*` , replace it with the project ID you found above:
-
-**Step 1**
-
-Go to the following link (remember to use your project ID): `https://console.cloud.google.com/home/dashboard?cloudshell=true&project=FIREBASE_PROJECT_ID`
-
-You'll see a view at the bottom that looks like this (you may have to hit "Continue"):
-
-
-
-Your Project ID should appear in yellow. If not, or if a different project is selected, you may have to tap on the down arrow (circled in red above) and select your project.
-
-**Step 2**
-
-Tap on the terminal (black screen), paste in the following command (again, replacing it with your Project ID ****in the last line), and hit *Enter* (or *Return*)**:**
-
-
-```
-touch cors.json && \
-echo [{\"origin\": [\"*\"], \"method\": [\"GET\"], \"maxAgeSeconds\": 3600}] > cors.json && \
-gsutil cors set cors.json gs://FIREBASE_PROJECT_ID.appspot.com
-```
-
-If you get a message to "Authorize Cloud Shell" make sure to hit "Authorize". Once the command runs it should give you an output similar to below. If so, it worked!
-
-
-
-And with that you are done! PDFs and other uploaded files will now load in the web with no issues!
\ No newline at end of file
diff --git a/docs/ff-concepts/file-handling/upload-save-file.md b/docs/ff-concepts/file-handling/upload-save-file.md
deleted file mode 100644
index 9e703441..00000000
--- a/docs/ff-concepts/file-handling/upload-save-file.md
+++ /dev/null
@@ -1,139 +0,0 @@
----
-title: Upload or Save File
-slug: /concepts/file-handling/upload-save-file
-sidebar_position: 4
-tags: [Media, Upload Data, File Management]
-keywords: [Media, Upload Data, Firebase Storage, Supabase Storage]
----
-
-
-
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-# Upload or Save File
-
-Using this action, you can upload any type of file to your app (e.g., PDF, MP3, etc.). You can store the file on [Firebase](https://firebase.google.com/docs/storage), [Supabase](https://supabase.com/docs/guides/storage) storage, or your own server using an API. Once uploaded, you can access the file through its generated URL. This URL can be used to display the content immediately or store it in a database for future retrieval.
-
-
-
-:::info[Prerequisites for Firebase]
-1. **Firebase** should be connected to your project. Follow the instructions on [**this page**](../../ff-integrations/database/cloud-firestore/getting-started.md) for integrating Firebase with FlutterFlow.
-2. **Firebase Authentication** must be properly configured. Check out [**this page**](../../ff-integrations/authentication/firebase-auth/auth-initial-setup.md) for setting up authentication.
-3. **Firebase Storage** must be set up and properly configured. It takes just a second! Follow the instructions on [**this page**](../../ff-integrations/storage/firebase-storage/storage-rules.md).
-4. At least one **Firebase Collection** should be configured for the project so that you can store the generated URL.
- :::
-
-
-:::info[Prerequisites for Supabase]
-
-1. Make sure to [**integrate Supabase**](../../ff-integrations/supabase/supabase-setup.md) into your app.
-2. [**Create a storage bucket**](https://supabase.com/docs/guides/storage/quickstart#create-a-bucket) in Supabase.
- **Tip**: To let anyone download the uploaded media, you can enable the 'Public bucket.'
-
-
-
-
-
-3. Apply additional [**security rules**](https://supabase.com/docs/guides/storage/quickstart#add-security-rules) which determine who can access the bucket. **Tip**: If you are uploading to a folder structure like this '*pics/uploads*,' here is how you can add a policy that allows only authenticated users to upload their profile picture.
-
-
-
-
-:::
-
-## Upload File: Tutorial
-
-Let's build a simple example that allows you to upload the PDF file. Here's how it looks:
-
-
-
-Building the upload file feature comprises the following steps:
-
-1. [Firebase only: deploying Firebase Storage rules](#1-firebase-only-deploying-firebase-storage-rules)
-2. [Optional: enabling Web access](#2-optional-enabling-web-access)
-3. [Adding Upload/Save File action](#3-adding-uploadsave-file-action)
-4. [Preview uploaded file](#4-preview-uploaded-file)
-
-### 1. Firebase only: deploying Firebase Storage rules
-
-Firebase storage rules define who can access the uploaded file. It is essential to set up and deploy the rules before getting started. First, you must enable the *Firebase Storage* on the *Firebase Console* and then deploy its security rules. You can do this from right inside *FlutterFlow*.
-
-Check [**how to deploy the Firebase Storage rules**](../../ff-integrations/storage/firebase-storage/storage-rules.md).
-
-### 2. Optional: enabling Web access
-
-If you plan to support the web version of your app or want to test the PDF upload feature in the *Run* Mode, you need to complete an additional configuration that is required for some file types, such as PDF, to work. Learn how to [enable web access](upload-data.md#web-access-for-pdfs-and-other-files).
-
-### 3. Adding Upload/Save File action
-
-Go to your project page on FlutterFlow and follow the steps below to define the action to any widget.
-
-1. Select the **Widget** (e.g., Button) on which you want to add the action.
-2. Select **Actions** from the Properties panel (the right menu), and click **Open**. This will open an **Action Flow Editor** in a new popup window.
-3. Click on the **+ Add Action**.
-4. Search and select the **Upload/Save File** (under *Utilities > Upload Data*) action.
-5. If you haven't integrated Firebase or Supabase yet, the default upload type will be **[Store media for upload](upload-data.md#local-upload-widget-state)**. However, once integrated, you can choose the **Upload Type** as [Firebase](upload-data.md#firebase), [Supabase](upload-data.md#supabase) or [Local (Widget State)](upload-data.md#local-upload-widget-state).
-6. Use the **File Type** dropdown to specify whether you want to upload a **PDF**, **Audio (MP3),** **ANY,** or **Uploaded Media**. The *Uploaded Media* option is there for uploading the media stored on the device. If you choose **Uploaded Media**, ensure you add one more same action (before this action) with **Upload Type** set to [**Local Upload (Widget State)**](upload-data.md#local-upload-widget-state).
-7. You can **Allow multiple Files** to be uploaded. After the multiple files are uploaded, you can access them via *Set from Variable menu > Widget State > Uploaded File URLs (`List `).*
-8. To let users know whether the file is still being uploaded, you can enable the 'Show Snackbar' option.
-9. In *Upload Type*,
- 1. If you selected ***Firebase***, you must [deploy the storage rules](../../ff-integrations/storage/firebase-storage/storage-rules.md).
- 2. If you selected **Supabase**, provide the **Bucket Name** and set the **Uploaded Folder Path** (e.g., attachments/pdfs). This is the path where the files will be uploaded.
- 3. If you selected ***Local Upload (Widget State)**,* you probably want to store the file on the device first and then upload it to your backend server via API. To do so, add the next action as an [**API call**](../../resources/control-flow/backend-logic/api/create-test-api-calls.md) and select the API that will upload the file to your server. **Note** that the request body for this API must be in *Multipart* format. See how to [configure an API for the multipart request body](../../resources/control-flow/backend-logic/api/rest-api.md). **Tip**: When this type is selected, you have an option to directly display the PDF before it gets uploaded to your server; see [here](#41-access-file-from-bytes-in-memorynot-yet-uploaded).
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-### 4. Preview uploaded file
-
-Once the file is uploaded, you get the uploaded file URL. You can use it to display the content inside the supported widget.
-
-Here is an example showing a PDF file in a PdfView widget.
-
-1. Select the **PdfViewer** widget from the widget tree or from the canvas area.
-2. Move to the **Properties Panel** (on the right side of your screen) and scroll down to the **PDF Viewer** section.
-3. Find the **Network Path** and click on the **Set from Variable**.
-4. For media uploaded on **Firebase** or **Supabase**, select the **Source** as ***Widget State*** > ***Uploaded File URL***.
-5. For media uploaded via **API**, select the **Source** as **Action Outputs > [Action Output Variable Name] (Api Response)**. This should be the response of the API that was used to upload the file, and it must contain the URL of the uploaded file. To retrieve the url from API response, see how to [use JSON path](../../resources/control-flow/backend-logic/api/rest-api.md).
-6. You can display the placeholder until the current file is uploaded. To do so, click the **Set from Variable** and specify a placeholder URL under the **Default Value** property.
-7. Click on **Confirm**.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-#### 4.1 Access file from bytes (in memory/not yet uploaded)
-
-If you simply wish to display a PDF within your app without uploading it anywhere, or if you'd like to preview the PDF before sending it to your server through an API, you can achieve this by configuring the **PDF Source** as **Uploaded File** and specifying the **Uploaded File** source as **Widget State -> Uploaded Local File**.
-
-
-
diff --git a/docs/ff-concepts/file-handling/upload-save-media.md b/docs/ff-concepts/file-handling/upload-save-media.md
deleted file mode 100644
index ac45fb2e..00000000
--- a/docs/ff-concepts/file-handling/upload-save-media.md
+++ /dev/null
@@ -1,382 +0,0 @@
----
-title: Upload or Save Media
-slug: /concepts/file-handling/upload-save-media
-sidebar_position: 5
-tags: [Media, Upload Data, File Management]
-keywords: [Media, Upload Data, Firebase Storage, Supabase Storage]
----
-
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-
-# Upload or Save Media
-
-This action allows you to easily upload a photo or video to your app. You have the flexibility to store the file on [Firebase](https://firebase.google.com/docs/storage), [Supabase](https://supabase.com/docs/guides/storage) storage, or your own server using an API. Once uploaded, you can access the file through its generated URL. This URL can be used to display the content immediately or store it in a database for future retrieval.
-
-
-
-
-
-
-
-:::info[Prerequisites for Firebase]
-1. **Firebase** should be connected to your project. Follow the instructions on [**this page**](../../ff-integrations/database/cloud-firestore/getting-started.md) for integrating Firebase with FlutterFlow.
-2. **Firebase Authentication** must be properly configured. Check out [**this page**](../../ff-integrations/authentication/firebase-auth/auth-initial-setup.md) for setting up authentication.
-3. **Firebase Storage** must be set up and properly configured. It takes just a second! Follow the instructions on [**this page**](../../ff-integrations/storage/firebase-storage/storage-rules.md).
-4. At least one **Firebase Collection** should be configured for the project so that you can store the generated URL.
- :::
-
-
-:::info[Prerequisites for Supabase]
-
-1. Make sure to [**integrate Supabase**](../../ff-integrations/supabase/supabase-setup.md) into your app.
-2. [**Create a storage bucket**](https://supabase.com/docs/guides/storage/quickstart#create-a-bucket) in Supabase.
- **Tip**: To let anyone download the uploaded media, you can enable the 'Public bucket.'
-
-
-
-
-
-3. Apply additional [**security rules**](https://supabase.com/docs/guides/storage/quickstart#add-security-rules) which determine who can access the bucket. **Tip**: If you are uploading to a folder structure like this '*pics/uploads*,' here is how you can add a policy that allows only authenticated users to upload their profile picture.
-
-
-
-
-:::
-
-
-## Adding Upload/Save Media action
-
-Follow the steps below to add this action to any widget.
-
-1. Select the **Widget** (e.g., Button) on which you want to add the action.
-2. Select **Actions** from the **Properties Panel** (the right menu), and click **Open**. This will open an **Action Flow Editor** in a new popup window. If it's the first action, click **+ Add Action** button. Otherwise, click the "**+**" button below the previous action tile and select **Add Action**.
-3. Search and select the **Upload/Save Media** (under *Utilities > Upload Data*) action.
-4. If you haven't integrated Firebase or Supabase yet, the default upload type will be **[Store media for upload](upload-data.md#local-upload-widget-state)**. However, once integrated, you can choose the **Upload Type** as [Firebase](upload-data.md#firebase), [Supabase](upload-data.md#supabase) or [Local (Widget State)](upload-data.md#local-upload-widget-state).
-5. Use the **Media Type/Source** to specify whether you want to upload a photo or a video, or both using this action.
-6. Using **Media Source** dropdown, you can choose between ***Camera***, ***Gallery**,* and ***Either Camera or Gallery*** (this option will bring up a bottom sheet from where the user can choose the media source as Camera or Gallery) and **Uploaded Media**. If you choose **Uploaded Media**, ensure you add one more same action (before this action) with **Upload Type** set to **Local Upload (Widget State)**.
-7. If you are uploading a photo, you can set a maximum width and height for it by using the **Max Width** and **Max Height** properties, respectively. This will modify the image dimension by maintaining the photo's aspect ratio.
-8. You can control the **Image Quality** by using the slider or directly entering the value. The value must be 0 to 100, where 100 is the original quality.
-9. To retrieve the uploaded media's dimensions, i.e., width and height, enable **Include Media Dimension**. This computation is expensive, so be sure before you enable it.
-10. Use the **Source Picker Style** to tailor the appearance of the bottom sheet UI that opens when selecting either *Camera* or *Gallery*.
-11. You can **Allow multiple images**. Note that for this to work, the *Media Source* must be set to only *Gallery*. After the multiple images are uploaded, you can access them via *Set from Variable menu > Widget State > Uploaded File URLs (`List `).*
-12. To let users know whether the image is still uploading, you can enable the **Show Snack bar**.
-13. If you selected *Either Camera or Gallery*, you would be presented with a few more properties to define the **Source Picker Style** (the bottom sheet design). You can specify the ***Font Family***, ***Text Color***, and ***Background Color*** of the bottom sheet.
-14. In *Upload Type*:
- 1. If you selected ***Firebase***, you must [deploy the storage rules](../../ff-integrations/storage/firebase-storage/storage-rules.md).
- 2. If you selected **Supabase**, provide the **Bucket Name** and set the **Uploaded Folder Path** (e.g., pics/uploaded). This is the path where the media will be uploaded.
- 3. if you selected ***Local (Widget State)**,* you probably want to upload the media to your backend server via API. To do so, add the next action as an **API call** and select the API that will upload the file to your server. **Note** that the request body for this API must be in *Multipart* format. See how to [configure an API for the multipart request body](../../resources/control-flow/backend-logic/api/rest-api.md). **Tip**: When this type is selected, you have an option to directly display the image before it gets uploaded to your server; see [here](#display-images-from-bytes-in-memorynot-yet-uploaded).
-15. Once you have uploaded the media, see how to display it on a widget in the [next section](#showing-uploaded-media).
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-### Showing uploaded media
-
-For displaying the media on the same page from where the **Upload/Save Media Action** is called, follow the steps below:
-
-1. Drag and drop the appropriate widget that can display the uploaded media. For example, to display uploaded photo, you can use the **Image** widget. Similarly, for video, use the **VideoPlayer** widget.
-2. Move to the properties panel, set its **Type** to **Network**, and click **Set from Variable**.
-3. For media uploaded on **Firebase** or **Supabase**, select the **Source** as ***Widget State*** > ***Uploaded File URL***.
-4. For media uploaded via **API**, select the **Source** as **Action Outputs > [Action Output Variable Name] (Api Response)**. This should be the response of the API that was used to upload the media, and it must contain the URL of the uploaded media. To retrieve the URL from API response, see how to [use JSON path](../../resources/control-flow/backend-logic/api/rest-api.md).
-5. To show the placeholder image/video until the current one is uploaded, click the **Set from Variable** and specify a placeholder image/video URL under the **Default Value** property.
-6. Click on **Confirm**.
-
-:::tip
-To ensure smooth functionality, it's important to provide a **Default Value** when displaying media on the same page as the upload action. Without it, you may encounter errors during app runtime due to an initially empty URL. Once this action is triggered and the media is successfully stored on Firebase/Supabase Storage, the URL becomes accessible.
-:::
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-#### Display images from bytes (in memory/not yet uploaded)
-
-If you simply wish to display an image within your app without uploading it anywhere, or if you'd like to preview the image before sending it to your server through an API, you can achieve this by configuring the **Image Type** as **Uploaded File** and specifying the **Uploaded File** source as **Widget State -> Uploaded Local File**.
-
-
-
-
-### Storing the uploaded media URL
-
-You should store the uploaded media URL in your database (Firebase collection or database table) so that you can easily access it later inside the app.
-
-#### Save URL in Firebase collection
-
-To save URL in a Firebase collection:
-
-1. Ensure you have a **field** that can store a photo or video path, for example, `photo_url (Data Type: Image Path)` or `video_url (Data Type: Video Path)`.
-2. Now use the Firebase [Create](../../ff-integrations/database/cloud-firestore/firestore-actions.md#create-document-action)/[Update](../../ff-integrations/database/cloud-firestore/firestore-actions.md#update-document-action) document action to store the URL in a field.
-
-:::note
-While choosing *Value Source*, you can set either *Widget State > Uploaded File URL* or directly choose *Uploaded Photo/Video*.
-:::
-
-
-
- 
- Saving uploaded URL in Firestore document
-
-
-
- 
- Saving uploaded URL in Firestore document
-
-
-
- 
- Saving uploaded URL in Firestore document
-
-
-#### Save URL via backend API
-
-You can use your backend AP to store the URL, like you would do for any other data.
-
-
-
-### Adding BlurHash
-
-BlurHash is a new and innovative way of generating image placeholders that are both compact and visually appealing. When you're scrolling through a web or mobile app, you may have noticed that some images take longer to load. This can be frustrating and disrupt the user experience. That's where BlurHash comes in - it provides a way to display a blurred version of the image that looks similar to the original while the real image is loading in the background.
-
-With BlurHash, you can create more visually appealing and contextually relevant placeholders that better reflect the content of the image being loaded. It can be used in a variety of contexts, from photo galleries and social media apps to e-commerce and news apps.
-
-Here's how it looks when images are loaded with BlurHash:
-
-
- 
- Using BlurHash to display cat images
-
-
-Here are the steps to generate and use the BlurHash:
-
-1. [Generate BlurHash](#generate-blurhash)
-2. [Save BlurHash](#save-blurhash)
-3. [Use BlurHash](#use-blurhash)
-
-#### Generate BlurHash
-
-There is no separate action to generate the Blurhash. Instead, you can generate it using the **Upload/Save Media** action. From the page where you upload the image, use this action and simply enable the **Include Blur Hash** option. This will automatically create a Blurhash for the image being uploaded.
-
-
-
-
-
-#### Save BlurHash
-
-The generated BlurHash is accessible via the **Widget State > Uploaded Local File > Media Blur Hash**. Before you use the BlurHash, It is recommended to store it in the same collection or table where you save the image URL for convenient access.
-
-
- 
- Collection schema to store BlurHash
-
-
-Here's how you access and save the BlurHash in a Firebase collection using [**create document**](../../ff-integrations/database/cloud-firestore/firestore-actions.md#create-document-action) action:
-
-
-
-
-
-
-
-:::tip
-You can also create a [**custom data type**](../../resources/data-representation/custom-data-types.md) called 'image' and then add two fields such as 'image_url' and 'image_blurhash' like this:
-
-
- 
- Custom data type to store image URL and BlurHash
-
-:::
-
-#### Use BlurHash
-
-To use BlurHash, select the **Image** widget, move to the **properties panel**, enable the **Use Blur Hash** option, and then set the **Blur Hash String** value from a variable.
-
-
-
-
\ No newline at end of file
diff --git a/docs/ff-concepts/file-handling/uploading-files.md b/docs/ff-concepts/file-handling/uploading-files.md
new file mode 100644
index 00000000..ccc3e743
--- /dev/null
+++ b/docs/ff-concepts/file-handling/uploading-files.md
@@ -0,0 +1,223 @@
+---
+slug: /concepts/file-handling/uploading-files
+title: Uploading Files
+description: Learn how to upload media in FlutterFlow.
+tags: [Media Files, Upload Data]
+sidebar_position: 1
+keywords: [Media Files, Upload Data, Media Management, Firebase, Supabase, Upload Actions]
+---
+
+# Uploading Files
+
+Uploading files is an essential feature for many apps, enabling users to share images, videos, documents, and more. FlutterFlow offers flexible actions to handle file uploads, whether you’re using Firebase, Supabase, or your own backend server. You can customize the upload process to suit your app’s needs, such as resizing media, setting quality, or temporarily storing files locally before uploading.
+
+This guide covers the available upload methods, configuration options, and workflows, including how to save media locally and upload it via an API.
+
+## Types of Media Uploads
+
+FlutterFlow provides three methods for uploading media files, each catering to different needs:
+
+### Firebase
+
+Media files can be uploaded directly to **Firebase Storage**, a reliable cloud-based solution. Once the upload is complete, you can use the **Widget State > Uploaded File URL** to preview the media or store the file URL for later use.
+
+
+
+### Supabase
+
+You can upload media to a **Supabase bucket** at a specified location. After the upload, the file's URL is accessible via **Widget State > Uploaded File URL**, enabling you to preview the media or save the URL for later use in your app.
+
+
+
+### Local Upload (Widget State)
+
+This method initially stores your media on the device, making it accessible via **Widget State > Uploaded Local File**. You can preview, edit, or process the file before uploading it to a cloud storage.
+
+
+
+## Upload or Save Media [Action]
+
+This action allows you to upload a photo or video to your app. You can choose to store the file on [Firebase](#firebase), [Supabase](#supabase) storage, or your own server using an API. Once uploaded, you can access the file through its generated URL. This URL can be used to display the content immediately or store it in a database for future retrieval.
+
+:::info[Prerequisites for Firebase]
+1. **Firebase** should be connected to your project. Follow the instructions on [**this page**](../../ff-integrations/database/cloud-firestore/getting-started.md) for integrating Firebase with FlutterFlow.
+2. **Firebase Authentication** must be properly configured. Check out [**this page**](../../ff-integrations/authentication/firebase-auth/auth-initial-setup.md) for setting up authentication.
+3. **Firebase Storage** must be set up and properly configured. It takes just a second! Follow the instructions on [**this page**](../../ff-integrations/storage/firebase-storage/storage-rules.md).
+4. At least one **Firebase Collection** should be configured for the project so that you can store the generated URL.
+:::
+
+
+:::info[Prerequisites for Supabase]
+1. Make sure to [**integrate Supabase**](../../ff-integrations/supabase/supabase-setup.md) into your app.
+2. [**Create a storage bucket**](https://supabase.com/docs/guides/storage/quickstart#create-a-bucket) in Supabase. By default, the **Public bucket** option is disabled, meaning uploaded media is not accessible by anyone without authentication. If needed, you can enable the Public bucket option, but this is not recommended for sensitive content.
+
+
+
+
+
+3. Apply additional [**security rules**](https://supabase.com/docs/guides/storage/quickstart#add-security-rules) which determine who can access the bucket. **Tip**: If you are uploading to a folder structure like this '*pics/uploads*,' here is how you can add a policy that allows only authenticated users to upload their profile picture.
+
+
+
+:::
+
+To create an upload media workflow, add the **Upload/Save Media** action to the widget (e.g., a button or any interactive element) where you want users to initiate the file upload. Next, set the [**Upload Type**](#types-of-media-uploads). In the **Media Type/Source** section, specify the type of media to upload: photo, video, or both. Then, use the **Media Source** dropdown to choose the source of the media:
+
+- **Camera**: Directly capture media using the device's camera.
+- **Gallery**: Select existing media from the device's gallery.
+- **Either Camera or Gallery**: Allows users to choose the source via a bottom sheet, letting them select either the camera or the gallery as the media source.
+
+Once the media is uploaded, see how to display it on a widget in the [next section](displaying-media.md).
+
+:::info
+
+When you set **Upload Type** to:
+
+- **Firebase**: You must [**deploy the storage rules**](../../ff-integrations/storage/firebase-storage/storage-rules.md).
+- **Supabase**: Provide the **Bucket Name** and set the **Uploaded Folder Path** (e.g., pics/uploaded). This is the path where the media will be uploaded.
+
+:::
+
+
+
+
+
+
+
+The Upload Media action offers various settings to control how media files are uploaded, resized, and processed in your app. Below is a breakdown of all the available properties.
+
+
+
+- **Max Width** and **Max Height**: If you are uploading a photo, you can set a maximum width and height using these properties. This resizes the image while maintaining its original aspect ratio.
+- **Image Quality**: Control the image quality by adjusting the slider or entering a value between 0 and 100, where 100 retains the original quality.
+- **Include Media Dimensions**: Enable this option to retrieve the dimensions (width and height) of the uploaded media. Keep in mind that this operation is resource-intensive, so enable it only if necessary.
+- **Include Blur Hash**: Automatically generates a BlurHash for the uploaded image, allowing you to display a blurred placeholder while the full image loads. For more information, refer to the [BlurHash](displaying-media.md#blurhash) section.
+- **Source Picker Style**: Customize the appearance of the bottom sheet UI that appears when selecting a media source (e.g., Camera or Gallery).
+- **Allow Multiple Images**: Enable this option to allow users to select multiple images. Note that this requires the **Media Source** to be set to **Gallery**. Once multiple images are uploaded, you can access their URLs via **Set from Variable menu > Widget State > Uploaded File URLs (`List`)**.
+- **Show Snackbar**: Enable this option to notify users about the upload progress with a snackbar message.
+
+Check out our YouTube video for a detailed explanation of the **Upload or Save Media [Action]** in FlutterFlow.
+
+
+
+
+
+
+
+### Store Media for Upload
+
+You can also save the media file temporarily on the device before uploading it to cloud storage by setting the **Upload Type** to [**Local Upload**](#local-upload-widget-state). This saves the file in Bytes, allowing you to preview, edit, or process it before finalizing the upload.
+
+Once the file is uploaded to the device, you can do the following:
+
+- **Preview or Validate the Media**: Show the user an in-app preview before they decide whether to finalize or discard the upload.
+
+- **Editing Before Submission**: In social media apps, users upload photos for posts or stories. The app temporarily saves the image on the device while users edit or apply filters, and then uploads the final image to cloud storage.
+- **Perform Data Operations**: In document scanning apps, users capture images of documents, which are temporarily stored on the device. The app accesses the file bytes to apply OCR (Optical Character Recognition), enhance contrast, or convert the image to PDF before uploading the final processed file to cloud storage.
+- **Offline Functionality**: Store the media locally and defer uploading until the user regains internet access.
+- **Upload to Server**: When you want to store the file externally, you can then make an API call (e.g., multipart form data) to transfer the local file. Be sure to retrieve and save the resulting file URL in your database if you plan to display it later.
+
+Here are some examples of uploading a file to a device and using it in different scenarios:
+
+**Example 1: Upload to Your Backend Server via API**
+
+First, set the **Upload/Save Media** action with the **Local Upload (Widget State)** upload type. Then, add the next action as an **API call** and select the API that will upload the file to your server. After the API call is complete, ensure your server returns the uploaded file's URL. Use this URL to save in the database or [display the uploaded image](displaying-media.md).
+
+:::info
+The request body for the API must be in *Multipart* format. See how to [**configure an API for the multipart request body**](../../resources/control-flow/backend-logic/api/rest-api.md#multipart-format).
+:::
+
+
+
+
+
+
+
+**Example 2: Compress Image Using Custom Action**
+
+First, configure the **Upload/Save Media** action with the **Local Upload (Widget State)** upload type. This temporarily saves the media file on the device.
+
+Next, create and add a [**Custom Action**](../../ff-concepts/adding-customization/custom-actions.md) (e.g., `compressImageAction`) that takes the locally stored file as input and compresses it using its **bytes** data. Ensure the custom action processes the image and returns a compressed file. Once compressed, the file can then be uploaded to cloud storage using another **Upload/Save Media** action.
+
+
+
+**Example 3: Upload to Firebase or Supabase**
+
+First, configure the **Upload/Save Media** action with the **Local Upload (Widget State)** upload type. Once the file is modified or processed, add another **Upload/Save Media** action to the widget that confirms the final upload. Set the **Upload Type** to **Firebase** or **Supabase**, choose **File Type** as the **Uploaded File**, and select **File to Upload** from **Widget State > Uploaded Local File**.
+
+
+
+
+## Upload or Save File [Action]
+
+You can upload any type of file to your app, such as PDFs, MP3s, and more. The process for uploading files is almost similar to the [Upload or Save Media Action](#upload-or-save-media-action).
+
+:::info[Web access for PDF files]
+
+If you plan to support the web version of your app or test the PDF upload feature in **Run Mode**, you’ll need to complete additional configuration steps required for certain file types (e.g., PDFs). Learn how to [**enable web access**](displaying-media.md#web-access-for-pdfs-and-other-files).
+
+:::
\ No newline at end of file
diff --git a/docs/ff-concepts/file-handling/video/_category_.json b/docs/ff-concepts/file-handling/video/_category_.json
deleted file mode 100644
index 9cb05936..00000000
--- a/docs/ff-concepts/file-handling/video/_category_.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "label": "Video",
- "position": 1
-}
\ No newline at end of file
diff --git a/docs/ff-concepts/file-handling/video/video-player.md b/docs/ff-concepts/file-handling/video/video-player.md
deleted file mode 100644
index 33682d18..00000000
--- a/docs/ff-concepts/file-handling/video/video-player.md
+++ /dev/null
@@ -1,271 +0,0 @@
----
-title: VideoPlayer
-slug: /concepts/file-handling/video-player
-sidebar_position: 0
-tags: [Media, Widget]
-keywords: [Media, VideoPlayer, Play Video]
----
-
-# VideoPlayer
-
-The VideoPlayer widget is used to show video from uploaded assets or the URL link. The VideoPlayer widget can play various video formats that include but are limited to MP4, MOV, WAV, MPEG, JPEG motion photo, and so on.
-
-## Adding VideoPlayer Widget
-
-Here's how you can add the VideoPlayer widget to your project:
-
-1. Drag the **VideoPlayer** widget from the **Base Elements** tab (in the Widget Panel) or add it directly from the widget tree.
-2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Video Player** section.
-3. Find the **Path** property and enter the **URL** for the new video.
-
-:::info
-By default, every VideoPlayer widget added to the project will show a sample video from a network URL.
-:::
-
-
-
-
-
-
-## Changing the Video Type
-
-By default, the widget is set to play a video from the internet. However, you can change this to use the video uploaded directly to your app.
-
-Here's how you can change the Video Type:
-
-1. Select the **VideoPlayer** widget from the widget tree or from the canvas area.
-2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Video Player** section.
-3. Find the **Video Type** dropdown. Click on **Network** (inside the dropdown) and select **Asset**.
-4. Now, find the **Asset Video** property, Click on the **Upload Video** button, select the video and upload it.
-
-
-
-
-
-
-If you want to use the same video multiple times in your app, you don't need to upload the same video multiple times. You can use the uploaded video for other VideoPlayer widgets as well.
-
-:::tip
-Once you upload the video, you can use it throughout your app. You can manage your uploaded videos with the Project Media Asset Manager.
-:::
-
-To use the uploaded video:
-
-1. Select the **VideoPlayer** widget from the widget tree or from the canvas area.
-2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Video Player** section.
-3. Find the **Video Type** dropdown. Click on **Network** (inside the dropdown) and select **Asset**.
-4. Click on **No asset select** (inside the dropdown) and choose the video.
-
-## Customization
-
-You can customize the appearance of this widget using the various properties available under the properties panel.
-
-### Setting Aspect Ratio
-
-Setting the *Aspect Ratio* to the VideoPlayer allows you to show video in a specific aspect ratio. The height of the widget is determined by applying the given aspect ratio to the width, expressed as a ratio of width to height. For example, setting the value of 1.7 will show the video in a 16:9 aspect ratio.
-
-To set the aspect ratio:
-
-1. Select the **VideoPlayer** widget from the widget tree or from the canvas area.
-2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Video Player** section.
-3. Find the **Aspect Ratio** property, if you want to set the aspect ratio of 16:9, enter the value as 1.7 (Simply divide the 16 by 9).
-
-:::tip
-Try changing the width of VideoPlayer and the height will be adjusted as per the aspect ratio.
-:::
-
-
-
-
-
-
-### Controlling the AutoPlay
-
-The *AutoPlay* property allows you to configure whether the video should start playing as soon as it loads. By default, this property is disabled and you have to click on the play button to start watching the video.
-
-To enable/disable auto-playing a video:
-
-1. Select the **VideoPlayer** widget from the widget tree or from the canvas area.
-2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Video Player** section.
-3. Enable the **Auto Play** property.
-
-### Enable or Disable Looping of Video
-
-The Loop Video property allows you to configure whether the video should start playing again after it ends. By default, this property is enabled and the video keeps on playing after it ends.
-
-To enable/disable the looping of video:
-
-1. Select the **VideoPlayer** widget from the widget tree or from the canvas area.
-2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Video Player** section.
-3. Find the **Loop Video** property, enable or disable to change the looping video behavior.
-
-### Show or Hide Video Controls
-
-The *Show Controls* property allows you to configure whether the player should show the controls over the video such as play-pause button, seek bar, and so on. By default, this property is enabled and all the video controls are visible over the video.
-
-To show/hide video controls:
-
-1. Select the **VideoPlayer** widget from the widget tree or from the canvas area.
-2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Video Player** section.
-3. Find the **Show Controls** property, Use it to show or hide controls over the video.
-
-
-
-
-
-
-### Controlling Full Screen
-
-The *Allow Full Screen* property allows you to configure whether the player should show the full-screen icon in video controls. By default, this property is enabled and users can open video in full-screen mode by tapping the full-screen icon at the bottom right corner of the player.
-
-To enable/disable full-screen icon:
-
-1. Select the **VideoPlayer** widget from the widget tree or from the canvas area.
-2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Video Player** section.
-3. Find the **Allow Full Screen** property, checkmark/uncheck to show/hide the full-screen mode icon.
-
-
-
-
-
-
-### Showing Playback Speed Menu
-
-The *Include Speed Playback Menu* property allows you to configure whether the player should show the playback speed menu. The playback speed menu helps users to increase or decrease the speed of the video. By default, this property is disabled.
-
-To show the playback speed menu:
-
-1. Select the **VideoPlayer** widget from the widget tree or from the canvas area.
-2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Video Player** section.
-3. Find the **Include Playback Speed Menu** property, checkmark it (click on it).
-
-
-
-
-
\ No newline at end of file
diff --git a/docs/ff-concepts/file-handling/video/youtube-player.md b/docs/ff-concepts/file-handling/video/youtube-player.md
deleted file mode 100644
index 7fb6a17e..00000000
--- a/docs/ff-concepts/file-handling/video/youtube-player.md
+++ /dev/null
@@ -1,127 +0,0 @@
----
-title: YoutubePlayer
-slug: /concepts/file-handling/youtube-player
-sidebar_position: 1
-tags: [Media, Widget]
-keywords: [Media, YoutubePlayer, Play YouTube Video]
----
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-# YoutubePlayer
-
-The **YouTubePlayer** widget in FlutterFlow allows you to seamlessly integrate and play YouTube videos within your app. It offers customizable playback options and an intuitive interface for enhancing the user experience.
-
-## Adding YoutubePlayer Widget
-
-To add the YoutubePlayer widget in your project:
-
-Simply drag the **YoutubePlayer** widget from the **Base Elements** tab (in the Widget Panel) or add it directly from the widget tree.
-
-
-
-
-
-
-## Setting The Video URL
-
-The YoutubePlayer widget uses Youtube's video URL to play the video. When you add the YoutubePlayer to your app, by default the URL is set to play a random video. You can change the Video URL by using the URL property.
-
-To set the Youtube Video URL:
-
-1. Select the **YoutubePlayer** from the widget tree or from the canvas area.
-2. Move to the Property Editor and scroll down to the **Youtube Player** section.
-3. Find the **URL** property and enter the **URL** for the new video.
-
-
-
-
-
-
-
-## Control Looping Video
-
-By default, The Youtube video starts playing again after it is finished playing. You can change this behavior using the Loop Video property.
-
-To control looping:
-
-1. Select the **YoutubePlayer** from the widget tree or from the canvas area.
-2. Move to the Property Editor and scroll down to the **Youtube Player** section.
-3. Find the **Loop Video** property, keep it checked for looping the video or uncheck to stop looping. Click on it.
-
-## Muting The Video
-
-To mute the video:
-
-1. Select the **YoutubePlayer** from the widget tree or from the canvas area.
-2. Move to the Property Editor and scroll down to the **Youtube Player** section.
-3. Find the **Mute Video** property and click to checkmark it.
-
-## Enable or Disable Video Controls
-
-By default, when the video is being played, different controls are shown such as volume, play-pause, subtitles, fullscreen. You can enable or disable these controls using the *show controls* property.
-
-To enable or disable video controls:
-
-1. Select the **YoutubePlayer** from the widget tree or from the canvas area.
-2. Move to the Property Editor and scroll down to the **Youtube Player** section.
-3. Find the **Show Controls** property, keep it checked to show controls, or uncheck to hide the controls.
-4. (Optional) To disable the fullscreen control, uncheck the **Show Full Screen Control**.
-
-Here's how it looks on enabling and disabling the Controls:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/ff-concepts/layout/responsive-layout.md b/docs/ff-concepts/layout/responsive-layout.md
index d9f99ee0..4189caf8 100644
--- a/docs/ff-concepts/layout/responsive-layout.md
+++ b/docs/ff-concepts/layout/responsive-layout.md
@@ -196,4 +196,58 @@ To implement this, we can go to its widget properties and toggle the device icon
And now you have a more responsive screen for this shopping app use case that looks good in both mobile and desktop formats.
-With these adjustments, your shopping app now boasts a highly responsive screen that seamlessly adapts to both mobile and desktop formats. This ensures an optimal user experience across all devices, maintaining both functionality and aesthetic appeal.
\ No newline at end of file
+With these adjustments, your shopping app now boasts a highly responsive screen that seamlessly adapts to both mobile and desktop formats. This ensures an optimal user experience across all devices, maintaining both functionality and aesthetic appeal.
+
+## Responsive Value
+
+**Responsive Values** allow you to define different property values, such as widths, heights, font sizes, or padding, for different device sizes (mobile, tablet, desktop, and wide). At runtime, your app evaluates the screen width and automatically applies the appropriate value based on your configurations.
+
+:::info[possible use cases]
+
+- **Adaptive Layouts**: Automatically adjust element sizes to deliver a consistent UI across devices.
+- **Better Readability**: Increase font size on larger screens to improve legibility.
+- **Improved Spacing**: Use different padding or margins on tablets and desktops to optimize content flow.
+
+:::
+
+To set a responsive value, select a widget and choose a property that supports responsiveness. Click **Set from Variable > Responsive Value**, then enter different values for each screen size:
+
+- Mobile (below `Breakpoint Small`)
+- Tablet (below `Breakpoint Medium`)
+- Desktop (below `Breakpoint Large`)
+- Wide (above `Breakpoint Large`)
+
+As you preview on different devices, the property will automatically adjust based on the selected screen size.
+
+:::tip[Customizing Breakpoints]
+
+You can adjust the default screen size breakpoints (mobile, tablet, desktop, wide) in FlutterFlow’s Theme Settings. See how to [**Customize Breakpoints**](#customize-responsive-breakpoints).
+
+:::
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/ff-concepts/localization-accessibility/accessibility.md b/docs/ff-concepts/localization-accessibility/accessibility.md
index 6f60424a..83f148a9 100644
--- a/docs/ff-concepts/localization-accessibility/accessibility.md
+++ b/docs/ff-concepts/localization-accessibility/accessibility.md
@@ -24,7 +24,7 @@ Here are some key accessibility features you can use:
## Semantic Label
-You can use **Semantic Labels** to provide custom descriptions, hints, or to emphasize the importance of specific parts of the widget tree. This ensures that screen reader users receive clear and meaningful information about each widget more effectively.
+**Semantic Labels** enhance your app’s accessibility and SEO by providing meaningful context about widgets for screen readers and search engines. These descriptions are especially helpful for users relying on assistive technologies.
For example, in an e-commerce app, you can add a semantic label to an '*Add to Bag*' button with a message like '*Add the selected item to cart*', which helps users better understand the button's action.
@@ -37,7 +37,7 @@ To add a semantic label for any widget, select the widget, move to the propertie
height: 0,
width: '100%'}}>
+
+
+
+
+
+This key uniquely identifies your app and will be required later when setting up your FlutterFlow configuration.
+
+**2. Set up Redirect Links**
+
+In the Branch dashboard, you’ll find settings to define fallback URLs — these determine where users are sent if your app isn’t installed. Typically, you would redirect users to the App Store, Play Store, or a custom landing page.
+
+
+
+
+
+
+
+Setting up redirects is important because it ensures that your links don't break and that users always have a seamless experience, even if they need to install the app first.
+
+**3. Create a Smart Link**
+
+After setting up your project and redirects, you can create a new Smart Link from the **Quick Links** tab in the Branch dashboard. Here you’ll be able to set a link title, alias, add analytics tags, and customize the social media preview (such as the image, title, and description).
+
+Once saved, Branch will generate a Smart Link that’s ready to use across your campaigns and app flows.
+
+Here's a short demo:
+
+
+
+
+
+### FlutterFlow Configuration Setup
+
+To make **Branch Smart Links** work in your FlutterFlow app, you’ll need to update the native configuration files via the **Custom Code** tab in your project.
+
+1. First, create environment variables for:
+ - `branchHostUrl` (e.g., `brnch4.app.link`)
+ - `branchKey` (your Branch key, use it for production and optionally `branchKeyTest` for dev environments. You can toggle modes through Branch dashboard and also through FlutterFlow environment toggling).
+
+2. Then navigate to, FlutterFlow > Custom Code > Configuration Files.
+
+
+**🔧 Android Setup**
+
+1. Create two variables in `AndroidManifest.xml` file named `branchKey` and `branchHostUrl` and bind them to the environment variables we earlier created.
+
+2. Add an `intent-filter` block to your **Main Activity** through the **Activity Tags** hook:
+
+```xml
+
+
+
+
+
+
+```
+
+3. Add an **App Component** block for meta-data:
+
+```xml
+
+
+```
+
+
+
+**🍎 iOS Setup**
+
+1. In `Info.plist`, add a new variable called `branchKey` and bind it to the environment variable.
+
+2. In `Info.plist`, add the following code snippet.
+
+```xml
+branch_key
+{{branchKey}}
+```
+3. In `Runner.entitlements`, add a new variable called `branchHostUrl` and bind it to the environment variable.
+
+4. In `Runner.entitlements`, add the following code snippet.
+
+```xml
+com.apple.developer.associated-domains
+
+ applinks:{{branchHostUrl}}
+
+```
+Branch automatically hosts and serves the `apple-app-site-association` file needed for Universal Links. You don’t need to manually upload it to your domain.
+
+
+**FlutterFlow Routing Setup**
+
+FlutterFlow also defines a Custom URI Scheme (like `myapp://`) by default. Even if you're using Branch for web-based Smart Links, it’s a good idea to keep this in sync.
+
+1. Go to:
+Settings & Integrations > App Settings > App Details
+
+2. Scroll to **Routing & Deep Linking** section.
+
+3. Under Custom URI Scheme, match the URI host/domain to what’s defined in your Branch dashboard (e.g., `brnch4://` or `dreambrush://`).
+
+
+
+Even if your links mainly use `https://`, FlutterFlow's routing engine may still use the custom URI internally. Keeping this field consistent prevents confusion or route mismatches.
+
+You're now ready to use Branch Smart Links in a FlutterFlow app with seamless deferred deep linking, App/Universal Link verification, and environment-based configuration.
+
+### Integrate Flutter Branch SDK
+To integrate Branch with your FlutterFlow app, you'll use the [`flutter_branch_sdk`](https://pub.dev/packages/flutter_branch_sdk) Dart package. This will allow your app to listen to Branch links and respond accordingly.
+
+
+1. Go to your **FlutterFlow project > Settings and Integrations > Pubspec Dependencies** tab, and add the following dependency.
+
+```js
+flutter_branch_sdk: ^5.0.1
+```
+Make sure to use the latest version available from [pub.dev](https://pub.dev/packages/flutter_branch_sdk)
+
+
+2. Create a Custom Action to initialize the Branch SDK. This ensures the Branch session is set up when your app starts.
+
+```js
+import 'package:flutter_branch_sdk/flutter_branch_sdk.dart';
+
+Future initBranch() async {
+ // Add your function code here!
+ await FlutterBranchSdk.init();
+}
+
+```
+
+Call this action inside the **Final Actions** of your `main.dart`.
+
+3. Create another custom action to listen for Branch link clicks and optionally route the user:
+
+```js
+
+// Automatic FlutterFlow imports
+import '/flutter_flow/flutter_flow_theme.dart';
+import '/flutter_flow/flutter_flow_util.dart';
+import '/custom_code/actions/index.dart'; // Imports other custom actions
+import '/flutter_flow/custom_functions.dart'; // Imports custom functions
+import 'package:flutter/material.dart';
+// Begin custom action code
+// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
+
+import 'dart:async';
+import 'package:flutter_branch_sdk/flutter_branch_sdk.dart';
+import 'package:flutter/services.dart';
+
+StreamSubscription