the text work fine on one device but on other screens the text is messy so please help me to reduce scale of this container
i want to make it run on all screens like this image image preview example and the output on my screen is like this but on other screen is messy
Container(
width: 350,
child: FutureBuilder(
future: GetJuz(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(child: CircularProgressIndicator());
} else {
var ayat = snapshot.data!;
var ayah = "";
for (var i = 12; i < 23; i++) {
ayah += ayat[i].codes!.replaceAll(" ", "");
}
return Container(
child: RichText(
textDirection: TextDirection.rtl,
text: TextSpan(
children: [
for (var element in ayat) ...[
if (element.page == "5")
TextSpan(
text: element.codes
.toString()
.replaceAll(" ", ""),
recognizer: TapGestureRecognizer()
..onTap = () {
print(element.text);
},
style: TextStyle(
fontFamily: 'Schyler',
fontSize:
MediaQuery.of(context).size.width *
0.05,
color: Colors.black,
),
),
],
],
),
),
);
}
},
),
),
2
Answers
I am not sure about this one, but you just try
I think you want the text to be aligned equally from both ends. If that is the case, you can use this in RichText