Flutter Material Icons (for web) 在发布模式下不起作用

Posted 2023-02-23

【中文标题】Flutter Material Icons (for web) 在发布模式下不起作用

【英文标题】：Flutter Material Icons (for the web) don't work in release mode

【发布时间】：2021-04-08 18:25:46

【问题描述】：

在为我的网站尝试 flutter-web 时，我发现 Material Icons 在调试模式下呈现，但它们在发布模式下不工作（被盒子取代）。 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,),
          ],
        ),
      ),
    );
  

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

发布模式（使用flutter run --release）

2. 调试模式（使用flutter run）

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

【问题讨论】：

你的 pubspec 有 flutter: uses-material-design: true 吗？

是的，确实有那一行。

在使用 kReleaseMod 和一些 Riverpod 覆盖注释掉条件块后，我解决了类似的问题。在这一点上，我的信念是，在小部件构建过程中，由于数据状态不正确，图像无法呈现。我建议尝试一个带有单个图标的简单测试应用程序并测试它的发布版本。如果可行，请仔细检查所有这些全局 dart 文件，以确保它们返回您所期望的所有内容。

其实这个问题已经按照这里的文章解决了。 -ptyagicodecamp.github.io/…。感谢 Randal Schwartz 在 Gitter 上帮助我。

【参考方案1】：

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

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

【讨论】：

我的发行版也有同样的问题。我添加了 MaterialIcons-Regular.tff，至于 FontManifest.json，我是否为它创建文件和文件夹？并将上面的行粘贴进去？还是已经有我需要下载的类似文件了？

github.com/google/material-design-icons/blob/master/font/…