Flutter:我想在运行时将字体应用于整个应用程序文本

时间:2019-03-10 06:47:48

标签: flutter

我的应用程序中有语言选择设置。根据语言选择英语或阿拉伯语,我想使用其他字体系列。我是在MaterialApp()中完成的,但是并没有达到我的目标。

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'OnlyTick',  
      theme: ThemeData(
        primarySwatch: Colors.indigo,
        buttonColor: Colors.indigo,
        iconTheme: IconThemeData(color: Colors.indigo),
        accentIconTheme: IconThemeData(color: Colors.indigoAccent),
        fontFamily: appLang == 'English'?'Proxima':'DroidKufi',
      ),
      debugShowCheckedModeBanner: false,
      home: SplashScreenPage(),
      localizationsDelegates: [
        // const TranslationsDelegate(), //TODO: will create it later, refer https://www.didierboelens.com/2018/04/internationalization---make-an-flutter-application-multi-lingual/
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', ''),
        const Locale('ar', ''),
      ],
      // setHome(),
      routes: routes,
    );
  }

2 个答案:

答案 0 :(得分:2)

假设您正在使用以下结构运行项目:

    void main() => runApp(new App());

将函数setAppFontFamily添加到您的App类中,该类将负责更改应用程序fontFamily

    class App extends StatefulWidget {
      App({Key key,}) :

     super(key: key);

     @override
     _AppState createState() => new _AppState();

      static void setAppFontFamily(BuildContext context, String _selectedFontFamily) {
      _AppState state = context.ancestorStateOfType(TypeMatcher<_AppState>());
         state.setState(() {
            state._fontFamily = _selectedFontFamily;
         });
      }


     }

此后,将一个局部变量添加到您的_AppState类中或您当前在State类中使用的任何名称;

     String _fontFamily = 'Proxima' ; //Initial value before any selection is made

然后将_fontFamily分配给您的Material App fontFamily的{​​{1}}属性:

Theme

完成所有这些步骤之后,您可以使用以下行从应用程序中的任何位置更改应用程序的 theme: ThemeData( primarySwatch: Colors.indigo, buttonColor: Colors.indigo, iconTheme: IconThemeData(color: Colors.indigo), accentIconTheme: IconThemeData(color: Colors.indigoAccent), fontFamily: _fontFamily, ),

fontFamily

答案 1 :(得分:1)

pubspec.yaml

中声明字体
flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: fonts/Raleway-Regular.ttf
        - asset: fonts/Raleway-Italic.ttf
          style: italic
    - family: RobotoMono
      fonts:
        - asset: fonts/RobotoMono-Regular.ttf
        - asset: fonts/RobotoMono-Bold.ttf
          weight: 700

设置默认字体

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Fonts',
      // Set Raleway as the default app font.
      theme: ThemeData(fontFamily: 'Raleway'),
      home: MyHomePage(),
    );
  }
}

更多参考Flutter Documentation