Letter spacing in Arabic language

Question

I am working on a Flutter mobile app. What I want to achieve is to separate characters in a TextFormField using the letterSpacing the property.

Letter spacing works correctly in English language. The problem is when I use Arabic characters letters are still joined and not separated as following:

Expected results: Arabic characters to appear separated for example: ا ل ا س م ا ل ا و ل

Actual results: Arabic characters appears joined and letter spacing is ignored for example: الاسم الأول

How to achive this functionality and is there any solutions to this problem.

Here is a code example using Dart pad:

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const Text(
      'الاسم الأول',
      style: TextStyle(letterSpacing: 4),
    );
  }
}

Answer 1

I faced the same issue one day and the only solution I found is to split the characters and rejoin them like:

Text(
        'الاسم الأول'.split("").join(" "),
      )

where the output would look as you wanted: