Flutter使用image包绘制阿拉伯文字不显示的问题求助

问题原因 #

你使用的Arial_24字体不包含阿拉伯文字形，且image包默认的drawString未处理阿拉伯文的从右到左（RTL）排版特性，导致文字无法正常渲染。

解决方案 #

• 替换支持阿拉伯文的字体
  选择原生支持阿拉伯文的字体（如Noto Naskh Arabic、Amiri等），将字体文件放入项目assets/fonts目录，同时在pubspec.yaml中配置资源路径：

  assets:
    - assets/fonts/NotoNaskhArabic-Regular.ttf
  

• 加载自定义字体并适配RTL绘制
  先加载字体文件，再计算文字宽度调整绘制起始坐标（适配阿拉伯文从右往左的排版方向）：

  // 加载自定义阿拉伯字体文件
  final fontBytes = await rootBundle.load('assets/fonts/NotoNaskhArabic-Regular.ttf');
  final arabicFont = Image.loadFont(fontBytes.buffer.asUint8List());
  
  String arabicText = "مرحبا بالعالم";
  // 计算文字宽度，用于调整RTL绘制的起始x坐标
  int textWidth = Image.textWidth(arabicText, arabicFont);
  // 从右往左绘制，将原x坐标减去文字宽度得到正确起始位置
  Image.drawString(
    image!,
    arabicFont,
    300 - textWidth,
    300,
    arabicText,
    color: Colors.black.value,
  );
  

• 额外注意

  • 确认字体文件完整包含所有阿拉伯文字形，避免部分字符缺失；
  • 将image包升级到最新版本，新版本对复杂脚本的渲染支持更完善。

内容的提问来源于stack exchange，提问作者mahmoud fathy