change single char style inside string when it will be clicked flutter - string

Question

for example i have word welcome i want to change color of c when ever user clicks the letter c i get the position but i can not chnage this position to an index of the string.
i used RichText for using different style in one string and this is the code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:positioned_tap_detector/positioned_tap_detector.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
RichText rich;
String word;
String letter;
String pressedLetter;
Color color = Colors.black;
TapPosition _position = TapPosition(Offset.zero, Offset.zero);
int x=0;
int y=0;
#override
Widget build(BuildContext context) {
word = 'ویژدان';
letter = 'د';
var blackRt = new GestureDetector(
child: Text(
word,
style: TextStyle(fontSize: 25),
),
onTap: () {
setState(() {
color = Colors.red;
});
});
var redRt = useDifferentDesignInAString(word, Colors.red);
Widget currentRT = new Container();
if (color == Colors.black)
currentRT = blackRt;
else if (color == Colors.red) currentRT = redRt;
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: PositionedTapDetector(
onTap: _onTap,
child: currentRT,
),
),
);
}
void _onTap(TapPosition position) {
setState((){
_position = position;
x=position.global.dx.toInt();
y=position.global.dy.toInt();
String pressed=word[offset];
});
}
RichText useDifferentDesignInAString(String word, Color color) {
String firstPart = "";
String remain = "";
RichText richText;
if (word.startsWith(letter)) {
richText = RichText(
text: TextSpan(
text: letter,
style: TextStyle(color: color, fontSize: 25),
children: <TextSpan>[
TextSpan(
text: word.substring(1, word.length),
style: TextStyle(color: Colors.black, fontSize: 25)),
],
),
);
} else if (word.endsWith(letter)) {
richText = RichText(
text: TextSpan(
text: word.substring(0, word.length - 2),
style: TextStyle(color: Colors.black, fontSize: 25),
children: <TextSpan>[
TextSpan(text: letter, style: TextStyle(color: color, fontSize: 25))
],
),
);
} else {
for (int i = 0; i < word.length; i++) {
if (word[i] != letter && i < word.indexOf(letter)) {
firstPart = firstPart + word[i];
} else if (word[i] != letter && i > word.indexOf(letter)) {
remain = remain + word[i];
}
}
richText = RichText(
text: TextSpan(
text: firstPart,
style: TextStyle(color: Colors.black, fontSize: 25),
children: <TextSpan>[
TextSpan(
text: letter,
style: TextStyle(color: color, fontSize: 25),
),
TextSpan(
text: remain,
style: TextStyle(color: Colors.black, fontSize: 25)),
],
),
);
}
return richText;
}
}
the problem is inside the ontap method that when i found the position i can not convert it to index to get the real char that clicked if it is c chnage the color other wise show toast.