DOCSEARCHbyAlgolia
Submit Docs

FlutterFlow Documentation

website·Indexed 39 days ago

https://docs.flutterflow.io

Comprehensive guides for building applications with FlutterFlow, covering account management, pricing, and branching workflows. Technical documentation includes detailed instructions on implementing animations (Lottie, Rive, Hero), custom code, Dart classes, and backend integrations using Firebase Cloud Functions and Supabase Edge Functions.

Tokens
203K
Snippets
253
Records
1.6K
Agent score
72%

What's inside FlutterFlow

  1. Overview of App Events in FlutterFlow

    App Events enable decoupled communication between different parts of a FlutterFlow application. Instead of tightly coupling pages and components via navigation parameters or complex callback chains, any part of the app can broadcast a named event (optionally with structured data using a FlutterFlow DataType), and other parts of the app can listen and respond. This modular approach simplifies scaling and maintenance.

  2. Overview of FlutterFlow Libraries

    Libraries allow developers to share and reuse entire FlutterFlow projects as dependencies across multiple projects. This enables modular development by creating shared libraries for UI components, API calls, custom code, and custom data types, facilitating better scalability and team collaboration.

  3. Overview of FlutterFlow native configuration files

    FlutterFlow allows modification of platform-specific configuration files to integrate third-party packages (analytics, ad networks, payment solutions). The key editable files include:

    • AndroidManifest.xml (Android): Permissions, metadata, and intent filters.
    • build.gradle (Android): Build configurations, SDK versions, dependencies, and signing.
    • ProGuard files (Android): Code shrinking and obfuscation.
    • Info.plist (iOS): App settings and permissions.
    • Entitlements.plist (iOS): App privileges (e.g., Push Notifications, Apple Pay).
    • AppDelegate.swift (iOS): Launch behavior, plugin registration, and lifecycle events.
    • main.dart (Flutter): App-level entry point logic.

  4. Overview of Firebase Cloud Functions in FlutterFlow

    Firebase Cloud Functions allow developers to run server-side Node.js code triggered by HTTPS requests or Firebase services (e.g., database changes, file uploads). FlutterFlow provides integrated tools to create, edit, deploy, and trigger these functions directly from the platform. To use Cloud Functions, the Firebase project must be on the Blaze (pay-as-you-go) plan.

  5. Overview of FlutterFlow Project APIs

    The FlutterFlow Project APIs enable programmatic reading, writing, and validation of YAML configuration files. These APIs allow for the automation of project management tasks, CI/CD workflow integration, and bulk configuration updates. The Project YAMLs represent the complete structural definition of an app, including UI components, app configuration, data structures, business logic, assets, and project organization. Note that the Project API is currently in beta.

  6. Overview of Supabase Edge Functions in FlutterFlow

    Supabase Edge Functions allow developers to run secure backend logic using Deno and TypeScript on Supabase infrastructure. They are particularly useful for AI integrations, secure API wrappers, webhooks, payments, and server-side processing. Unlike Firebase Cloud Functions, they are tightly integrated with Supabase projects and run closer to users to reduce latency. A prerequisite for using these functions is that the FlutterFlow project must be connected to Supabase.

  7. Overview of FlutterFlow AI Agent for project editing

    The AI Agent is a tool used to build and edit FlutterFlow projects via external AI coding agents (such as Claude or Codex). It is designed for project editing tasks rather than building in-app AI features. Key capabilities include:

    • Creating or updating pages and components.
    • Adjusting widget properties, layout, styling, and responsiveness.
    • Wiring actions, action blocks, app state, and app events.
    • Updating theme values, design tokens, and navigation.
    • Reviewing project structure and identifying issues.
    • Applying focused changes to specific widgets using the Copy AI Selector.

  8. Overview of Facebook Login integration steps

    Integrating Facebook Login requires a multi-step process across the Facebook Developer Console, Firebase, and FlutterFlow:

    1. Create an app on the Facebook Developer Console to obtain an App ID and App Secret.
    2. Configure the supported platforms (Android and iOS) on Facebook.
    3. Add email permissions in the Facebook developer console to retrieve user emails.
    4. Enable Facebook authentication in the Firebase Console.
    5. Enable Facebook authentication within FlutterFlow.
    6. Add a Facebook sign-in button and the corresponding login action.
    7. Add a logout action.
    8. Test the app and verify user creation in the Firebase dashboard.

  9. Overview of Action Triggers in FlutterFlow

    Action Triggers are event listeners that detect user interactions (e.g., tapping a button, selecting a dropdown option, or loading a page) and initiate a corresponding Action—a task or operation that responds to that event.

  10. Overview of the FlutterFlow App Builder interface

    The App Builder is divided into four primary functional areas:

    1. Navigation Menu: Left-side menu used to switch between core features such as the Widget Palette, Page Selector, Widget Tree, Firestore settings, API Calls, and Theme settings.
    2. ToolBar: Top area for searching resources, changing canvas size, managing branching, and downloading code.
    3. Canvas Area: The central preview area where you visually build and view your app pages.
    4. Properties Panel: Right-side panel used to modify the visual appearance and interactive behavior (Actions, Backend Queries, Animations) of the selected UI element.

  11. Overview of FlutterFlow Automated Tests

    Automated Tests in FlutterFlow allow developers to verify app behavior and appearance by simulating user interactions. Internally, FlutterFlow generates code for the Flutter integration testing framework. These tests can be run locally or via services like Firebase Test Lab.

    Note: Automated Tests are considered a legacy feature. For new workflows, FlutterFlow recommends using Test Pilot, which uses natural-language instructions for AI-powered QA tests.

  12. Compare FlutterFlow plan tiers by user profile

    FlutterFlow offers several tiers based on the user's development stage and team size:

    • Free: Best for those learning and prototyping.
    • Basic: For independent builders shipping production-ready apps.
    • Growth: For solo developers or small teams requiring advanced functionality.
    • Business: For established teams (3–5 users) utilizing advanced development workflows.
    • Enterprise: For large organizations requiring advanced security, governance, and collaboration features.