I am struggling with this following problem since a few days: I have a rotated big Text on the left side of a View. On Flutter Desktop Web everything seems to be fine, but when I open the site on mobile web, one text gets blurry for no reason.
I tried a lot of things, like:
--web-renderer html
or
fontFeatures: const [FontFeature.proportionalFigures()],
but it does not fix the web blurrynes on my phone.
And here is my code:
Container(
height: double.infinity,
width: 80,
color: myBlue,
child: RotatedBox(
quarterTurns: 3,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
FutureBuilder<List<Map<String, dynamic>>>(
future: _myVar,
builder: (BuildContext context, AsyncSnapshot<List<Map<String, dynamic>>> snapshot) {
if (snapshot.hasData) {
if (snapshot.data == []) return const Text('[]');
MyVar myVar = MyVar.fromJson(snapshot.data!.first);
return Text(
myVar.name.toUpperCase(),
style: GoogleFonts.catamaran(
fontWeight: FontWeight.w900,
fontSize: 75,
color: const Color.fromRGBO(128, 203, 212, 0.5),
fontFeatures: const [FontFeature.proportionalFigures()],
),
);
} else if (snapshot.hasError) {
return const Icon(Icons.error_outline_sharp);
} else {
return const CircularProgressIndicator();
}
},
),
],
),
),
),
I tried to get a normal high resolution Text on Mobile Web, but it just doesn't work after days of trying different things.