在为我的网站尝试 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,),
],
),
),
);
}
}
这是我的笔记本电脑的屏幕截图
- Release模式(使用
flutter run --release
)
其他详细信息:
浏览器 - Chrome
操作系统 - Ubuntu 20.04
最佳答案
既然我找到了解决办法,我想与面临同样问题的其他人分享。就我而言,我通过以下方式解决了这个问题:
- 在
web/assets/fonts
目录中下载MaterialIcons-Regular.tff
字体。 - 在文件中添加
[{"fonts":[{"asset":"fonts/MaterialIcons-Regular.ttf"}],"family":"MaterialIcons"}]
web/assets/FontManifest.json
关于Flutter Material 图标(适用于网络)在 Release模式下不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65537635/