You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/ff-concepts/adding-customization/vscode-extension.md
+39Lines changed: 39 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -229,3 +229,42 @@ To delete a Custom Action or Widget, delete the associated file.
229
229
You can add custom [pub.dev](https://pub.dev/) package dependencies with the `Dart: Add Dependency` command from the Visual Studio Code command palette. This will update the `pubspec.yaml` file.
230
230
231
231
232
+
## FAQs
233
+
<details>
234
+
<summary>How do I download code from the Beta or Enterprise version of FlutterFlow?</summary>
235
+
<p>
236
+
If you're using a different version of FlutterFlow, such as *Beta* or *Enterprise*, you can override the URL by modifying the **Extension Settings > settings.json** file.
237
+
238
+
For example:
239
+
240
+
- For the **Beta** version, set the `flutterflow.urlOverride` value to `https://api-beta.flutterflow.io/v1`.
241
+
- For the **Enterprise** version, set the `flutterflow.urlOverride` value to `https://api-enterprise-[region].flutterflow.io` (replace [region] with your specific region).
242
+
243
+
<div style={{
244
+
position: 'relative',
245
+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
Copy file name to clipboardExpand all lines: docs/ff-concepts/layout/responsive-layout.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -85,7 +85,7 @@ For `Row 2`, set its Expansion property to *Flexible* (the middle icon) and assi
85
85
86
86
87
87
88
-
I encourage you to test with different web dimensions and sizes to see how well this adapts.
88
+
We encourage you to test with different web dimensions and sizes to see how well this adapts.
89
89
90
90
Depending on your design needs, there are various approaches to managing space. Let's consider a different scenario: What if we want the searchBar to always occupy 40% of the screen width, with `Row 2` taking up the remaining space after placing the `searchBar` and `search IconButton`?
description: Learn how to add the Flex widget in your FlutterFlow app.
5
+
tags: [Flex, Widget, Concepts]
6
+
sidebar_position: 2
7
+
keywords: [FlutterFlow, Wrap, Concepts]
8
+
---
9
+
10
+
# Flex
11
+
12
+
The **Flex** widget can be used as an alternative to **Row** and **Column**. It allows you to dynamically set the layout axis (horizontal or vertical) based on specific conditions or logic. This is especially useful for creative responsive layouts - where child elements should be horizontal when the screen is wide, and vertical when the screen is narrow.
13
+
14
+
15
+
16
+
17
+
18
+
## Adding Flex Widget
19
+
20
+
To use the Flex widget, add it from the **Layout Elements** section of the **Widget Palette**, then add child widgets inside it. From the properties panel, set a condition for the **Is Horizontal** property. When this condition evaluates to `True`, the items will be laid out horizontally.
21
+
22
+
Consider an ecommerce app where recent orders are displayed vertically on mobile devices and switch to a horizontal layout on larger screens to make better use of the available space.
23
+
24
+
<div style={{
25
+
position: 'relative',
26
+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
- If you only need a simple vertical or horizontal arrangement, consider using [**Row**](../../../resources/ui/widgets/composing-widgets/rows-column-stack.md) or [**Column**](../../../resources/ui/widgets/composing-widgets/rows-column-stack.md).
81
+
- For very large numbers of children, consider using [**ListView**](../../../resources/ui/widgets/composing-widgets/list-grid.md#listview-widget) or [**GridView**](../../../resources/ui/widgets/composing-widgets/list-grid.md#gridview-widget) instead of **Flex**, as they offer better performance for scrolling large lists of items.
82
+
- When the content exceeds the screen limit, you can enable scrolling to make the content accessible. However, if you want to avoid scrolling altogether and still fit all the content on the screen, consider using a [**Wrap**](wrap-widget.md) widget.
83
+
84
+
:::
85
+
86
+
## Customization
87
+
88
+
When **Is Horizontal** property is disabled, the Flex widget behaves like a Column, and when enabled, it acts as a Row. Settings like [main axis alignment](../../../resources/ui/widgets/composing-widgets/rows-column-stack.md#main-axis), [cross axis alignment](../../../resources/ui/widgets/composing-widgets/rows-column-stack.md#cross-axis), [scrollability](../../../resources/ui/widgets/composing-widgets/rows-column-stack.md#scrollability), and [spacing](../../../resources/ui/widgets/composing-widgets/rows-column-stack.md#spacing) work the same way they do for the Column and Row widgets.
Copy file name to clipboardExpand all lines: docs/resources/data-representation/app-state.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -83,7 +83,7 @@ How this app state update will affect your app.
83
83
-**No Rebuild:** No rebuild is required.
84
84
85
85
:::tip[Generated Code]
86
-
Curious about how state changes are handled internally when you choose different **Update Type** options? Explore the detailed [**FFAppState**](../../generated-code/ff-app-state) guide.
86
+
Curious about how state changes are handled internally when you choose different **Update Type** options? Explore the detailed [**FFAppState**](../../generated-code/ff-app-state.md) guide.
87
87
:::
88
88
89
89
Here's a quick guide to updating the app state variable. We need to add an action to the 'Add to Bag' button. Within this action, we'll provide the product details and configure it to add to the current cart list.
Copy file name to clipboardExpand all lines: docs/resources/projects/libraries.md
+92-1Lines changed: 92 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -37,6 +37,14 @@ With Libraries, you can publish the complete FlutterFlow project as a library an
37
37
38
38
## Publishing a Library
39
39
40
+
To make the resources in your project available for others to use, publish your project as Library.
41
+
42
+
When you publish your project as a Library, your project will become a **Library Project**, and [certain features](#disabled-features-in-a-library) will no longer be available.
43
+
44
+
:::note
45
+
When you publish your project as Library, it can not be reverted. If you want to restore your project so that it is no longer a Library, you can clone the project. However, things like your deployment and Firestore settings will be cleared. If you want to preserve the state of your project before turning it into a Library, you should clone it first and then publish.
46
+
:::
47
+
40
48
To publish a FlutterFlow project as a library, start by creating a FlutterFlow project as you normally would, then follow these steps:
41
49
42
50
<div style={{
@@ -78,7 +86,7 @@ When a project is converted into a library, the following features are disabled
78
86
79
87
- App settings
80
88
- Firebase
81
-
- Development environment
89
+
- Development environments
82
90
- Authentication
83
91
- Push notifications
84
92
- Mobile deployment
@@ -226,6 +234,89 @@ You can easily upgrade to newer versions of the libraries as they become availab
226
234
227
235
228
236
237
+
## Library Values
238
+
239
+
**Library values** are essentially variables created and used by a library author and intended to have their values set by the library user. These values allow library author to create configurable variables that are useful in different contexts, such as API keys, global settings, or other project-specific configurations. These values allow library users to input specific data required for the library to function properly in their project.
240
+
241
+
For example, If someone has built a library that uses OpenAI API, they would define a Library Value for the OpenAI API key. As the user of the library, when you import, you must provide your own API key to ensure the library functions properly.
242
+
243
+
By using Library Values, the library author allows users to adapt the library to their own configurations without hardcoding sensitive or project-specific data, like API keys, into the library itself.
244
+
245
+
### Create Library Values as Author
246
+
247
+
The library author defines the variable name, data type (e.g., string, enum), whether the variable is nullable, and an optional default value.
248
+
249
+
To create library values, navigate to **Settings and Integrations > App Settings > Publish as Library > Library Values** section and click **+ Add Value**.
250
+
251
+
<div style={{
252
+
position: 'relative',
253
+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
After setting Library Values, they function just like any other variable in FlutterFlow. You can bind them to components, actions, API calls, or any property that allows you to configure dynamic values across your library project. You can access Library Values via the ****Set from Variable**** menu.
279
+
280
+
:::tip
281
+
Library values are used only within the library project and are not available for use in the project that imports it. The library user can only set their values.
To set library values, navigate to **Settings and Integrations > Project Setup > Project Dependencies** page. When you import a library, you'll be prompted to set values for required Library Values. If the library has already been added, click on **View Details**, which will open a dialog and then you can enter a value.
289
+
290
+
<div style={{
291
+
position: 'relative',
292
+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
For different [**development environments**](../../testing-deployment-publishing/development-environments/development-environments.md) (e.g., development vs. production), you can bind Library Values to [**environment values**](../../testing-deployment-publishing/development-environments/development-environments.md#use-environment-values). For instance, you could have two different Library Values for an API key, such as `DEV_OPENAI_API_KEY` and `PROD_OPENAI_API_KEY`, and bind them to the development and production environments to track API usage separately.
Copy file name to clipboardExpand all lines: docs/testing-deployment-publishing/development-environments/development-environments.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -119,7 +119,7 @@ Additionally, you must manually set up [**Firestore rules**](../../ff-integratio
119
119
The data that you add to Firebase through the Content Manager is specific to the Firebase project, and environment, that you have selected.
120
120
:::
121
121
122
-
#### Comnfiguring Supabase
122
+
#### Configuring Supabase
123
123
If your project uses Supabase, you'll need to [**set up a new Supabase project**](../../ff-integrations/supabase/supabase-setup.md) for each environment.
124
124
125
125
Create environment-specific values like `SupabaseAPIURL` and `SupabaseAnonKey`, and then configure the Supabase properties to point to these newly created values. Below is an example of how it would look like.
0 commit comments