Regarding How to draw Unicode text in a PDF file

[Takuro]

The following is excellent instruction. This is helpful information. 

https://www.syncfusion.com/kb/11976/how-to-draw-unicode-text-in-a-pdf-file-using-google-fonts-package

However, I can't understand how to create the TTF file data by the getFont method. There is no "writeAsBytes" statement. This means the TTF file is always empty.

In what cases is the following condition TRUE?

// Line 11 of getFont 
---

if (fontBytes != null && fontBytes.isNotEmpty) {

---

[Gowthamraj Kumar]

Hi Takuro,

Currently, we are checking on this sample on our end and we will update the further details on September 15^th 2022.

Regards,

Gowthamraj K

[Gowthamraj Kumar]

Hi Takuro,

In the below KB documentation, we are getting the font from the Google fonts package in Flutter. The Google fonts package fetches the font files via HTTP at runtime and caches them in the application’s file system. In this article, we have used cached files to render the Unicode text in a PDF document. The reported problem is due to the Flutter Google fonts package being updated. And please make sure the device/emulator internet connectivity whether it is properly connected or not. If not, please connect to the internet and try the below code snippet on your end and let us know the result.

Please refer to the below code snippet,

Future<PdfFont> getFont(TextStyle style) async {

    //Get the external storage directory

    Directory directory = await getApplicationSupportDirectory();

    //Create an empty file to write the font data

    File file = File('${directory.path}/${style.fontFamily}.ttf');

    if (!file.existsSync()) {

      List<FileSystemEntity> entityList = directory.listSync();

      for (FileSystemEntity entity in entityList) {

        if (entity.path.contains(style.fontFamily!)) {

          file = File(entity.path);

          break;

        }

      }

    }

    List<int>? fontBytes;

    //Check if entity with the path exists

    if (file.existsSync()) {

      fontBytes = await file.readAsBytes();

    }

    if (fontBytes != null && fontBytes.isNotEmpty) {

      //Return the google font

      return PdfTrueTypeFont(fontBytes, 12);

    } else {

      //Return the default font

      return PdfStandardFont(PdfFontFamily.helvetica, 12);

    }

  }

 

We will update the changes in our documentation page and we will update you once the changes are reflected in live.

Regards,

Gowthamraj K

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Takuro]

Thank you for your answer.

I tried the new code you showed me. However, the following step is not to be TRUE. So, It didn't solve the problem.

In what cases is the following condition TRUE? If there are any prerequisites, please let me know.

if (entity.path.contains(style.fontFamily!)) {

Reference Information (My environment)

[Google Fonts Package]
  google_fonts:
    dependency: "direct main"
    description:
      name: google_fonts
      url: "https://pub.dartlang.org"
    source: hosted
    version: "3.0.1"

[Result of "flutter doctor"]
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.3.2, on Microsoft Windows [Version 10.0.19044.2006], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Build Tools 2019 16.11.16)
[√] Android Studio (version 2021.2)
[√] VS Code (version 1.71.1)
[√] Connected device (4 available)
[√] HTTP Host Availability

[Gowthamraj Kumar]

Hi Takuro,

We found the TextStyle API is returned before completely loading the font by using the recent google_fonts package. As we said before, In this sample we are loading the google fonts cache files from the application support directory. So our sample code searches the font files before loading it. We have modified the sample to search the fonts after completely loading the google_fonts cache.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/pdf_sample-1335200110

Please try the attached sample on our end and let us know whether it achieves your requirement.

Regards,

Gowthamraj K

[Takuro]

Thank you for your answer and for giving a sample!
Your sample is working well in my environment!

However, when I tried with the shipporiMinchoB1 font that I want to use on my App, it's not working as expected...

_googleFonts.add(GoogleFonts.shipporiMinchoB1(textStyle: const TextStyle()));

It seems that it works and it doesn't work, depending on the font we choose.

[Gowthamraj Kumar]

Hi Takuro,

We suspect the problem is due to downloading the font package in the background. Because the provided font (shipporiMinchoB1) size is 13.9 MB. So that we have changed the sample to load the Google fonts on the initial stage onwards, now the font will be started to downloading on the application launch itself. Kindly try the following code and sample and let us know if you need any further information.

Code to load google fonts before starting widgets.

 

  @override

  void initState() {

    super.initState();

    // Add the required fonts here.

    _googleFonts

        .add(GoogleFonts.shipporiMinchoB1(textStyle: const TextStyle()));

    _googleFonts.add(GoogleFonts.lato());

  }

 

You can refer the complete sample in the following.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/pdf_sample938930237

Note: The font files only downloads based on the internet connectivity.

You can also find the following thread for requesting font loaded callback request from the google_fonts.

https://github.com/material-foundation/google-fonts-flutter/issues/264

Regards,

Gowthamraj K

[Takuro]

Hi Gowthamraj,

Thank you for your sincere response.

In my case, as a workaround for the original problem, I stored the corresponding font file in the assets folder, which caused it to not download to the cache.

Thank you,

Takuro Inokuchi

[Gowthamraj Kumar]

Hi Takuro

Thank you for your update. We are glad to hear that the reported problem is resolved.

Please refer to the below documentation link,

https://help.syncfusion.com/flutter/pdf/working-with-text#draw-text-using-truetype-fonts

Please let us know if you need any further assistance in this.

Regards,

Gowthamraj K