打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
在 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.ttf

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),
            )),
      ])),
    );
  }
}

截图

https://googleflutter.com/flutter-text-change-font-family/

本文由博客一文多发平台 OpenWrite 发布!

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
unity3d学习笔记(十)NGUI制作中文字体
Flutter ImageFilter 高斯模糊效果
TextView的一些高级应用(自定义字体、显示多种颜色、添加阴影)
@font-face标签解决网站在客户端显示没有的字体
使用Python批量给图片添加文字
blender的汉化_$fly$
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服