How does the Flutter calendar component support Chinese (internationalization)

How does the Flutter calendar component support Chinese (internationalization)

---

In App development, we usually need to use international support.

Flutter supports internationalization by default, but before special settings are made, they are displayed in English regardless of the environment. For example, we display a calendar component, which is displayed in English by default.

What should we do if we want to change to Chinese or add other language support?

Setup language support steps

In this example, we will add Chinese support for the calendar component. Let's see how to do it?

1. Add the following dependencies in pubspec.yaml:

flutter_localizations:
    sdk: flutter

This step is to add libraries that support internationalization.

2. Update dependencies

Click "Pub get" directly in Android Studio or use the following command:

flutter pub get

Load the library into the project.

3. Import in main.dart as follows:

import 'package:flutter_localizations/flutter_localizations.dart';

This step is to import the class library.

4. MaterialApp configuration

Then assign values ​​to the two optional parameters localizationsDelegates and supportedLocales in the construction method of MaterialApp:

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
          primaryColor: Colors.green,
          //...
        ),
        localizationsDelegates: [
          GlobalMaterialLocalizations.delegate,//指定本地化的字符串和一些其他的值
          GlobalWidgetsLocalizations.delegate,//定义 widget 默认的文本方向，从左到右或从右到左。
          GlobalCupertinoLocalizations.delegate,//对应的 Cupertino 风格（Cupertino 风格组件即 iOS 风格组件）
        ],
        supportedLocales: [
          const Locale('zh', 'CH'),
          const Locale('en', 'US'),
        ],
        ……
    ……
}

• localizationsDelegates: Specify which Widgets need to be internationalized. For example, in this example, it is specified that Material, Widgets, and Cupertino all use internationalization.
• GlobalMaterialLocalizations: Specify localized strings and some other values.
• GlobalWidgetsLocalizations: Define the default text direction of the widget, from left to right or from right to left.
• GlobalCupertinoLocalizations: Corresponding Cupertino style.

Widget configuration

For example, here is the calendar component configured to display Chinese:

  _showDataPicker(int type) async {
    var picker = await showDatePicker(
        context: context,
        initialDate: DateTime.now(),
        firstDate: DateTime(1986),
        lastDate: DateTime(DateTime.now().year+2),
        locale: Locale("zh"));
    ……
    });

Well, our calendar shows that the Chinese configuration has been completed, you can also try it~

---

**PS: For more exciting content, please check --> "Flutter Development"
**PS: For more exciting content, please check --> "Flutter Development"
**PS: For more exciting content, please check --> "Flutter Development"