LanguageSelector

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.

For example, you can use the LanguageSelector widget on the onboarding screen to let users choose the app language.

Adding LanguageSelector to Your Project

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:

To add LanguageSelector to your project:

Make sure you have added multi-language support to your app. If you haven't already done so, find the instructions here.
First, drag the Column widget from the Layout Elements tab (in the Widget Panel).
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.
Add the Text widget to show the text.
Translate the text by navigating to Settings and Integration -> General -> Languages -> App Content Translations -> Page Name -> Your Text.
Find the language dropdown above the canvas and try changing it to other languages and see the translated text appear on the canvas.

Changing the properties

The Properties Panel can be used to customize the behavior of your widget.

Add Padding

Here are the instructions on how to add padding.

Adjust The Alignment

Here are the instructions on adjusting the alignment.

Changing the Size

To change the size of the LanguageSelector:

Select the LanguageSelector widget from the widget tree or from the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Language Selector section.
There are three ways to change the size:
- To set to an exact size, select PX and enter the desired values.
- To set the dimensions as a percent of the screen size, select % and enter the desired value.
- To make the height or width the screen's height or width, just click on the infinity icon ().

Changing Color

You can change the background color of the LanguageSelector and a dropdown icon color.

To change the color:

Select the LanguageSelector widget from the widget tree or from the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Language Selector section.
To change the background color of the dropdown button, find the Background Color property, click on the box next to Black, select the color, and then click Use Color or click on Black and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.
To change the dropdown icon color, find the Dropdown Icon Color property, click on the box next to the already selected color, select the color, and then click Use Color or click on the already selected color and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.

Set color dynamically

See how to set a color from variable to any color property of this widget.

Customizing Border

To customize the border such as changing its color and radius:

Select the LanguageSelector widget from the widget tree or from the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Language Selector section.
Find the Border Color property, click on the box next to the already selected color, select the color, and then click Use Color or click on an already selected color and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.
Now, find the Border Radius property below, enter the value 50. By default, the value 50 will be set for all corners.

Customizing Flag

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.

Changing Flag Size

To change the flag size:

Select the LanguageSelector widget from the widget tree or from the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Language Selector section.
Find the Flag Size property and enter the value.

Adding Space between Flag and Text

To add some space between the flag and the language name:

Select the LanguageSelector widget from the widget tree or from the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Language Selector section.
Find the Flag & Text Gap property and enter the value.

Hiding the Flag

To hide the flag:

Select the LanguageSelector widget from the widget tree or from the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Language Selector section.
Checkmark the Hide Flags property to hide the flag (click on it).