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
description: Learn how to effectively utilize App State Variables in FlutterFlow to maintain and manage global application states across all pages and components.
5
5
tags: [App State, FlutterFlow, Data Representation]
6
-
sidebar_position: 4
6
+
sidebar_position: 5
7
7
keywords: [App State, FlutterFlow, Data Representation]
31
29
When you create a custom data type, it internally creates a Struct. A struct, or structure, is a composite data type that lets you combine fields of different data types to construct a data structure to suit your specific needs.
description: Dive into the diverse range of data types supported by FlutterFlow, from basic primitives like integers and strings to complex composite types and built-in functionalities tailored for app development.
5
5
tags: [Data Types, FlutterFlow, Data Representation]
6
-
sidebar_position: 1
6
+
sidebar_position: 2
7
7
keywords: [Data Types, FlutterFlow, Data Representation]
description: Learn how Enums can enhance the management of application states, product types, and process statuses by providing a robust method to handle predefined sets of values.
5
5
tags: [Enums, FlutterFlow, Data Representation]
6
-
sidebar_position: 3
6
+
sidebar_position: 4
7
7
keywords: [Enums, FlutterFlow, Data Representation]
description: Discover the role of Global Properties in FlutterFlow, which provide universal access across all pages of your app to facilitate common tasks and enhance functionality.
5
5
tags: [Global Properties, FlutterFlow, Data Representation]
6
-
sidebar_position: 6
6
+
sidebar_position: 7
7
7
keywords: [Global Properties, FlutterFlow, Data Representation]
8
8
---
9
9
@@ -27,23 +27,250 @@ Global properties are built-in variables exposed by FlutterFlow. You can't creat
27
27
28
28
A list of all the available global properties is as follows:
29
29
30
-
-**Is User Logged In:** Indicates whether a user is currently logged into the app. Useful for providing exclusive features to registered users or adjusting UI elements based on login status.
31
-
-**Current Time:** Retrieves the current date and time.
32
-
-**Current Device Location:** Obtains the user's current location, useful for updating the user's position on Google Maps or storing in a backend database.
30
+
-**Is User Logged In:** Indicates whether a user is currently logged into the app. Useful for providing exclusive features to registered users or adjusting UI elements based on login status. This property is only accessible if you have enabled authentication of any type.
31
+
32
+
-**Current Time**: Fetches the current date and time. Explore [custom formatting](#current-time) options to tailor the DateTime display to your needs.
33
+
34
+
-**Current Device Location:** Obtains he user's current location, ideal for updating their position on Google Maps or storing it in a backend database. [Check out examples](#current-device-location) on how to retrieve and save the current device location.
35
+
33
36
-**Link To Current Page:** Provides the deep link of the current page. Learn more about [adding deep links here](../../ff-concepts/navigation-routing/deep-dynamic-linking.md#adding-deep-link).
34
37
-**Fraction of Screen Width:** Determines the proportional width of the device's screen.
35
38
-**Fraction of Screen Height:** Determines the proportional height of the device's screen.
36
39
-**Screen Width:** Provides the total width of the current device's screen in pixels.
37
40
-**Screen Height:** Provides the total height of the current device's screen in pixels.
38
-
-**Is Android:** Determines if the user is accessing the app on an Android device.
39
-
-**Is iOS:** Determines if the user is accessing the app on an iOS device.
40
-
-**Is Web:** Determines if the user is accessing the app through a web browser.
41
+
-**Is Android:** Determines if the user is accessing the app on an Android device. See [example](#is-androidiosweb).
42
+
-**Is iOS:** Determines if the user is accessing the app on an iOS device. See [example](#is-androidiosweb).
43
+
-**Is Web:** Determines if the user is accessing the app through a web browser. See [example](#is-androidiosweb).
41
44
-**Is Debug Mode:** Indicates if the app is currently running in debug mode, useful for displaying features or performing actions only during debugging.
42
45
-**Is Dark Mode:** Checks if the app's current theme mode is set to dark.
43
46
-**Is Light Mode:** Checks if the app's current theme mode is set to light.
44
-
-**Is On-Screen Keyboard Visible:** Checks if the on-screen or soft keyboard is visible. This is helpful in making UI adjustments if keyboard is visible on screen.
47
+
-**Is On-Screen Keyboard Visible:** Checks if the on-screen or soft keyboard is visible. This is helpful in making UI adjustments if keyboard is visible on screen. See a [quick example](#is-on-screen-keyboard-visible).
45
48
46
49
47
50
:::tip[Generated Code]
48
51
Learn more about the [**Generated Code**](../../ff-concepts/state-management/generated-code.md#global-state) behind Global Properties.
49
-
:::
52
+
:::
53
+
54
+
### Current Time
55
+
56
+
The **Current Time** property allows you to retrieve the current date and time. This option is available when the Source is set to Global Properties.
57
+
58
+
You can use this property to display the current date and time on the screen or pass it to a FlutterFlow or custom widget for further processing.
59
+
60
+
#### Custom formatting
61
+
62
+
Sometimes, you might need to display dates and times in a format that we don't support. This is where the custom date and time formatting comes into play. *Custom Format* enables you to represent date and time data in a multitude of ways.
63
+
64
+
For example, you can enter the text like '*yyyy/MM/dd || kk:mm*', and the date time will be displayed as '2023/07/25 || 10:30'.
65
+
66
+
In the above example, '*yyyy/MM/dd || kk:mm* is the custom format. Here's what it stands for:
67
+
68
+
-`yyyy` represents a four-digit year, like "2023".
69
+
-`MM` is a two-digit month, such as "07" for July.
70
+
-`dd` indicates a two-digit day, for instance, "25".
71
+
-`kk` is for a two-digit hour in 24-hour format, like "10".
72
+
-`mm` stands for a two-digit minute, such as "30".
73
+
74
+
Here are some more format specifiers that you can use the build the custom format:
75
+
76
+
-`d`: Day of the month. E.g., "2" for February 2nd.
77
+
-`E`: Abbreviated weekday. E.g., "Mon" for Monday.
-`yQQQQ`: Full quarter, year. E.g., "1st quarter 2023".
104
+
-`H`: Hour in day (24-hour). E.g., "15" for 3 PM.
105
+
-`Hm`: Hour, minute (24-hour). E.g., "15:30".
106
+
-`Hms`: Hour, minute, second (24-hour). E.g., "15:30:45".
107
+
-`j`: Hour in day (12-hour). E.g., "3 PM".
108
+
-`jm`: Hour, minute (12-hour). E.g., "3:30 PM".
109
+
-`jms`: Hour, minute, second (12-hour). E.g., "3:30:45 PM".
110
+
-`m`: Minute in hour. E.g., "30".
111
+
-`ms`: Minute, second. E.g., "30:45".
112
+
-`s`: Second in minute. E.g., "45".
113
+
-`G`: Era designator. E.g., "AD" in "AD 2023".
114
+
-`L`: Standalone month. E.g., "7" for July.
115
+
-`c`: Standalone day. E.g., "2" for Tuesday.
116
+
-`h`: Hour in AM/PM (1~12). E.g., "3" for 3 AM.
117
+
-`H`: Hour in day (0~23). E.g., "15" for 3 PM.
118
+
-`S`: Fractional second. E.g., "123" for 123 milliseconds.
119
+
-`D`: Day in year. E.g., "50" for the 50th day of the year.
120
+
-`a`: AM/PM marker. E.g., "AM" or "PM".
121
+
-`k`: Hour in day (1~24). E.g., "24" for midnight.
122
+
-`K`: Hour in AM/PM (0~11). E.g., "0" for 12 AM.
123
+
-`Q`: Quarter. E.g., "4" for the fourth quarter.
124
+
125
+
:::info
126
+
For more detailed information, please refer to the [DateFormat class documentation](https://pub.dev/documentation/intl/latest/intl/DateFormat-class.html).
127
+
:::
128
+
129
+
130
+
131
+
### Current Device Location
132
+
133
+
This property is used to get the current device location (aka geolocation). You can access this when the **Source** is set to **Global Properties**.
134
+
135
+
You can use this property to get the user's current location to update on Google Maps or store it in the backend database.
136
+
137
+
:::warning
138
+
At present, testing this property isn't possible in Test mode, but you can use the Run mode for this purpose. To run it on Android, iOS or desktop platforms, use [Local Run](../../testing-deployment-publishing/running-your-app/local-run.md).
139
+
:::
140
+
141
+
142
+
143
+
#### Get Current Device Location: Example
144
+
145
+
Let's see an example of getting the current device location and passing it to a widget (that supports accepting LatLong, for example, Google Maps).
146
+
147
+
Here is an example of how you can retrieve the current device location:
148
+
149
+
1. Select the **widget** (e.g., GoogleMap) from the widget tree or canvas area.
150
+
2. Move to the properties panel, find the **Initial Location** property, and click on **Set from Variable**.
151
+
3. Set the **Source** to **Global Properties**.
152
+
4. Set the **Available Options** to the **Current Device Location**.
153
+
5. Click **Confirm**.
154
+
155
+
<div style={{
156
+
position: 'relative',
157
+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
Use these properties when you want to tailor the user experience for specific platforms. These properties determine whether the user is accessing the app on Android, iOS, or the Web. Knowing the user's platform is essential for customizing functionality to suit each environment. For instance, certain custom widgets or actions might be exclusive to Android.
248
+
249
+
These properties allow you to implement platform-specific features and ensure your app behaves optimally across different devices. Some examples:
250
+
251
+
-**Is Android**: Enable a custom push notification feature that only works on Android devices. By checking if the platform is Android, you can conditionally display a setup screen for this feature.
252
+
253
+
-**Is iOS**: Optimize custom animations or gestures specifically for iOS. By detecting if the user is on an iOS device, you can enable these iOS-specific interactions while providing alternatives for other platforms.
254
+
255
+
-**Is Web**: Implement a file upload feature with a drag-and-drop interface optimized for desktop environments. By checking if the platform is Web, you can provide an enhanced file handling experience that suits web users.
256
+
257
+
### Is On Screen Keyboard Visible
258
+
259
+
This property helps check if the on-screen or soft keyboard is visible on screen. You can access this when the Source is set to Global Properties.
260
+
261
+
#### Hiding bottom navigation bar when a keyboard is visible: Example
262
+
Consider an app where users can input dog details, and a custom bottom navigation bar is present. When users enter dog details, the on-screen keyboard appears, causing the bottom navigation bar to appear over the keyboard. To optimize screen space and improve the user experience, you might want to hide the bottom navigation bar in such instances.
To build such behavior, you can add [Conditional Visibility](../../resources/ui/widgets/widget-commonalities.md#conditional) on the bottom navigation. While adding, use the "Is On-Screen Keyboard Visible" that will hide the bottom navigation bar whenever the keyboard is displayed.
272
+
Using "Is On-Screen Keyboard Visible" to hide bottom navigation
0 commit comments