Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add Arabic chars in flutter pdf generating

I'm trying to generate a pdf in flutter using the package PDF ,, here is my code :

  final doc = pw.Document();
  var data = await rootBundle.load("assets/fonts/arial.ttf");
  var myFont = Font.ttf(data);
  String test = 'الشكرمون طاخ فى الترارولى';
  var data2 = utf8.encode(test);
  doc.addPage(
    pw.Page(
      build: (pw.Context context) => pw.Center(
        child: pw.Text(test, style: pw.TextStyle(fontSize: 80,font: myFont)),
      ),
    ),
  );

and here is how it is being generated :

enter image description here

while the actual result expected should be not chars separated, here is an example of what I should see :

enter image description here

like image 351
Ahmed Wagdi Avatar asked Jul 14 '20 22:07

Ahmed Wagdi


3 Answers

just add textDirection: pw.TextDirection.rtl to the Text widget , like this :

 pw.Page(
      build: (pw.Context context) => pw.Center(
        child: pw.Text(test, style: pw.TextStyle(fontSize: 80,font: myFont),textDirection: 
        pw.TextDirection.rtl),
      ),
    ),

Note: Problems may occur if the text contains some numbers

like image 156
farouk osama Avatar answered Oct 01 '22 00:10

farouk osama


just add theme: ThemeData.withFont(base: ttf,) to the Page widget, like this:

  var data = await rootBundle.load("fonts/IRANSansWeb(FaNum)_Bold.ttf");
  final ttf = Font.ttf(data);

 Page(
      pageFormat: PdfPageFormat.a4,
      theme: ThemeData.withFont(
        base: ttf,
      ),
      orientation: PageOrientation.landscape,
      build: (Context context) {
return Align(
  alignment: Alignment.center,
  child: new Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Column(
          children: [
            Row(
              children: [
                Text(
                  'خلیج فارس',
                 textDirection: TextDirection.rtl,
                )
              ]
            )
          ]
        ),
        Column(
          children: [
            Image(compareChartImage),
          ]
        ),
        Column(
          children:[
            Image(timingChartImage),
          ]
        )
      ]
  ));
 }
)
like image 23
Mostafa Nowroozian Avatar answered Oct 01 '22 01:10

Mostafa Nowroozian


if all your widget has rtl parent all widget with pw.Directionality and set TextDirection.rtl , or use TextDirection.rtl in single text widget

like image 41
Mohsen Haydari Avatar answered Sep 30 '22 23:09

Mohsen Haydari