Flutter实现自定义字体

363 阅读1分钟

下面是一个简单的例子,在 Flutter 中使用自定义字体资源:

dart复制代码
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String fontPath = 'assets/fonts/OpenSans-Regular.ttf';
    ThemeData themeData = ThemeData(
      textTheme: TextTheme(
        bodyText1: TextStyle(fontFamily: fontPath),
        bodyText2: TextStyle(fontFamily: fontPath),
        headline1: TextStyle(fontFamily: fontPath),
        headline2: TextStyle(fontFamily: fontPath),
        headline3: TextStyle(fontFamily: fontPath),
        headline4: TextStyle(fontFamily: fontPath),
        headline5: TextStyle(fontFamily: fontPath),
        headline6: TextStyle(fontFamily: fontPath),
      ),
    );

    return MaterialApp(
      title: 'Flutter Demo',
      theme: themeData,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Center(
        child: Text(
          'Hello, World!',
          style: Theme.of(context).textTheme.headline1,
        ),
      ),
    );
  }
}

在这个例子中,我们将 Open Sans Regular 字体文件添加到了 Flutter 应用程序的 assets/fonts 文件夹中,并在 MyApp 中定义了一个主题数据 themeData,其中包含了使用该字体的 TextTheme。在 MyHomePage 中,我们使用 CenterText Widget 显示了一段文本,并将其样式设置为 headline1。注意,在 TextStyle 中设置 fontFamily 属性以使用自定义字体资源。