Question 167781 in Flutter Question posted in
The official Flutter documentation can be found here.

Prevent device display and font size from affecting app fonts in Flutter

I’m able to resolve in retaining the app’s font size even thought the device is using bigger font size. My problem come along when the user also changes the display size or set the texts to bold that makes my apps font too enlarged.

enter image description here

Here’s what I have for now..

main.dart

....
child: MaterialApp(
  builder: (context, child) {
    return MediaQuery(
      data: MediaQuery.of(context).copyWith(
        textScaleFactor: 1.0,
      ),
      child: child!,
    );
  },
.....

How can I achieve my goal to also retain the font size even the user change the display size too?

Tags:

2

Answers


  1. 0

    I Apologise for the previous code, try this

    import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) {
        final originalTextScaleFactor = MediaQuery.of(context).textScaleFactor;
        final boldText = MediaQuery.boldTextOverride(context);

        final newMediaQueryData = MediaQuery.of(context).copyWith(
          textScaleFactor: originalTextScaleFactor.clamp(0.8, 1.0),
          boldText: boldText,
        );

        return MediaQuery(
          data: newMediaQueryData,
          child: child!,
        );
      },
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Retain Font Size'),
      ),
      body: Center(
        child: Text(
          'Hello, World!',
          style: TextStyle(fontSize: 20.0),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    Try to use flutter_screenutil package. It will give resolve your issue.

    Also check this How to create responsive Text widget in Flutter? this may help you

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search