DOCSEARCHbyAlgolia
Submit Docs

FlutterFlow Documentation

website·Indexed 30 days ago

https://flutterflow-docs-82026.web.app/

Documentation for the FlutterFlow low-code platform, covering app development, account management, and billing. Includes guides on custom code, Firebase Cloud Functions, Supabase Edge Functions, animations (Lottie, Rive, Hero), branching workflows, and app event integrations.

Tokens
200.4K
Snippets
270
Records
1.6K
Agent score
49%

What's inside FlutterFlow

  1. Overview of FlutterFlow AI Agent for project editing

    The AI Agent allows external AI coding agents to build and edit FlutterFlow projects. It is specifically designed for project editing tasks, including:

    • 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.

  2. Overview of FlutterFlow Components

    Components in FlutterFlow are reusable widgets that allow developers to maintain a DRY (Don't Repeat Yourself) codebase. By designing a widget once and reusing it across multiple pages, you ensure visual consistency and centralized updates; changing the component in one place automatically updates all instances across the app. Common use cases include standard buttons, card designs, input forms, pop-up dialogs, and custom interactive elements like sliders or progress bars.

  3. Overview of GenUI Chat

    GenUI is FlutterFlow's implementation of the A2UI (Agent-to-UI) protocol by Google. Unlike traditional chatbots that respond with text, GenUI allows an AI agent to dynamically compose and render actual functional UI components (cards, lists, forms, maps) and execute app logic in real-time based on user intent. It is designed as a dynamic layer that complements traditional fixed navigation and dashboards.

  4. Overview of FlutterFlow Automated Tests

    Automated Tests allow developers to verify app behavior and appearance without human intervention. FlutterFlow generates code based on the Flutter integration testing framework, which can be downloaded for local testing or run via services like Firebase Test Lab.

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

  5. Overview of FlutterFlow Libraries

    Libraries allow developers to share and reuse entire FlutterFlow projects as dependencies across multiple applications. This enables modular development by separating large-scale apps into smaller, independently managed projects (e.g., a dedicated UI library or backend integration library). Unlike previous sharing methods, Libraries support sharing custom data types and custom functions alongside components and API calls, and they include built-in version control.

  6. Overview of Animation options in FlutterFlow

    FlutterFlow provides several methods for adding motion and visual effects to an application:

    • Widget Animations: Apply animation effects to an entire widget.
    • Implicit Animations: Animate changes in specific widget properties (e.g., changing the height of a Container).
    • Hero Animations: Create shared element transitions where a widget moves smoothly between two different screens.
    • Page Transition Animations: Define how the app transitions from one page to another.
    • Import Animations: Integrate external animations created with tools like LottieFiles or Rive.
    • Shaders: Use GPU-powered effects for animated backgrounds, distortions, and interactive touch visuals.

  7. 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 features like the Widget Palette, Page Selector, Firestore settings, API Calls, and Theme settings.
    2. ToolBar: Top area for searching resources, changing canvas size, managing project history/branching, and running the app.
    3. Canvas Area: The central preview area where you visually build the 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.

  8. Overview of App Events in FlutterFlow

    App Events enable decoupled communication between different parts of a FlutterFlow application. Instead of tight coupling (like passing navigation parameters or complex callback chains), any part of the app can broadcast a named event, and other parts can listen and respond. This modular approach allows a sender to announce a change (e.g., 'CartUpdated') without needing to know which specific components or pages are listening and updating themselves.

  9. Overview of editable native configuration files in FlutterFlow

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

    Android:

    • AndroidManifest.xml: App permissions, metadata, and intent filters.
    • build.gradle: Build configurations, SDK versions, dependencies, and signing.
    • ProGuard files: Code shrinking and obfuscation.

    iOS:

    • Info.plist: App settings and permissions.
    • Entitlements.plist: App privileges (e.g., Push Notifications, Apple Pay).
    • AppDelegate.swift: Launch behavior, plugin registration, and lifecycle events.

    General:

    • main.dart: The Flutter app entry point for app-level logic.

  10. 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. Because they run closer to users, they typically offer lower latency than Firebase Cloud Functions. A prerequisite for using these functions is that the FlutterFlow project must be connected to Supabase.

  11. Overview of FlutterFlow Project APIs

    The FlutterFlow Project APIs allow for programmatic reading, writing, and validation of YAML configuration files via REST endpoints. This enables automation of project management, CI/CD integration, and bulk configuration updates. The API is currently in beta.

    Prerequisites:

    • A paid FlutterFlow subscription plan.
    • Project access: Read access for GET/validation and Editor access for updates.
    • An HTTP client (e.g., curl, Postman, axios).

  12. Use the RichText widget for mixed text styling

    The RichText widget allows for multiple styles (different fonts, sizes, and colors) within a single text sequence. It uses a tree of TextSpan objects to achieve this. When added, FlutterFlow automatically creates two RichTextSpan child objects that can be modified individually. Note that static text in a RichTextSpan is translatable, but text created via the Combine Text function is not.