Skip to content

Revamp docs design! #452

New issue

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

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

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
Aug 13, 2025
Merged
Show file tree
Hide file tree
Changes from 12 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/accounts-billing/privacy-terms-of-service.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
You can review the most recent version of our Terms of Service [linked on the website](https://www.flutterflow.io/tos).
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@

---
toc_max_heading_level: 5
sidebar_position: 2
---

# Other Subscription Questions

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
2 changes: 1 addition & 1 deletion docs/accounts-billing/subscriptions/subscriptions.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ slug: subscriptions
title: Subscriptions
tags: []
toc_max_heading_level: 5
sidebar_position: 3
sidebar_position: 0
---


Expand Down
139 changes: 127 additions & 12 deletions docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ custom_edit_url: null
showLastUpdateTime: false
hide_title: true
slug: /
hide_table_of_contents: true
hide_table_of_contents: false
---

import InfoCard from '@site/src/components/InfoCard';
Expand All @@ -20,25 +20,140 @@ import BranchIcon from '@site/static/icons/branch_New.png';



<FlutterFlowLogo></FlutterFlowLogo>

# Visual Development Environment
FlutterFlow is a visual development environment that lets you build mobile, web, and desktop apps incredibly fast, without sacrificing quality or features.
# Getting Started with FlutterFlow
FlutterFlow is a visual development environment that lets you build mobile, web, and desktop apps incredibly fast, without sacrificing on app quality or features.


<div class="video-container small"><iframe src="https://www.youtube.com/embed/gYOrgBrX4jM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>

<InfoCards>
<InfoCard title="Before You Begin" description="Ensure you meet system requirements and grasp technical concepts for smooth building in FlutterFlow." pagePath="/before-you-begin/setup-flutterflow" />
<InfoCard title="Explore FlutterFlow" description="Dive into the building blocks of the platform: projects, widgets, functions and more." pagePath="/resources"/>
<InfoCard title="Start Building" description="Jump right into a quick start on how to build a simple app." pagePath="/quickstart"/>
<InfoCard title="What's New in FlutterFlow" description="Updates, features, and the latest enhancements in FlutterFlow." pagePath="https://community.flutterflow.io/c/whats-new-in-flutterflow"/>
<InfoCard title="Community Forum" description="Join discussions, ask questions, and share insights with the FlutterFlow community." pagePath="https://community.flutterflow.io"/>
<InfoCard title="Submit Bug Report" description="Encountered a bug in FlutterFlow? Help us improve by submitting a bug report." pagePath="/misc/submit-bug-report" />
<InfoCard
icon="🚀"
title="Build your first app"
description="Get started with FlutterFlow by building your first FlutterFlow app step-by-step."
pagePath="/quickstart"
isLarge={true}
/>
<InfoCard
icon="🗺️"
title="App Development Roadmap"
description="Learn the three essential layers of app development: UI Layer, Logic Layer, and Data Layer for building FlutterFlow applications."
pagePath="/roadmap"
isLarge={true}
/>

</InfoCards>

<p></p>


<p></p>

### FlutterFlow Tour

<div class="video-container"><iframe src="https://www.youtube.com/embed/GpXjU-ieAKU?si=moIEUUGry24CdSJN" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
<InfoCards>

<InfoCard
icon="🏗️"
title="FlutterFlow Builder"
description="Explore the FlutterFlow Builder interface, learn about the dashboard, widgets panel, and how to navigate the visual development environment."
pagePath="/flutterflow-ui/dashboard"
isLarge={true}
/>

<InfoCard
icon="🔍"
title="Building Blocks"
description="Dive into the building blocks of the platform: projects, widgets, functions and more."
pagePath="/resources"
isLarge = {true}
/>


</InfoCards>

<p></p>

<div class="video-container"><iframe src="https://www.youtube.com/embed/GpXjU-ieAKU?si=moIEUUGry24CdSJN" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>






### Best Practices

Essential guidelines and recommendations for building robust FlutterFlow applications. Discover security best practices and performance optimization techniques to ensure your apps are production-ready, scalable, and maintainable.

<InfoCards>
<InfoCard
icon="🔐"
title="Secure your API Key"
description="Learn best practices for keeping your API keys created in Google Cloud Console safe and secure in production applications."
pagePath="/best-practices/secure-api-keys"
isLarge={true}
/>
<InfoCard
icon="🧪"
title="Test your apps locally"
description="Set up Local Run to debug and validate your app in physical devices."
pagePath="/testing/local-run"
/>
<InfoCard
icon="📝"
title="Naming variables"
description="Learn FlutterFlow naming conventions and best practices for variables, functions, and components to maintain clean, readable code."
pagePath="/resources/style-guide"
/>
</InfoCards>

### Scaling FlutterFlow Apps

Learn advanced techniques and strategies to scale your FlutterFlow applications from simple prototypes to enterprise-grade solutions with native integrations and modular architecture.

<InfoCards>
<InfoCard
icon="🔌"
title="Integrating Native Plugins in FlutterFlow"
description="Extend FlutterFlow's capabilities by integrating native platform plugins and custom functionality using method channels for advanced app development."
pagePath="/concepts/advanced/method-channels"
isLarge={true}
/>
<InfoCard
icon="🏗️"
title="Building Super Apps using Libraries"
description="Discover how to create scalable, modular applications using FlutterFlow libraries to build complex, maintainable super apps with independent feature libraries."
pagePath="https://blog.flutterflow.io/scaling-super-apps-modular-architecture-with-flutterflow-libraries/"
/>

</InfoCards>

### Additional Tools

Discover additional tools and references to enhance your FlutterFlow development experience:
<InfoCards>
<InfoCard
icon="⚙️"
title="System Requirements"
description="Ensure you meet system requirements required to smoothly run FlutterFlow application on the web & desktop."
pagePath="/before-you-begin/setup-flutterflow"
/>
<InfoCard
icon="🆕"
title="What's New in FlutterFlow"
description="Follow latest updates, features, and the latest enhancements in FlutterFlow."
pagePath="https://community.flutterflow.io/c/whats-new-in-flutterflow"
/>

</InfoCards>

## Still Have Problems?

If you're still experiencing issues or need additional help, here are some resources to get you back on track:

- **[Submit Bug Report](/misc/submit-bug-report)** - Report bugs or issues you've encountered
- **[Community Forum](https://community.flutterflow.io)** - Ask questions and get help from the community
- **[Reddit Community](https://www.reddit.com/r/FlutterFlow/)** - Join discussions on Reddit
- **[Documentation Bug](https://github.com/FlutterFlow/flutterflow-documentation/issues)** - Report documentation issues
- **[Contribute to Documentation](https://github.com/FlutterFlow/flutterflow-documentation?tab=readme-ov-file#how-to-contribute)** - Contribution guidelines for contributing to the FlutterFlow documentation site.
- **[FlutterFlow Support](mailto:[email protected])** - Get direct support from the FlutterFlow support team.
4 changes: 2 additions & 2 deletions docs/marketplace/creators-hub/creators-hub.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ keywords: [FlutterFlow, MarketPlace, Creators Hub]
# Creators Hub
Welcome to the FlutterFlow Marketplace Creators' Hub! This section is designed to provide you with all the necessary information to contribute effectively and responsibly to Marketplace. Whether you are submitting your first item or looking to understand the legal nuances, you'll find detailed guidelines and helpful tips here.

### **Submitting an Item for Review**
### Submitting an Item for Review
- Understand the [criteria](submission-criteria.md) we apply to items submitted to Marketplace.
- Learn how to prepare and [submit](submit-item-for-review.md) your items to the Marketplace with our step-by-step guide.

### **Legal Guidelines for Creators**
### Legal Guidelines for Creators

A user-friendly [guide](legal-guidelines-for-creators.md) outlining what content can and cannot be published on our Marketplace.

Expand Down
2 changes: 1 addition & 1 deletion docs/marketplace/creators-hub/submission-criteria.md
Original file line number Diff line number Diff line change
Expand Up @@ -396,7 +396,7 @@ Stay tuned for an upcoming "style guide" we're publishing that goes into deeper
- **Criteria:** Projects should include automated tests that verify core functionality and key user workflows. While not required for approval, this is strongly recommended for libraries and will positively impact visibility.
- **Why It Matters:** Automated tests help ensure reliability, catch regressions, and demonstrate your commitment to quality. They also improve your item's visibility.
- **What To Do:**
- **Add Integration Tests:** Use FlutterFlow's [automated testing](../../testing-deployment-publishing/testing/automated-tests.md) features to verify your item's core functionality.
- **Add Integration Tests:** Use FlutterFlow's [automated testing](../../testing-deployment-publishing/running-your-app/automated-tests.md) features to verify your item's core functionality.
- **Test Key Workflows:** Focus on testing critical user paths and features that users will rely on.
- **For Libraries:** Since libraries are often used as building blocks in larger applications, thorough testing is particularly important to:
- Verify that Library Values are properly implemented
Expand Down
2 changes: 1 addition & 1 deletion docs/resources/ui/widgets/widget-commonalities.md
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ Values beyond this range will push the widget outside the visible screen area.

## Add Testing Value Key

A **Value Key** is used to uniquely identify widgets during [**Automated Testing**](../../../testing-deployment-publishing/testing/automated-tests.md) in FlutterFlow. For example, on a Create Account page, you might use descriptive keys like `signupFirstNameField`, `signupEmailField`, `signupPasswordField`, and `signupSubmitButton`. This helps testing tools reliably locate and interact with the correct widgets. For more details, refer to the [complete guide here](../../../testing-deployment-publishing/testing/automated-tests.md).
A **Value Key** is used to uniquely identify widgets during [**Automated Testing**](../../../testing-deployment-publishing/running-your-app/automated-tests.md) in FlutterFlow. For example, on a Create Account page, you might use descriptive keys like `signupFirstNameField`, `signupEmailField`, `signupPasswordField`, and `signupSubmitButton`. This helps testing tools reliably locate and interact with the correct widgets. For more details, refer to the [complete guide here](../../../testing-deployment-publishing/running-your-app/automated-tests.md).

![test-value-keys.avif](imgs/test-value-keys.avif)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ This page outlines the important steps and checks to be made before publishing y

Here’s a comprehensive list of these prechecks:

1. **Functionality Testing**: Test the app manually across devices. You can also implement integration tests using FlutterFlow’s [**Automated Tests**](../testing/automated-tests.md) framework to cover various scenarios.
1. **Functionality Testing**: Test the app manually across devices. You can also implement integration tests using FlutterFlow’s [**Automated Tests**](../running-your-app/automated-tests.md) framework to cover various scenarios.

2. **Get Feedback**: Run your app in Run Mode to generate a shareable link to the session. You can share these links to gather feedback from users and testers, providing valuable insights and potential areas of improvement before the public release.
3. **Optimizations & Enhancements**: Improve performance by implementing [optimization and enhancement](../../intro/ff-ui/toolbar.md#project-suggestions) suggestions. Ensure that images are properly sized, consider using higher compression for assets, and remove unused assets and custom widgets. These will help improve your app's speed and size.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"label": "Running your App",
"label": "Testing your app",
"position": 3
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ slug: /testing/automated-tests
title: Automated Tests
description: Discover how to effectively utilize automated testing in FlutterFlow to ensure your app performs as intended.
tags: [Automated Tests, Testing]
sidebar_position: 0
sidebar_position: 2
keywords: [Automated Tests, Testing, FlutterFlow]
---

Expand Down
4 changes: 0 additions & 4 deletions docs/testing-deployment-publishing/testing/_category_.json

This file was deleted.

4 changes: 3 additions & 1 deletion docusaurus.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,15 @@ const config: Config = {
'classic',
{
docs: {
breadcrumbs: false,
breadcrumbs: true,
routeBasePath: '/',
sidebarPath: './sidebars.ts',
editUrl: 'https://github.com/FlutterFlow/flutterflow-documentation/edit/main/',
showLastUpdateAuthor: true,
showLastUpdateTime: true,
exclude: ['docs/index.md'],
sidebarCollapsible: true, /* Keep sidebar expanded by default */
sidebarCollapsed: true, /* Start with sidebar expanded */
// lastVersion: 'current',
// versions: {
// current: {
Expand Down
7 changes: 6 additions & 1 deletion firebase.json
Original file line number Diff line number Diff line change
Expand Up @@ -2401,7 +2401,7 @@
{
"source": "/concepts/custom-code/custom-files",
"destination": "/concepts/custom-code/configuration-files",
"type": 301
"type": 301
},
{
"source": "/marketplace/creators-hub/submit-item-for-reivew",
Expand All @@ -2417,6 +2417,11 @@
"source": "/configuring-cors-for-firebase-storage",
"destination": "/troubleshooting/firebase/configuring-cors-for-firebase-storage",
"type": 301
},
{
"source": "/accounts-billing/refunds",
"destination": "/accounts-billing/subscriptions/refunds",
"type": 301
}
]
}
Expand Down
18 changes: 9 additions & 9 deletions sidebars.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const sidebars: SidebarsConfig = {
{
type: 'category',
label: 'Before You Begin',
collapsed: true,
collapsed: false,
items: [
{
type: 'autogenerated',
Expand All @@ -27,7 +27,7 @@ const sidebars: SidebarsConfig = {
{
type: 'category',
label: 'FlutterFlow Platform',
collapsed: true,
collapsed: false,
items: [
{
type: 'autogenerated',
Expand All @@ -38,7 +38,7 @@ const sidebars: SidebarsConfig = {
{
type: 'category',
label: 'Resources',
collapsed: true,
collapsed: false,
link: {
type: 'generated-index',
title: 'FlutterFlow Resources',
Expand All @@ -56,7 +56,7 @@ const sidebars: SidebarsConfig = {
{
type: 'category',
label: 'Building Concepts',
collapsed: true,
collapsed: false,
link: {
type: 'generated-index',
title: 'Key Concepts',
Expand All @@ -74,7 +74,7 @@ const sidebars: SidebarsConfig = {
{
type: 'category',
label: 'Testing & Publishing',
collapsed: true,
collapsed: false,
items: [
{
type: 'autogenerated',
Expand All @@ -85,7 +85,7 @@ const sidebars: SidebarsConfig = {
{
type: 'category',
label: 'Integrations',
collapsed: true,
collapsed: false,
link: {
type: 'generated-index',
title: 'Third Party Integrations',
Expand All @@ -103,7 +103,7 @@ const sidebars: SidebarsConfig = {
{
type: 'category',
label: 'Generated Code',
collapsed: true,
collapsed: false,
items: [
{
type: 'autogenerated',
Expand All @@ -114,7 +114,7 @@ const sidebars: SidebarsConfig = {
{
type: 'category',
label: 'Accounts & Billing',
collapsed: true,
collapsed: false,
items: [
{
type: 'autogenerated',
Expand All @@ -125,7 +125,7 @@ const sidebars: SidebarsConfig = {
{
type: 'category',
label: 'Miscellaneous',
collapsed: true,
collapsed: false,
items: [
{
type: 'autogenerated',
Expand Down
Loading