Is there a way to get big Text in Flutter not blurry on Mobile Web?

107 Views Asked by At

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.

Desktop Version

Mobile Version

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.

0

There are 0 best solutions below