Skip to content

Commit 9042b56

Browse files
pinkeshmarsPoojaB26
pinkeshmars
and
PoojaB26
authored
Missing topics 2.5 (#121)
* Added static map widget * Added language selector widget * Added API calls action * Added ScrollTo action * Added drawer action * Added soap apis * Added submit bug report * verified and fixed redirect links * verified and fixed redirect links * Move langauge selector under localization. * Formatting fixes * Fix the info card description. * Update redirect url. * Revert url change --------- Co-authored-by: PoojaB26 <[email protected]>
1 parent 9fcdabf commit 9042b56

40 files changed

+1250
-55
lines changed

‎docs/ff-concepts/localization-accessibility/add-multiple-languages.md

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
---
22
slug: /concepts/multiple-languages
3-
title: Languages
3+
title: Localizing App
44
tags: [Multilingual, Localization, Internationalization]
55
keywords: [FlutterFlow, multiple languages, app localization, internationalization, multilingual support]
66
description: Learn how to support multiple languages in your FlutterFlow app.
77
sidebar_position: 1
88
---
99

10-
# Languages
10+
# Localizing App
1111

1212
A multi-language feature allows you to show all your app's text in different languages.
1313

@@ -528,3 +528,7 @@ To show the language-dependent text:
528528
</iframe>
529529
</div>
530530
<p></p>
531+
532+
:::tip[Language Selector Widget]
533+
You can also use our in built component **[LanguageSelector widget](language-selector.md)** to allow the user the set the language of your app from a language dropdown.
534+
:::

‎docs/ff-concepts/localization-accessibility/language-selector.md

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
---
2+
slug: /concepts/multiple-languages/language-selector
3+
title: Language Selector Widget
4+
tags: [Multilingual, Base Elements]
5+
keywords: [FlutterFlow, Language Selector, Base Widget, Multilingual, Localization, Internationalization]
6+
description: Learn how to add the LanguageSelector widget in your FlutterFlow app.
7+
---
8+
9+
# LanguageSelector
10+
The LanguageSelector widget is used to allow a user to set the language of your app. The LanguageSelector widget shows the currently selected language and opens up a list of all languages (that you support) when you tap on it.
11+
12+
For example, you can use the LanguageSelector widget on the onboarding screen to let users choose the app language.
13+
14+
## Adding LanguageSelector Widget
15+
16+
Let's build an example of adding the LanguageSelector and see how the app language changes when selecting a different language from the LanguageSelector. Here's how it looks:
17+
18+
<div style={{
19+
position: 'relative',
20+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
21+
height: 0,
22+
width: '100%'}}>
23+
<iframe
24+
src="https://demo.arcade.software/yHRU7CbH70L4brfnIAFQ?embed&show_copy_link=true"
25+
title=""
26+
style={{
27+
position: 'absolute',
28+
top: 0,
29+
left: 0,
30+
width: '100%',
31+
height: '100%',
32+
colorScheme: 'light'
33+
}}
34+
frameborder="0"
35+
loading="lazy"
36+
webkitAllowFullScreen
37+
mozAllowFullScreen
38+
allowFullScreen
39+
allow="clipboard-write">
40+
</iframe>
41+
</div>
42+
<p></p>
43+
44+
To add LanguageSelector to your project:
45+
46+
1. Make sure you have added multi-language support to your app. If you haven't already done so, find the instructions here.
47+
2. First, drag the **Column** widget from the **Layout Elements** tab (in the Widget Panel).
48+
3. Now, add the **LanguageSelector** widget (inside Column) by dragging it from the **Base Elements** tab or adding it directly from the widget tree. Align it in the center.
49+
4. Add the [**Text**](../../widgets/built-in-widgets/text.md) widget to show the text.
50+
5. Translate the text by navigating to Settings and Integration -> General -> Languages -> App Content Translations -> Page Name -> Your Text.
51+
6. Find the language dropdown above the canvas and try changing it to other languages and see the translated text appear on the canvas.
52+
53+
<div style={{
54+
position: 'relative',
55+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
56+
height: 0,
57+
width: '100%'}}>
58+
<iframe
59+
src="https://demo.arcade.software/fhDyEymKhaq0amxgvQkv?embed&show_copy_link=true"
60+
title=""
61+
style={{
62+
position: 'absolute',
63+
top: 0,
64+
left: 0,
65+
width: '100%',
66+
height: '100%',
67+
colorScheme: 'light'
68+
}}
69+
frameborder="0"
70+
loading="lazy"
71+
webkitAllowFullScreen
72+
mozAllowFullScreen
73+
allowFullScreen
74+
allow="clipboard-write">
75+
</iframe>
76+
</div>
77+
<p></p>
78+
79+
80+
## Customization
81+
82+
You can customize the behavior of this widget using the various properties available under the [properties panel](../../../../intro/ff-ui/builder.md#navigation-menu).
83+
84+
### Customizing Flag
85+
86+
By default, the LanguageSelector widget shows the country flag before the language name. You can change the flag's size, adjust the spacing between flag and language name or completely hide the flag.
87+
88+
<div style={{
89+
position: 'relative',
90+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
91+
height: 0,
92+
width: '100%'}}>
93+
<iframe
94+
src="https://demo.arcade.software/42ca2WpXy8Vi3sFOZHAW?embed&show_copy_link=true"
95+
title=""
96+
style={{
97+
position: 'absolute',
98+
top: 0,
99+
left: 0,
100+
width: '100%',
101+
height: '100%',
102+
colorScheme: 'light'
103+
}}
104+
frameborder="0"
105+
loading="lazy"
106+
webkitAllowFullScreen
107+
mozAllowFullScreen
108+
allowFullScreen
109+
allow="clipboard-write">
110+
</iframe>
111+
</div>
112+
<p></p>
113+
114+
### Adding Space between Flag and Text
115+
116+
To add some space between the flag and the language name:
117+
118+
1. Select the **LanguageSelector** widget from the widget tree or from the canvas area.
119+
2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Language Selector** section.
120+
3. Find the **Flag & Text Gap** property and enter the value.
121+
122+
<div style={{
123+
position: 'relative',
124+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
125+
height: 0,
126+
width: '100%'}}>
127+
<iframe
128+
src="https://demo.arcade.software/S9jTRxew8s3mACc4Bu6t?embed&show_copy_link=true"
129+
title=""
130+
style={{
131+
position: 'absolute',
132+
top: 0,
133+
left: 0,
134+
width: '100%',
135+
height: '100%',
136+
colorScheme: 'light'
137+
}}
138+
frameborder="0"
139+
loading="lazy"
140+
webkitAllowFullScreen
141+
mozAllowFullScreen
142+
allowFullScreen
143+
allow="clipboard-write">
144+
</iframe>
145+
</div>
146+
<p></p>
147+
148+
### Hiding the Flag
149+
150+
To hide the flag:
151+
152+
1. Select the **LanguageSelector** widget from the widget tree or from the canvas area.
153+
2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Language Selector** section.
154+
3. Checkmark the **Hide Flags** property to hide the flag (click on it).
155+
156+
<div style={{
157+
position: 'relative',
158+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
159+
height: 0,
160+
width: '100%'}}>
161+
<iframe
162+
src="https://demo.arcade.software/mBDmeXu7zZEJiye8HlNJ?embed&show_copy_link=true"
163+
title=""
164+
style={{
165+
position: 'absolute',
166+
top: 0,
167+
left: 0,
168+
width: '100%',
169+
height: '100%',
170+
colorScheme: 'light'
171+
}}
172+
frameborder="0"
173+
loading="lazy"
174+
webkitAllowFullScreen
175+
mozAllowFullScreen
176+
allowFullScreen
177+
allow="clipboard-write">
178+
</iframe>
179+
</div>
180+
<p></p>

‎docs/ff-integrations/maps/google-maps/google-maps-widget.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ sidebar_position: 2
77
keywords: [FlutterFlow, Google Maps, Widget, Integration]
88
---
99

10-
# Adding Google Maps widget
10+
# Google Maps Widget
1111

12-
The Google Maps widget enables the integration of interactive maps into your app, offering users
12+
The **Google Maps** widget enables the integration of interactive maps into your app, offering users
1313
valuable geographical insights. For instance, in a food delivery app, this widget could display the
1414
locations of restaurants. It offers a range of customization options, allowing you to tailor the
1515
display with various map types and markers to suit your specific needs.

‎docs/ff-integrations/maps/launch-map.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
title: Launch Map
44
slug: /integrations/maps/launch-map
55
description: Learn how to open Map app installed on your device from your FlutterFlow app.
6-
sidebar_position: 1
6+
sidebar_position: 2
77
tags: [Maps, Action]
88
keywords: [FlutterFlow, Launch Maps, Action,]
99
---

‎docs/ff-integrations/maps/mapbox/_category_.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"label": "Mapbox",
3+
"position": 1
4+
}

0 commit comments

Comments
 (0)