在 Flutter 中更改文本的字体系列-阿里云开发者社区

在 Flutter 中更改文本的字体系列

2022-01-24 214

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 在 Flutter 中更改文本的字体系列将字体 .ttf 文件添加到应用程序的文件夹中。说。assets/font/将资产和字体添加到 pubspec.yaml 文件中的 flutter 属性。您可以向应用程序添加一种或多种字体系列。在本教程中，我们将添加两种字体。

在 Flutter 中更改文本的字体系列

将字体 .ttf 文件添加到应用程序的文件夹中。说。assets/font/

将资产和字体添加到 pubspec.yaml 文件中的 flutter 属性。您可以向应用程序添加一种或多种字体系列。在本教程中，我们将添加两种字体。

flutter:
  uses-material-design: true
  assets:
    - assets/font/
  fonts:
    - family: Font1
      fonts:
        - asset: assets/font/font1.ttf
    - family: Font2
      fonts:
        - asset: assets/font/font2.tt

main.dart

import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text("Flutter Tutorial - googleflutter.com"),
      ),
      body: Center(
          child: Column(children: <Widget>[
        Container(
          padding: EdgeInsets.all(20),
          child: Text(
            'Welcome to Flutter Tutorial by googleflutter.com',
            style: TextStyle(
                fontFamily: "Font1", fontSize: 40, fontWeight: FontWeight.bold),
          ),
        ),
        Container(
            padding: EdgeInsets.all(20),
            child: Text(
              'Welcome to Flutter Tutorial by googleflutter.com',
              style: TextStyle(
                  fontFamily: "Font2",
                  fontSize: 40,
                  fontWeight: FontWeight.bold),
            )),
      ])),
    );
  }