问题

I'm new to Flutter, trying a code to change the color of specific Unicode characters in a string. Color coding \u0951, \u0952, and \u1cda to say blue, red, and green. The output string is not matching the expected format. I'm seeing some characters repeating and in some characters, the color is being applied to neighboring characters. Any help in figuring out the issue is greatly appreciated.

I want the code to work in both Android and IOS platforms.

Earlier I had a similar code in Kotlin when I developed this app in Android using spannableStr worked as expected.
The Flutter Dart code is:

import 'package:flutter/material.dart';

import 'package:flutter/painting.dart';
import 'package:google_fonts/google_fonts.dart';

class TextModifierScreen extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return TextModifierScreenState();
  }
}

class TextModifierScreenState extends State{

  List<TextSpan> _displaySpans = [];
  String inputString = "मृ॒त्यवे॒ यो॑ स्वाहा᳚ भू॒ मु॒भयो॒रा ॥";

  void replaceVowelsWithColor(String input) {
    List<TextSpan> spans = [];
    for (int i = 0; i < input.length; i++) {
      String char = input[i];
      int unicode = char.codeUnitAt(0);
      String unicodeString = '\\u${unicode.toRadixString(16).padLeft(4, '0')}';
      print('Unicode of $char is $unicodeString');
      if(char == '\u0952'){
        spans.add(TextSpan(
          text: char,
          style: TextStyle(color: Colors.red, ),
        ));
      }else if(char == '\u0951'){
        spans.add(TextSpan(
          text: char,
          style: TextStyle(color: Colors.blue),
        ));
      }else if(char == '\u1cda'){
        spans.add(TextSpan(
          text: char,
          style: TextStyle(color: Colors.green),
        ));
      }else{
        spans.add(TextSpan(
            text: char,
          style: TextStyle(color: Colors.black),
        ));
      }
    }
    setState(() {
      _displaySpans = spans;
    });
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Accents Color Replacer'),
      ),
      body: Center(
        child: Padding(
          padding: EdgeInsets.only(left: 20, right: 20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RichText(
                text: TextSpan(
                  style: GoogleFonts.tiroDevanagariSanskrit(
                    fontSize: 20,
                    color: Colors.black,
                  ),
                  children: <TextSpan>[
                    TextSpan(text: 'Original Text:\n '),
                    TextSpan(text: inputString),
                  ],
                ),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  replaceVowelsWithColor(inputString);
                },
                child: Text('Replace colors'),
              ),
              SizedBox(height: 20),
              RichText(
                text: TextSpan(
                  style: GoogleFonts.tiroDevanagariSanskrit(
                    fontSize: 20,
                    color: Colors.black,
                  ),
                  children: <TextSpan>[
                    TextSpan(text: 'Modified Text: \n'),
                    ..._displaySpans,
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

The first image is what I'm seeing. The second image is the expected output.

Thanks in advance!!!

[Update] If I replace the code to replace colors of vowels in an English text, it seems to work properly.

void replaceVowelsWithColor(String input) {

    List<TextSpan> spans = [];
    for (int i = 0; i < input.length; i++) {
      String char = input[i];
      int unicode = char.codeUnitAt(0);
      String unicodeString = '\\u${unicode.toRadixString(16).padLeft(4, '0')}';
      print('Unicode of $char is $unicodeString');
      if(char == '\u0061'){
        spans.add(TextSpan(
          text: char,
          style: TextStyle(color: Colors.red, ),
        ));
      }else if(char == '\u0065'){
        spans.add(TextSpan(
          text: char,
          style: TextStyle(color: Colors.blue),
        ));
      }else if(char == '\u0069'){
        spans.add(TextSpan(
          text: char,
          //color: Colors.green,
          style: TextStyle(color: Colors.green),
        ));
      }else if(char == '\u006F'){
        spans.add(TextSpan(
          text: char,
          style: TextStyle(color: Colors.yellow),
        ));
      }else if(char == '\u0075'){
        spans.add(TextSpan(
          text: char,
          style: TextStyle(color: Colors.pink),
          ));
      }else{
        spans.add(TextSpan(
          text: char,
          style: TextStyle(color: Colors.black),
        ));
      }
    }
    setState(() {
      _displayEngSpans = spans;
    });
  }

import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:google_fonts/google_fonts.dart';
class TextModifierScreen extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return TextModifierScreenState();
}
}
class TextModifierScreenState extends State{
List<TextSpan> _displaySpans = [];
String inputString = "मृ॒त्यवे॒ यो॑ स्वाहा᳚ भू॒ मु॒भयो॒रा ॥";
void replaceVowelsWithColor(String input) {
List<TextSpan> spans = [];
for (int i = 0; i < input.length; i++) {
String char = input[i];
int unicode = char.codeUnitAt(0);
String unicodeString = '\\u${unicode.toRadixString(16).padLeft(4, '0')}';
print('Unicode of $char is $unicodeString');
if(char == '\u0952'){
spans.add(TextSpan(
text: char,
style: TextStyle(color: Colors.red, ),
));
}else if(char == '\u0951'){
spans.add(TextSpan(
text: char,
style: TextStyle(color: Colors.blue),
));
}else if(char == '\u1cda'){
spans.add(TextSpan(
text: char,
style: TextStyle(color: Colors.green),
));
}else{
spans.add(TextSpan(
text: char,
style: TextStyle(color: Colors.black),
));
}
}
setState(() {
_displaySpans = spans;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Accents Color Replacer'),
),
body: Center(
child: Padding(
padding: EdgeInsets.only(left: 20, right: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RichText(
text: TextSpan(
style: GoogleFonts.tiroDevanagariSanskrit(
fontSize: 20,
color: Colors.black,
),
children: <TextSpan>[
TextSpan(text: 'Original Text:\n '),
TextSpan(text: inputString),
],
),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
replaceVowelsWithColor(inputString);
},
child: Text('Replace colors'),
),
SizedBox(height: 20),
RichText(
text: TextSpan(
style: GoogleFonts.tiroDevanagariSanskrit(
fontSize: 20,
color: Colors.black,
),
children: <TextSpan>[
TextSpan(text: 'Modifed Text: \n'),
..._displaySpans,
//_displaySpans[0],_displaySpans[2],_displaySpans[9],_displaySpans[2]
],
),
),
],
),
),
),
);
}
}

void replaceVowelsWithColor(String input) {
List<TextSpan> spans = [];
for (int i = 0; i < input.length; i++) {
String char = input[i];
int unicode = char.codeUnitAt(0);
String unicodeString = '\\u${unicode.toRadixString(16).padLeft(4, '0')}';
print('Unicode of $char is $unicodeString');
if(char == '\u0061'){
spans.add(TextSpan(
text: char,
style: TextStyle(color: Colors.red, ),
));
}else if(char == '\u0065'){
spans.add(TextSpan(
text: char,
style: TextStyle(color: Colors.blue),
));
}else if(char == '\u0069'){
spans.add(TextSpan(
text: char,
//color: Colors.green,
style: TextStyle(color: Colors.green),
));
}else if(char == '\u006F'){
spans.add(TextSpan(
text: char,
style: TextStyle(color: Colors.yellow),
));
}else if(char == '\u0075'){
spans.add(TextSpan(
text: char,
style: TextStyle(color: Colors.pink),
));
}else{
spans.add(TextSpan(
text: char,
style: TextStyle(color: Colors.black),
));
}
}
setState(() {
_displayEngSpans = spans;
});
}

答案1

得分: 2

已解决该问题。问题出在使用的特定字体上。以下是使用不同的Google Devanagari字体输出的维迪克·德瓦纳加里文字的结果。根据当前版本，Noto Serif Devanagari和Pragati Narrow似乎能够呈现所需的维迪克重音符号。Tiro字体在更改颜色时对某些特殊字符存在问题。