Flutter Material 图标(用于网络)在发布模式下不起作用
Flutter Material Icons (for the web) don't work in release mode
在为我的网站试用 flutter-web 时,我发现 Material 图标在调试模式下呈现,但它们在发布模式下不工作(被框替换)。
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
OS - Ubuntu 20.04
既然找到了出路,我想与面临同样问题的人分享。就我而言,我通过以下方式解决了这个问题:
- 正在
web/assets/fonts
目录中下载 MaterialIcons-Regular.tff
字体。
- 在文件中添加
[{"fonts":[{"asset":"fonts/MaterialIcons-Regular.ttf"}],"family":"MaterialIcons"}]
web/assets/FontManifest.json
在为我的网站试用 flutter-web 时,我发现 Material 图标在调试模式下呈现,但它们在发布模式下不工作(被框替换)。
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
)
flutter run
)
其他详细信息:
浏览器 - Chrome
OS - Ubuntu 20.04
既然找到了出路,我想与面临同样问题的人分享。就我而言,我通过以下方式解决了这个问题:
- 正在
web/assets/fonts
目录中下载MaterialIcons-Regular.tff
字体。 - 在文件中添加
[{"fonts":[{"asset":"fonts/MaterialIcons-Regular.ttf"}],"family":"MaterialIcons"}]
web/assets/FontManifest.json