While trying out flutter-web for a website of mine, I found out that Material Icons are rendering in debug mode, but they are not working in release mode (getting replaced by boxes).
The code for navBarMobile.dart
is here.
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,),
],
),
),
);
}
}
Here are the screenshots of my from my laptop in
flutter run --release
)
2. Debug mode (using
flutter run
)
Additional Details:
Browser - Chrome
OS - Ubuntu 20.04
Since I have found a way out, I'd like to share it with others facing the same issue. In my case, I resolved this by:
MaterialIcons-Regular.tff
font inside web/assets/fonts
dir.[{"fonts":[{"asset":"fonts/MaterialIcons-Regular.ttf"}],"family":"MaterialIcons"}]
in the file web/assets/FontManifest.json