Skip to content

Commit 274547e

Browse files
committed
Organized and formatted 69 articles from 'uncategorised' folder:
- Added assets - Updated formatting - Moved each article to the correct category in the parent doc
1 parent 4136be1 commit 274547e

File tree

207 files changed

+3481
-4
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

207 files changed

+3481
-4
lines changed
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
keywords: ['application', 'device', 'theme', 'color', 'dark mode']
3+
slug: /fix-app-colors-on-device
4+
title: Fix Incorrect App Colors on Real Devices
5+
---
6+
7+
# Fix Incorrect App Colors on Real Devices
8+
9+
When testing an application on a physical device, users may notice that colors appear differently than expected. This issue is often related to theme settings, particularly when Dark Mode is enabled on the device or within the application.
10+
11+
:::info[Prerequisites]
12+
- Ensure the app has a defined theme.
13+
- The application must be installed on a physical device for testing.
14+
:::
15+
16+
Follow these steps to verify and correct theme-related issues that affect color appearance:
17+
18+
1. **Verify Dark Mode in Theme Settings**
19+
Navigate to **Settings → Theme** inside the FlutterFlow editor. Confirm whether the **Dark Mode** toggle is enabled.
20+
![](imgs/20250430121247111572.png)
21+
22+
2. **Test Behavior by Disabling Dark Mode**
23+
Temporarily disable Dark Mode. Download and reinstall the app on the device. If the color issue is resolved, the cause was an incomplete or misconfigured Dark Mode theme.
24+
25+
3. **Adjust the Theme for Dark Mode**
26+
If Dark Mode is required, update the app's Dark Theme settings by selecting compatible text and background colors. This ensures proper visibility and branding across different device modes.
27+
28+
4. **Use the Explore Themes Preview**
29+
Use the **Explore Themes** option in the Theme section to preview and test color combinations.
30+
31+
![](imgs/20250430121247467739.png)
32+
33+
:::tip
34+
Dark Mode configuration is device-dependent. Always test your theme settings across both Light and Dark modes to ensure consistency.
35+
:::
36+
37+
:::note
38+
- Devices with automatic theme switching may cause inconsistencies if both Light and Dark modes are not properly configured.
39+
- Avoid using the same color for text and background in either theme.
40+
:::
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
keywords: ['paste', 'widgets', 'copy']
3+
slug: /fix-clipboard-permissions-for-widget-copy-paste
4+
title: Fix Clipboard Permissions for Copy-Pasting Widgets
5+
---
6+
7+
# Fix Clipboard Permissions for Copy-Pasting Widgets
8+
9+
If you’re unable to copy and paste widgets in FlutterFlow, the issue may be related to blocked clipboard permissions in your browser.
10+
11+
:::info[Prerequisites]
12+
Ensure you’re using a supported browser like **Google Chrome** and are signed in to your FlutterFlow project.
13+
:::
14+
15+
Follow the steps below to enable clipboard access in Chrome:
16+
17+
1. Click the **lock icon** in the address bar next to `flutterflow.io`.
18+
2. In the permissions popup, locate **Clipboard**.
19+
3. Set clipboard access to **Allow**.
20+
4. Refresh the page and try copying/pasting the widget again.
21+
22+
![](imgs/20250430121511630414.png)
23+
24+
:::tip
25+
For other browsers such as **Firefox**, **Edge**, or **Safari**, refer to that browser’s permission settings to enable clipboard access.
26+
:::
27+
253 KB
Loading
87 KB
Loading
131 KB
Loading
107 KB
Loading
Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
keywords: ['wrap', 'text', 'container', 'overflow']
3+
slug: /wrap-text-in-containers
4+
title: Wrap Text Inside Containers
5+
---
6+
7+
# Wrap Text Inside Containers
8+
9+
When building responsive layouts, text may overflow its container if not properly configured. This guide explains how to wrap text so that it fits within the container, especially in layouts such as ListView or Column.
10+
11+
:::info[Prerequisites]
12+
- Basic understanding of how to use widgets in FlutterFlow.
13+
- A text element placed inside a container or layout widget (e.g., ListView, Row, Column).
14+
:::
15+
16+
Follow the steps below to properly wrap text:
17+
18+
1. **Select the Text Widget**
19+
Choose the text element you want to wrap inside a container.
20+
21+
2. **Enable Soft Wrap**
22+
In the properties panel, locate the **Text Styling** section and enable **Soft Wrap**. This allows the text to break into multiple lines.
23+
24+
3. **Set Max Lines (Optional)**
25+
You can optionally set a **Max Lines** limit to control how many lines the text should wrap into before being truncated.
26+
27+
4. **Use Expanded or Flexible (When in Row)**
28+
If your text is inside a `Row`, wrap it in an `Expanded` or `Flexible` widget to prevent overflow.
29+
30+
5. **Adjust Container Width**
31+
Ensure the container has a defined or constrained width. Unlimited width will cause the text to expand rather than wrap.
32+
33+
6. **Use Overflow Handling (Optional)**
34+
Set the **Overflow** property to `ellipsis`, `clip`, or `fade` depending on how you want to handle excess text.
35+
36+
![](imgs/20250430121501151202.png)
37+
38+
:::tip
39+
When using a `Row`, wrapping long text will not work unless the text widget is inside an `Expanded` or `Flexible` widget. This ensures the text takes only available space and can wrap as needed.
40+
:::
41+
42+
:::note
43+
- Avoid placing long text directly inside a Row without constraints.
44+
- Soft wrap works best when the container or parent widget has width restrictions.
45+
:::
46+
47+
:::info[Additional Rescources]
48+
- [Flutter Text Overflow Class](https://api.flutter.dev/flutter/widgets/TextOverflow-class.html)
49+
:::
Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
keywords: ['menu', 'submenu', 'local state']
3+
slug: /create-submenu
4+
title: Create a Submenu Using Local State
5+
---
6+
7+
# Create a Submenu Using Local State
8+
9+
This guide demonstrates how to implement a toggleable submenu in a FlutterFlow project using local state and conditional visibility logic.
10+
11+
:::info[Prerequisites]
12+
- Basic understanding of Local State.
13+
- Familiarity with the Stack Widget in FlutterFlow.
14+
:::
15+
16+
Follow the steps below to create a Submenu using Local State:
17+
18+
1. **Create a Local State Variable**
19+
- Add a boolean local state variable to your page.
20+
- This variable will control the visibility of the submenu (`true` = open, `false` = closed).
21+
22+
2. **Place the Submenu Inside a Stack**
23+
- Use a `Stack` widget to layer the submenu on top of the page content.
24+
- Position the submenu where you want it to appear.
25+
26+
3. **Control Visibility with Local State**
27+
- Apply a visibility condition on the submenu widget using the boolean state variable.
28+
- When the value is `true`, the submenu will be shown; when `false`, it will be hidden.
29+
30+
4. **Add Toggle Action to Menu Icon**
31+
- On the `onTap` event of the menu icon button, add a conditional action:
32+
- If the state variable is `false`, set it to `true`.
33+
- If it is `true`, set it to `false`.
34+
35+
5. **Close Menu When Item is Tapped**
36+
- After triggering any submenu action, set the local state variable to `false` to close the menu.
37+
38+
6. **Dismiss Menu When Tapping Page Background**
39+
- Wrap the main page content in a `GestureDetector`.
40+
- On tap, set the local state variable to `false` to close the menu when the user taps outside it.
41+
42+
:::tip
43+
The `Stack` widget allows placing widgets on top of each other, which is essential for layering the submenu over other UI elements.
44+
:::
45+
46+
:::info[Examples]
47+
- [Project Example](https://app.flutterflow.io/project/sub-menu-840l5q)
48+
- [Run Mode Preview](https://app.flutterflow.io/run/LfzBGTaef8WldndHa2x4)
49+
:::
50+
51+
![](imgs/20250430121319778896.gif)
490 KB
Loading
Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
---
2+
keywords: ['notification', 'firebase', 'ios', 'push']
3+
slug: /enable-ios-push-notifications
4+
title: Enable Push Notifications for iOS Devices
5+
---
6+
7+
# Enable Push Notifications for iOS Devices
8+
9+
This guide outlines the steps required to ensure push notifications work correctly on iOS devices.
10+
11+
:::info[Prerequisites]
12+
- A registered Apple Developer account
13+
- An app integrated with Firebase
14+
- A real iOS device for testing (not a simulator)
15+
:::
16+
17+
:::warning
18+
Push notifications will **not** work in the following situations:
19+
20+
- The app is running on an iOS simulator.
21+
- The user is not logged in to the app.
22+
- The app is currently open on the device.
23+
:::
24+
25+
26+
Follow the steps below to enable push Notifications for iOS Devices:
27+
28+
1. **Create an APNs Authentication Key in Apple Developer Account**
29+
30+
To send push notifications to iOS devices, Apple requires an APNs key.
31+
32+
1. Log in to your **[Apple Developer Account](https://developer.apple.com/account)**.
33+
2. Navigate to **Certificates, Identifiers & Profiles > Keys**.
34+
3. If no push key is listed, create one.
35+
36+
![](imgs/20250430121405271522.png)
37+
38+
:::tip
39+
Make sure to download the `.p8` file and note your **Key ID** and **Team ID** after generating the key.
40+
:::
41+
2. **Upload the APNs Key to Firebase**
42+
43+
1. Go to your **[Firebase Console](https://console.firebase.google.com/)** and open your project.
44+
2. Navigate to **Project Settings > Cloud Messaging**.
45+
3. Scroll to the **iOS app configuration** section.
46+
4. If no APNs key is listed, upload the `.p8` file you downloaded earlier.
47+
48+
![](imgs/20250430121405587477.png)
49+
50+
:::tip
51+
This step connects your Firebase backend to Apple’s notification system.
52+
:::
53+
54+
3. **Add a Push Notification Identifier**
55+
56+
1. Log back in to your **[Apple Developer Account](https://developer.apple.com/account)**.
57+
2. Navigate to **Certificates, Identifiers & Profiles > Identifiers**.
58+
3. Select your app’s identifier.
59+
4. Enable the **Push Notifications** capability.
60+
61+
![](imgs/20250430121405921022.png)
62+
63+
If this step is skipped, push notifications will not be delivered to iOS devices after deployment.
64+
65+
4. **Refresh Your FlutterFlow Workspace**
66+
67+
To ensure your environment reflects the latest settings:
68+
69+
- Press `Ctrl + R` (Windows) or `Cmd + R` (Mac) to refresh the FlutterFlow editor.
70+
- Clear your browser cache.
71+
- Log out and log back in.
72+
73+
:::note
74+
- Ensure your app permissions for notifications are enabled under **iOS Settings > Notifications**.
75+
- Always test push notifications on a **real device** after deployment.
76+
- Ensure that Firebase Cloud Messaging is correctly set up and linked to your project.
77+
:::

0 commit comments

Comments
 (0)