First of all, let’s take a look at a design drawing, which is one of the design drawings in our company’s App. To save development resources, the designer only produces a set of design drawings for iOS, and then implements the relevant design effects for Android and iOS (Android will also make some minor adjustments in some places).

As you can see from the screenshot, the title “Ask doctor by Department” is in pingfangsc-Medium, which is an Apple font: Pingfangsc-Medium.

As you can see from the screenshot, Zeplin has given us the code to automatically generate TextView:

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:fontFamily="@font/ping_fang_sc_medium" android:textStyle="normal" android:textSize="24sp" Android :textColor="@color/grey2" Android :lineSpacingExtra="3sp" Tools :text="Copy the code

In real development, however, we won’t use the above code directly, as it would require the introduction of the Apple font library, which is approximately 77 MB and has copyright issues, into the Android project. The actual code for Android is as follows:

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textStyle="bold" Android: textSize = "24 sp" android: textColor = "@ color/grey2" android: includeFontPadding = "false" tools: text = "according to the department asked the doctor" / >Copy the code

We’ll set android:textStyle=”bold” and make the font bold to achieve the design effect.

Recently, we modified this page with Flutter and encountered a problem that the bold font of Flutter does not work on Android. Here is the problem and the solution we adopted.

This page is developed by our iOS students. According to the design drawing in Zeplin, we use Fontweight. w500 to achieve the design effect of Pingfangsc-Medium. The code is as follows:

TextStyle(fontSize: 24, color: color (0xff333333), fontWeight: fontweight.w500,)Copy the code

When the result was accepted, the designer found that Android was not bold. In order to find out the reason, I wrote a special Demo:

Font: color: color (0xff333333),), font: color (0xff333333) TextStyle(fontSize: 24, color: color (0xff333333), fontWeight: fontweight.w500,),), TextStyle( fontSize: 24, color: Color(0xff333333), fontWeight: FontWeight.bold, ), )Copy the code

This works on Android and iOS:

W500 does not have a bold effect on Chinese on Android. There are also issues on Flutter Github about this issue:

Github.com/flutter/flu…

Github.com/flutter/flu…

Github.com/flutter/flu…

However, these issues have been closed. Officials explained that Flutter uses the system’s default font, and Android’s built-in Chinese font does not support varying degrees of thickness. If you want medium on Android, you can use a heavier font, such as fontweight.w500, which has no effect, you can use fontweight.w600.

As mentioned above, our design is designed for iOS. In addition to Medium, there will also be light, Regular, Semibold, bold and other fonts of different thickness. In order to better adapt Android and iOS, our final compatibility solution is to use the extension method extension, which defines several constants:

extension FontWeightExt on FontWeight {
  static const FontWeight light = FontWeight.w300;
  static const FontWeight regular = FontWeight.w400;
  static FontWeight medium = Platform.isAndroid ? FontWeight.w600 :FontWeight.w500;
  static const FontWeight semibold = FontWeight.w600;
  static const FontWeight bold = FontWeight.w700;
}
Copy the code

Then, whenever font thickness needs to be set, use constants like Medium and bold defined in FontWeightExt

TextStyle(fontSize: 24, color: color (0xff333333), fontWeight: FontWeightExt. Medium,)Copy the code

Write a blog for the first time, write bad, we forgive, if you have a better plan, welcome comments correction. We have applied Flutter to our company project and have been up and running for some time.

Practical use of Flutter has encountered a series of problems, such as integration with native apps, native cutmap reuse, The Method Channel has a Boolean error, a Method Module has AAR and uploads to Maven’s repository, a Method Channel calls native methods, etc. I will share the problems you are concerned about, and learn and progress together with you.