Flutter Material 图标(适用于网络)在 Release模式下不起作用

标签 flutter release flutter-web google-material-icons

在为我的网站尝试 flutter-web 时,我发现 Material 图标在 Debug模式下渲染,但它们在 Release模式下不起作用(被框替换)。 navBarMobile.dart 的代码位于此处。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:eva_icons_flutter/eva_icons_flutter.dart';
import 'package:portfolio/globals/myColors.dart';
import 'package:portfolio/globals/myDimens.dart';
import 'package:portfolio/globals/mySpaces.dart';
import 'package:portfolio/globals/myString.dart';

class NavBarMobile extends StatefulWidget {
  _NavBarMobileState createState() => _NavBarMobileState();
}

class _NavBarMobileState extends State<NavBarMobile> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: MyDimens.double_125,
      color: MyColors.white,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: MyDimens.double_20),
        child: Row(
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Row(
                  children: [
                    Container(
                      width: MyDimens.double_16,
                      height: MyDimens.double_16,
                      color: MyColors.accentColor,
                    ),
                    MySpaces.hSmallestGapInBetween,
                    Text(
                      MyStrings.myName,
                      style: TextStyle(
                          color: MyColors.black,
                          fontFamily: 'poppins',
                          fontSize: MyDimens.double_20),
                    ),
                  ],
                ),
                MySpaces.vSmallestGapInBetween,
                Text(
                  MyStrings.myWork.toUpperCase(),
                  style: TextStyle(
                      letterSpacing: 0.5,
                      color: MyColors.black,
                      fontFamily: 'avenir-light',
                      fontSize: MyDimens.double_15),
                ),
              ],
            ),
            Spacer(),
            Icon(Icons.menu, color: MyColors.accentColor, size: MyDimens.double_40,),
          ],
        ),
      ),
    );
  }
}

这是我的笔记本电脑的屏幕截图

  1. Release模式(使用flutter run --release)

Release mode browser screenshot 2. Debug模式(使用flutter run)

Debug mode browser screenshot

其他详细信息:
浏览器 - Chrome
操作系统 - Ubuntu 20.04

最佳答案

既然我找到了解决办法,我想与面临同样问题的其他人分享。就我而言,我通过以下方式解决了这个问题:

  1. web/assets/fonts 目录中下载 MaterialIcons-Regular.tff 字体。
  2. 在文件中添加 [{"fonts":[{"asset":"fonts/MaterialIcons-Regular.ttf"}],"family":"MaterialIcons"}] web/assets/FontManifest.json

关于Flutter Material 图标(适用于网络)在 Release模式下不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65537635/

相关文章:

flutter - 使用勇敢的浏览器调试flutter web app

flutter - 如何根据另一个集合元素对集合进行特定排序?

ios - Flutter:CocoaPods 找不到 pod "ObjectBox"的兼容版本

c# - 临时调试版本和最终应用程序版本

android - 使用 Picasso 和 minifyEnabled 时应用程序崩溃 true

flutter - 我想每次添加不同的图像,我重复使用这张卡。如何在不复制粘贴整个代码的情况下做到这一点

dart - 为什么我不能使用匿名函数返回颜色值?

ios - 如何使用事件 channel 将数据从 swift 流式传输到 flutter?

xcode - 使用 Xcode 4 运行发布版本

flutter - Gif 没有得到动画 flutter web