Skip to content

Commit 7a7cded

Browse files
pinkeshmarspinkeshmars
committed
Added Firebase Remote Config
1 parent caf10c8 commit 7a7cded

File tree

4 files changed

+170
-1
lines changed

4 files changed

+170
-1
lines changed

‎docs/ff-integrations/firebase/connect-to-firebase-setup.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ slug: /integrations/firebase/connect-to-firebase
33
title: Connect to Firebase
44
description: Learn how to integrate Firebase with your FlutterFlow app to add user authentication, cloud storage, real-time databases, and more.
55
tags: [FlutterFlow, Firebase, Integration, User Authentication, Cloud Storage, Real-Time Database]
6-
sidebar_position: 1
6+
sidebar_position: 0
77
keywords: [FlutterFlow, Firebase, Integration, User Authentication, Cloud Storage, Real-Time Database]
88
---
99

‎docs/ff-integrations/firebase/imgs/enable-remote-config.avif

276 KB
Binary file not shown.

‎docs/ff-integrations/firebase/imgs/show-hide-fi.avif

87.8 KB
Binary file not shown.

‎docs/ff-integrations/firebase/remote-config.md

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
---
2+
slug: /integrations/firebase/remote-config
3+
title: Remote Config
4+
description: Learn how to integrate Firebase Remote Config in your FlutterFlow app.
5+
tags: [FlutterFlow, Firebase, Remote Config]
6+
sidebar_position: 1
7+
keywords: [FlutterFlow, Firebase, Remote Config]
8+
---
9+
10+
# Remote Config
11+
12+
[Firebase remote config](https://firebase.google.com/docs/remote-config) allows you to control your app's behavior and appearance without pushing an app update. For example, you could use it to change or show/hide certain elements of your app, such as a promo banner and Santa hat, or use it as a feature flag (payments, food delivery) with no need to publish an app update.
13+
14+
![Using Firebase Remote Config to show/hide a feature](imgs/show-hide-fi.avif)
15+
16+
When you enable the Remote Config, you must specify the parameter in our builder (called 'in-app defaults') and inside the Remote Config dashboard of your [Firebase console](https://console.firebase.google.com/). When the app starts, it fetches config values from the Firebase console, and for any reason, if it fails, your app will use the in-app defaults.
17+
18+
:::warning
19+
The app will try to fetch values every time it starts. However, due to the minimum fetch interval of 1 hour (set by default), the values won't be fetched more than once in 1 hour.
20+
:::
21+
22+
## Using Firebase Remote Config
23+
24+
Follow the steps below to use the Remote Config:
25+
26+
### 1. Enable Remote Config
27+
28+
To enable it, navigate to **Settings and Integrations** > **Integrations** > **Firebase Remote Config** and **Enable Remote Config**.
29+
30+
![Enabling Remote Config](imgs/enable-remote-config.avif)
31+
32+
### 2. Add parameter in Firebase Console
33+
34+
You will be able to dynamically control your app using the parameters created in the Firebase Console of your project.
35+
36+
To create the parameter:
37+
38+
1. Navigate to the [Firebase Console](https://console.firebase.google.com/u/0/) > Enagage > Remote Config** page.
39+
2. If this is the first time, click **Create configuration** button.
40+
3. Click **Add parameter**. This will open the **Create parameter** section on the right side.
41+
4. Enter the **Parameter name** (e.g., *show_promo_banner*, *primary_color*, etc.).
42+
5. Set the **Data type** among the *String*, *Number*, *Boolean*, and *JSON*.
43+
6. Set the **Default value**.
44+
7. If you enable the **Use in-app default** toggle, any change made to this parameter from here won't be reflected in your app. Instead, your app will use values from the parameters defined in our builder (see how to create it in the [next step](#3-add-parameter-in-flutterflow)).
45+
8. Click **Save**.
46+
9. Click **Publish Changes** to make this parameter immediately available to your app.
47+
48+
49+
<div style={{
50+
position: 'relative',
51+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
52+
height: 0,
53+
width: '100%'}}>
54+
<iframe
55+
src="https://demo.arcade.software/xTbhNczhOdJfzpeSBv7e?embed&show_copy_link=true"
56+
title=""
57+
style={{
58+
position: 'absolute',
59+
top: 0,
60+
left: 0,
61+
width: '100%',
62+
height: '100%',
63+
colorScheme: 'light'
64+
}}
65+
frameborder="0"
66+
loading="lazy"
67+
webkitAllowFullScreen
68+
mozAllowFullScreen
69+
allowFullScreen
70+
allow="clipboard-write">
71+
</iframe>
72+
</div>
73+
<p></p>
74+
75+
### 3. Add parameter in FlutterFlow
76+
77+
Parameters added to your FlutterFlow project are called in-app defaults. To add them:
78+
79+
1. Navigate to **Settings and Integrations** > **Integrations** > **Firebase Remote Config**.
80+
2. Click **+ Add Parameter**. A pop will open.
81+
3. Enter the parameter **name**, select the **Data Type**, set its **Default Value**, and click **Create Parameter**. **Note**: The parameter name must match the name given in the [previous step](#2-add-parameter-in-firebase-console).
82+
83+
<div style={{
84+
position: 'relative',
85+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
86+
height: 0,
87+
width: '100%'}}>
88+
<iframe
89+
src="https://demo.arcade.software/LPFTBWYk2GIQ2TZzpZzF?embed&show_copy_link=true"
90+
title=""
91+
style={{
92+
position: 'absolute',
93+
top: 0,
94+
left: 0,
95+
width: '100%',
96+
height: '100%',
97+
colorScheme: 'light'
98+
}}
99+
frameborder="0"
100+
loading="lazy"
101+
webkitAllowFullScreen
102+
mozAllowFullScreen
103+
allowFullScreen
104+
allow="clipboard-write">
105+
</iframe>
106+
</div>
107+
<p></p>
108+
109+
### 4. Use parameter
110+
111+
Now you can access the newly created parameter from the **Set from Variable > Firebase Remote Config**.
112+
113+
Here's an example of using the remote config parameter to set the [conditional visibility](../../resources/ui/widgets/widget-commonalities.md#conditional) for the social login feature.
114+
115+
<div style={{
116+
position: 'relative',
117+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
118+
height: 0,
119+
width: '100%'}}>
120+
<iframe
121+
src="https://demo.arcade.software/BXpPxrWjncgJ5QqqhCTW?embed&show_copy_link=true"
122+
title=""
123+
style={{
124+
position: 'absolute',
125+
top: 0,
126+
left: 0,
127+
width: '100%',
128+
height: '100%',
129+
colorScheme: 'light'
130+
}}
131+
frameborder="0"
132+
loading="lazy"
133+
webkitAllowFullScreen
134+
mozAllowFullScreen
135+
allowFullScreen
136+
allow="clipboard-write">
137+
</iframe>
138+
</div>
139+
<p></p>
140+
141+
Here's another example that changes the app's background using the color value from the Remote Config parameter.
142+
143+
<div style={{
144+
position: 'relative',
145+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
146+
height: 0,
147+
width: '100%'}}>
148+
<iframe
149+
src="https://demo.arcade.software/4RHPm1hnQpL7kpN2NcRB?embed&show_copy_link=true"
150+
title=""
151+
style={{
152+
position: 'absolute',
153+
top: 0,
154+
left: 0,
155+
width: '100%',
156+
height: '100%',
157+
colorScheme: 'light'
158+
}}
159+
frameborder="0"
160+
loading="lazy"
161+
webkitAllowFullScreen
162+
mozAllowFullScreen
163+
allowFullScreen
164+
allow="clipboard-write">
165+
</iframe>
166+
</div>
167+
<p></p>
168+
169+
and all this happens without requiring users to download the new app update. Isn't it cool!

0 commit comments

Comments
 (0)