flutter - 如何在 Flutter 中为不同的区域设置不同的字体

Question

有没有办法为不同的locals设置不同的字体？英文字体是我的应用程序的默认字体，但我的阿拉伯语 locale 需要不同的字体。

Answer 1

使用语言环境和主题

这个问题需要做两件事:

• 获取系统语言环境
• 根据语言环境提供具有正确值的主题。

可以通过从 dart:ui 调用 window.locale 轻松检索语言环境。有一个相当in-depth stack overflow post on locale here如果您需要有关语言环境方面的更多信息。

根据语言环境，我们将 ThemeData 上的 fontFamily 属性设置为 pubspec.yaml 文件中定义的所需字体。 ( instructions on adding a custom font are here )

例子

import 'dart:ui';
import 'package:flutter/material.dart';

class App extends StatefulWidget {
  const App({Key? key}) : super(key: key);

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  VoidCallback rebuildOnLocaleChange() => () => setState(() {});

  @override
  Widget build(BuildContext context) {
    // Retrieve locale from the system information.
    Locale myLocale = window.locale;
    PlatformDispatcher.instance.onLocaleChanged = rebuildOnLocaleChange();

    return MaterialApp(
      theme: ThemeData(
        // If language is english - we use the default font which is a sans-serif roboto font
        // If not, we use the serif roboto font, must be added in asset and pubspec.yaml to work.
        // TODO: replace the languageCode check with what you need.
        fontFamily: myLocale.languageCode == "en" ? null : "RobotoSerif",
      ),
      home: const AppScreen(),
    );
  }
}

// Just a simple screen with a text updating when the locale changes.
class AppScreen extends StatelessWidget {
  const AppScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          "Test",
          style: Theme.of(context).textTheme.headline1,
        ),
      ),
    );
  }
}

main() => runApp(const App());

下图显示当 languageCode 为“en”时主题设置为默认字体(左)，其他区域设置为自定义字体(右)。