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/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/intro/ff-ui/my-organization.md
+13-2Lines changed: 13 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -26,6 +26,11 @@ Learn [**how to create a team**](../../accounts-billing/subscriptions/flutterflo
26
26
27
27
## Team code
28
28
29
+
30
+
:::warning
31
+
**Team Code Libraries are now deprecated**. Please use the new [**Libraries**](../../resources/projects/libraries.md) to share and reuse projects across multiple projects.
32
+
:::
33
+
29
34
Imagine you are working on multiple apps. As the project progresses, you realize that some of the custom code can be used across multiple apps. With *Team Code*, you can create [Custom Functions](../../ff-concepts/adding-customization/custom-functions.md), [Widgets](../../resources/ui/widgets/composing-widgets/rows-column-stack.md), and [Actions](../../resources/control-flow/functions/action-flow-editor.md) that will be shared between your team members and their projects.
30
35
31
36
This helps you reduce building time, effort, and costs by allowing members to reuse existing code. Furthermore, shared code is easier to maintain as changes only need to be made in one place.
@@ -146,7 +151,11 @@ The shared media assets will have the 'teams' icon at the bottom right side.
146
151
147
152
A company may have a website, a mobile app, and a desktop app, each with its own user interface and user experience. In such a case, rather than creating the same UI configuration for each project, creating a shared design system can help speed up the work and ensure consistency across all projects.
148
153
149
-
A design system includes colors, typography, fonts, icons, app assets, a nav bar, and an app bar, as well as pre-designed UI components such as buttons and text widgets.
154
+
A design system includes colors, typography, fonts, icons, app assets, a nav bar, and an app bar.
155
+
156
+
:::tip
157
+
To store pre-designed UI components, we highly recommend using [**Libraries**](../../resources/projects/libraries.md) for easy reuse across projects.
158
+
:::
150
159
151
160
Here's how you can share the design library:
152
161
@@ -211,7 +220,9 @@ Here's how you can share the design library:
211
220
<p></p>
212
221
213
222
## Team API library
214
-
223
+
:::warning
224
+
**Team API Libraries are now deprecated**. Please use the new [**Libraries**](../../resources/projects/libraries.md) to share and reuse projects across multiple projects.
225
+
:::
215
226
Imagine a company that has multiple mobile apps for different purposes, such as a shopping app, a loyalty app, and a delivery app. All these apps require similar functionalities, such as user authentication, product information, and order management. However, each app is developed by a different team.
216
227
217
228
To ensure consistency and efficiency across all the apps, the company decides to create a centralized API that can be used and modified as per the team's requirements. Sharing API calls also allows for easier testing and debugging, as any issues can be traced back to a single source.
Copy file name to clipboardExpand all lines: docs/resources/projects/libraries.md
+84-1Lines changed: 84 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,7 @@ import TabItem from '@theme/TabItem';
14
14
Libraries enables you to share and reuse entire FlutterFlow projects as dependencies across multiple projects. This allows teams and developers to modularize their apps by creating shared libraries that include components, API calls, custom code, and more. By using libraries, development becomes more efficient and scalable.
15
15
16
16
:::info
17
-
A **Dependency** refers to an external library or resource that your project relies on to function correctly. When you create a new FlutterFlow project, certain dependencies are automatically added to support the generated code. Also, when you use a [Custom Widget](../../ff-concepts/adding-customization/custom-widgets.md), you are essentially adding dependencies to your project. Libraries take this concept further by allowing you to add entire FlutterFlow projects as dependencies.
17
+
A **Dependency** refers to an external library or resource that your project relies on to function correctly. When you create a new FlutterFlow project, certain dependencies are automatically added to support the generated code. Also, when you use a [**Custom Widget**](../../ff-concepts/adding-customization/custom-widgets.md), you are essentially adding dependencies to your project. Libraries take this concept further by allowing you to add entire FlutterFlow projects as dependencies.
18
18
:::
19
19
20
20
Imagine you're building an e-commerce app, and different teams are working on various features. One team develops a complex payment system. By using the Libraries, they can publish the payment system as a reusable library and allow other teams to easily import and integrate it into multiple projects without duplicating development efforts.
@@ -234,6 +234,89 @@ You can easily upgrade to newer versions of the libraries as they become availab
234
234
235
235
236
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/resources/ui/pages/intro-pages.md
+9-8Lines changed: 9 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,29 +6,30 @@ sidebar_position: 1
6
6
7
7
# Introduction to Pages
8
8
9
+
In FlutterFlow, a **Page** represents a single screen in your app. Under-the-hood pages use a **Scaffold**, a [foundational widget from Flutter](https://api.flutter.dev/flutter/material/Scaffold-class.html) that provides a structured layout for a screen within your app. The Scaffold offers essential elements like the AppBar and Body, allowing you to easily build screens.
9
10
10
-
In FlutterFlow, each **Page** you create is fundamentally structured using a **Scaffold**, a [foundational widget from Flutter](https://api.flutter.dev/flutter/material/Scaffold-class.html) that provides a structured layout for your app. The Scaffold offers essential elements like the AppBar, Floating Action Button (FAB), Drawer, and Body, allowing you to easily organize and design your pages.
11
+
Pages are composed of various UI elements, or widgets. Widgets are added to a page when they are added to the page's **Widget Tree**.
12
+
13
+
In FlutterFlow, pages are automatically configured to handle [routing](https://docs.flutterflow.io/resources/ui/pages/properties#route-settings). Additionally, pages can have [input parameters](https://docs.flutterflow.io/resources/ui/pages/properties#page-parameters) and [state variables](https://docs.flutterflow.io/resources/ui/pages/page-lifecycle#page-state).
11
14
12
15
:::info
13
16
For more details on how to use Scaffold and the various Page Elements in FlutterFlow, see the dedicated **[Page Elements](page-elements.md)** guide.
14
17
:::
15
18
16
19
17
-
18
-
19
20
## Creating a Page
20
21
21
-
In FlutterFlow, you can craft a page tailored to your expertise, design preferences, or specific
22
-
use case needs. Whether you're starting from scratch, using a template, or leveraging AI tools,
22
+
In FlutterFlow, you can seamlessly craft a page tailored to your needs and design preferences.
23
+
Whether you're starting from scratch, using a template, or leveraging AI tools,
23
24
there are several pathways to achieve the desired functionality and aesthetic of your desired Page.
24
25
25
-
FlutterFlow allows you to easily create new pages using the "Add Page, Component, or Flow" button, which is available from the Pages view. This will help you
26
-
quickly start and add new pages to your app.
27
-
28
26
:::tip[Generated Code]
29
27
When you create a page in FlutterFlow, a `Widget` class and a corresponding `Model` class are automatically generated. You can view these in the Code Viewer. To explore the details of the generated `Model` class, take a closer [**look at the code**](../../../generated-code/page-model.md).
30
28
:::
31
29
30
+
FlutterFlow allows you to easily create new pages using the **Add Page, Component, or Flow** button,
31
+
which is available from the **Page Selector** tab in the **Navgation Menu**. This will help you
Copy file name to clipboardExpand all lines: docs/testing-deployment-publishing/exporting-code/ff-cli.md
+21-6Lines changed: 21 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -64,12 +64,27 @@ To use the CLI, you'll need to create an API token and use it in your requests.
64
64
65
65
| Flag | Behavior | Default |
66
66
| --- | --- | --- |
67
-
| --dest / -d | Specifies a destination folder other than the current directory | Current directory |
68
-
| --[no]-include-assets | Option to download assets (images, GIFs). Useful for consecutive code exports if the assets folder hasn't changed | False |
69
-
| --branch-name / -b | Downloads from a specific branch | Main |
70
-
| --[no]-fix | Option to run dart fix on the code after downloading | False |
71
-
| --[no]-parent-folder | Option to download the code into a subfolder instead of directly into the directory | False |
67
+
| --dest / -d | Specifies a destination folder other than the current directory. | Current directory |
68
+
| --[no]-include-assets | Option to download assets (images, GIFs). Useful for consecutive code exports if the assets folder hasn't changed. | False |
69
+
| --branch-name / -b | Downloads from a specific branch. | Main |
70
+
| --[no]-fix | Option to run dart fix on the code after downloading. | False |
71
+
| --[no]-parent-folder | Option to download the code into a subfolder instead of directly into the directory. | False |
72
+
| --[no]-as-module | Whether to generate the project as a Flutter module. | False |
73
+
| --[no]-as-debug | Whether to generate the project with debug logging to be able to use FlutterFlow Debug Panel inside the DevTools. | False |
74
+
| --project-environment | Which [development environment](../development-environments/development-environments.md) to be used. If empty, the current environment in the project will be downloaded. | Current environment |
72
75
73
76
## Filtered exports
74
77
75
-
We've developed [a solution](https://github.com/krabhishek/flutterflow-filtered-pull) that allows you to use the CLI tool without overwriting specific files or directories. This is especially useful if you're managing code outside of FlutterFlow and want to prevent it from being overwritten during a code export.
78
+
We've developed [a solution](https://github.com/krabhishek/flutterflow-filtered-pull) that allows you to use the CLI tool without overwriting specific files or directories. This is especially useful if you're managing code outside of FlutterFlow and want to prevent it from being overwritten during a code export.
79
+
80
+
## FAQ
81
+
<details>
82
+
<summary>I am getting an error as FormatException: Missing argument for…</summary>
83
+
<p>
84
+
This error likely indicates that you haven't correctly entered the command option along with its value. Double-check that all required information has been entered. If everything is correct and you're still encountering the error, it might be due to using an outdated version of the FlutterFlow CLI. To resolve this, you can update to the latest version by running the installation command:
0 commit comments