Text loses color on iPhone XR, 8, SE, 6 8000 and 5s #24234
Comments
|
The issue is the quote (in case someone else has to look 2 minutes to see it :D )
|
|
@GaryQian may know |
|
So the way font weight resolution works is that if a requested weight is not available, it will either try to fake-bold it by extending the edges or use the closest available weight font. Here are a few ideas that may or may not be applicable: One possible idea is that since this is dependent on the weighting of the font, could it be that not all of the available weights of the font have been included? The source code Roman font defines Black, Bold, ExtraLight, Light, Medium, Regular, and SemiBold. That seems consistent with most well-defined font families. However, it seems that you are able to find the correct glyph, which indicates the correct character was found, but somehow it failed to render in the right color. The black color could possibly come from another TextStyle overlaid on top of the one defined. In the libTxt code, TextStyles stack on top of each other, with properties defined by upper layers overriding the ones below. Regarding it only happening on certain devices, it is within the realm of possibility that certain devices ship with different fonts, and that it is font-availability based (we have seen this with Samsung devices) but I think it is less likely with iOS. Those are just some early exploratory thoughts on the issue. |
|
A idea I had was that it might be caused by the resolution, so I mapped out the resolution and screen size of each device but there seemed to be no pattern: A new idea/question I have is if flutter is able to read multiple font styles front 1 font file. Normally you import a font with multiple assets and set the font weight for each asset but in this case all of the styles are in 1 file. I am going to experiment with other fonts that do not have their styles divided into separate files and share my findings here. |
|
Alright so I tried using the OTF file provided from the releases but that crashed the app. However, I converted the old TTF font file to OTF using https://convertio.co/ttf-otf/ and added it to the assets and now it works but only displays 2 styles even though there should be a bunch more. The issue comes down to how flutter reads multiple styles from a single font file, to fix this I downloaded the font into multiple TTF files separated by style and imported each with the appropriate font weight. This is something that can be fixed in the far future when flutter is in release as it is not an immediate issue in beta therefore you guys can close this unless you want to keep it open for a future goal. |
|
@jason-simmons @goderbauer You guys might have some insight on the font-loading aspect of this bug. Thanks @littlemarc2011 for figuring this out, that looks like some good information to go off of! |
@zoechi @GaryQian |
|
I can reproduce using w300 and w900, on these simulators Font complete code sampleimport 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
theme: ThemeData.dark(),
home: Home(),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Material App Bar'),
),
body: Center(
child: SizedBox(
width: double.infinity,
child: Text(
"“",
style: TextStyle(
color: Color(0xFFE971).withOpacity(1.0),
fontSize: 120.0,
fontFamily: "SourceCodeVariable",
fontWeight: FontWeight.w900,
),
textAlign: TextAlign.left,
),
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {},
),
);
}
} fonts:
- family: SourceCodeVariable
fonts:
- asset: fonts/SourceCodeVariable-Italic.ttf
- asset: fonts/SourceCodeVariable-Roman.ttfflutter doctor -v[✓] Flutter (Channel master, 1.24.0-4.0.pre.33, on Mac OS X 10.15.7 19H2
darwin-x64, locale en-GB)
• Flutter version 1.24.0-4.0.pre.33 at /Users/tahatesser/Code/flutter_master
• Framework revision 351ccf7eaf (5 hours ago), 2020-10-22 23:28:51 -0700
• Engine revision defa8be2b1
• Dart version 2.11.0 (build 2.11.0-242.0.dev)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
• Android SDK at /Users/tahatesser/Code/sdk
• Platform android-30, build-tools 30.0.2
• ANDROID_HOME = /Users/tahates
8000
ser/Code/sdk
• Java binary at: /Applications/Android
Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build
1.8.0_242-release-1644-b3-6222593)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 12.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 12.1, Build version 12A7403
• CocoaPods version 1.10.0.rc.1
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 4.1)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build
1.8.0_242-release-1644-b3-6222593)
[✓] VS Code (version 1.50.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.15.1
[✓] Connected device (4 available)
• Taha’s iPhone (mobile) • 00008020-001059882212002E • ios • iOS
14.1
• macOS (desktop) • macos • darwin-x64 • Mac
OS X 10.15.7 19H2 darwin-x64
• Web Server (web) • web-server • web-javascript •
Flutter Tools
• Chrome (web) • chrome • web-javascript •
Google Chrome 86.0.4240.111
• No issues found! |
|
Verified this issue using the code sample provided + mentioned custom font and ran on below iOS simulators with latest stable version and confirmed that the text is now rendered properly with the color as shown below: Based on above verification, I think it is safe to close this issue as fixed, since there have been lot of updates to the framework since the issue was filed and last triaged. If anybody disagrees or still seeing the same issue using latest version, file a new issue with relevant details. |
|
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of |
Originally I came across this using
flutter run -d allto view how the app looked on multiple devices, and I realized when I lowered the font weight that the text turned black on the iPhone SE. I then ran the app on only iPhone SE through IntelliJ and it yielded the same results (meaning it had nothing to do with it running on multiple devices at once). I got rid of the SizedBox and the same thing happened.Font weight 500:
Font weight 900:
Maybe it was just the iPhone SE? Nope:
At this point I said heck with it and launched all of them:
5s, 6, SE, 8 and XR all showed the text in black.
XS Max, XS, X, 8 Plus and 7 Plus all showed the text correctly.
Steps to Reproduce
flutter analyze
flutter doctor -v
The text was updated successfully, but these errors were encountered: