【Flet】言語設定ができるようになった

Fletの[DataPicker](https://flet.dev/docs/controls/datepicker)はカレンダー設定を使うときに便利なコンポーネントです。

```date_picker.py
import datetime
import flet as ft

def main(page: ft.Page):
    def change_date(e):
        print(e)
        print(f"Date picker changed, value is {date_picker.value}")

    def date_picker_dismissed(e):
        print(f"Date picker dismissed, value is {date_picker.value}")

    today = datetime.datetime.now().date()
    next_year = today + datetime.timedelta(days=365)

    date_picker = ft.DatePicker(
        on_change=change_date,
        on_dismiss=date_picker_dismissed,
        first_date=today,
        last_date=next_year,
    )

    page.overlay.append(date_picker)

    date_button = ft.ElevatedButton(
        "Pick date",
        icon=ft.icons.CALENDAR_MONTH,
        on_click=lambda _: date_picker.pick_date(),
    )

    page.add(date_button)

ft.app(target=main)
```

![us_calender.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1895890/fc88bad9-a8ee-bafb-bc88-499f7114f76d.png)

しかし、デフォルトの地域がUSになっているため、dd/mm/yyyyという表示になります。
今までは表示を日本式（yyyy/mm/dd）に変えても入力チェックがUS式のため、日本式で使用することができませんでした。

![us_calender_validation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1895890/ead22f83-7d44-9ce8-ebce-b07094c5a888.png)

## Ver0.22.0から、言語設定ができるように

Flet 0.22.0から、Locale設定（locale_configuration）ができるようになりました。

https://github.com/flet-dev/flet/blob/main/CHANGELOG.md#0220

https://flet.dev/blog/controls-and-theming-enhancements

## locale_configuration

Fletのドキュメント[^1]に記載されています。

>A locale configuration for the app. Value is an instance of LocaleConfiguration class which has the following properties:
>
> - supported_locales - a list of Locales that the app plans to support. If the provided value is None or list is empty, this property internally defaults to [Locale("en", "US")] (American English locale) by default.
> - current_locale - the current Locale of the app. If the provided locale is not present in supported_locales, then this property will be set to supported_locales[0] (the first item of the list).
>
>Locale class has the following properties:
> - language_code - the language code of the locale.
> - country_code - the country code of the locale.
> - script_code - the script code of the locale.

[^1]: https://flet.dev/docs/controls/page/#locale_configuration

supported_localesはアプリが対応する言語を設定します。
複数設定が可能です。

current_localeは現時点の言語（≒アプリ起動時の言語）を設定します。
supported_localesで設定した言語から設定します。[^2]

デフォルトはen,USです。
言語を設定するときは[言語コード](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)と[国コード](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)を指定します。

```locales.py

# サポート言語を日本語と英語で、初期値を日本語に設定する
page.locale_configuration = ft.LocaleConfiguration(
    supported_locales=[ft.Locale("ja", "JP"), ft.Locale("en", "US")], current_locale=ft.Locale("ja", "JP")
    )

```

[^2]:current_localeでsupported_localesにない言語を設定した場合、supported_localesで最初に設定した言語が選択されます。

## サンプルコード

詳しい実装方法は以下のブログに記載しています。

https://python.plainenglish.io/app-localization-in-flet-5b523e83ca89

Locale設定をして、DatePickerを使用してみます。[^3]

```date_picker_japanese.py

import datetime
import flet as ft

def main(page: ft.Page):
    # 日本語設定
    page.locale_configuration = ft.LocaleConfiguration(
        supported_locales=[
            ft.Locale("ja", "JP"),
            ft.Locale("en", "US")
        ], 
        current_locale=ft.Locale("ja", "JP")
    )

    def change_date(e):
        print(e)
        print(f"Date picker changed, value is {date_picker.value}")

    def date_picker_dismissed(e):
        print(f"Date picker dismissed, value is {date_picker.value}")

    today = datetime.datetime.now().date()
    next_year = today + datetime.timedelta(days=365)

    date_picker = ft.DatePicker(
        on_change=change_date,
        on_dismiss=date_picker_dismissed,
        first_date=today,
        last_date=next_year,
    )

    page.overlay.append(date_picker)

    date_button = ft.ElevatedButton(
        "Pick date",
        icon=ft.icons.CALENDAR_MONTH,
        on_click=lambda _: date_picker.pick_date(),
    )

    page.add(date_button)


ft.app(target=main)
```

Localeを日本語に設定すると、カレンダーも日本式になります。

![jp_calender.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1895890/cbd35bb5-55b0-7320-18dc-de83b53fbe7c.png)

[^3]:Python3.10、Flet0.22.0で実装

## 使ってみて

いままで「日本語式だったらな～」と思うことがあったのでこのアップデートはとてもありがたかったです。
今後もどんどんアップデートする予定とのことなのでより活用していきたいと思います。

## 参考ページ

https://flet.dev/blog/controls-and-theming-enhancements/

https://flet.dev/docs/controls/page/#locale_configuration

https://python.plainenglish.io/app-localization-in-flet-5b523e83ca89