How to render Arabic text with Flutter text painter

Question

I have tried to render the Arabic text in Flutter using the TextPainter, but the text is not rendered and got broken. When rendering the same using the Text widget, the Arabic text is rendered. Below is my code.

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        localizationsDelegates: GlobalMaterialLocalizations.delegates,
        supportedLocales: const [
          Locale('en'),
          Locale('ar'),
        ],
        locale: const Locale('ar'),
        home: Scaffold(
            appBar: AppBar(),
            body: Column(
              children: [
                // const Text(
                //   'Text Widget',
                //   textDirection: TextDirection.rtl,
                // ),
                CustomPaint(
                  size: const Size(300, 300),
                  painter: MyPainter(),
                ),
              ],
            )));
  }
}

class MyPainter extends CustomPainter {
  String x = '79.7 م';
  String arab = 'نحن';

  @override
  void paint(Canvas canvas, Size size) {
    final TextSpan span = TextSpan(
        text: '$x : $arab', style: const TextStyle(color: Colors.black));
    final TextPainter tp = TextPainter(
      text: span,
      textDirection: TextDirection.rtl,
    );
    tp.layout();
    canvas.save();
    tp.paint(canvas, Offset.zero);
    canvas.restore();
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

If I tried to render the same Arabic text in Text painter and with some other text using the Text widget, then Arabic text got rendered in Text painter too (To achieve this, in the above code, uncomment the commented part). Find the screenshot below.

Help me out to get rid off this.