Size of text in Flutter

Question

I need the texts to always be the same size regardless of the device settings.

I have tried using these codes but without success: in the Widget Text:

• fontSize: 20 * MediaQuery.textScaleFactorOf(context)
• fontSize: 20 * MediaQuery.of(context).textScaleFactor
• textScaleFactor

or:

MediaQueryData = MediaQuery.of(context).copyWith(
  textScaleFactor: 1.0,
)

return MediaQuery(
  data: mediaQueryData,
  child: MyApp()
);

but if I put small font size in the device settings, the text will be a different size than when it is set to large.

MediaQuery.textScaleFactorOf(context) return always 1 Why?

How do I determine what the user has set?

What should I do? Thank you

Answer 1

There are several methods to approach this. I will give you my method.

Step 1

Create a file called size_config.dart and paste the below code

class SizeConfig {
  static double? _screenWidth;
  static double? _screenHeight;
  static double _blockWidth = 0;
  static double _blockHeight = 0;

  static double? textMultiplier;
  static double? imageSizeMultiplier;
  static double? heightMultiplier;
  static double? widthMultiplier;
  static bool isPortrait = true;
  static bool isMobilePortrait = false;

  void init(BoxConstraints constraints, Orientation orientation) {
    if (orientation == Orientation.portrait) {
      _screenWidth = constraints.maxWidth;
      _screenHeight = constraints.maxHeight;
      isPortrait = true;
      if (_screenWidth! < 450) {
        isMobilePortrait = true;
      }
    } else {
      _screenWidth = constraints.maxHeight;
      _screenHeight = constraints.maxWidth;
      isPortrait = false;
      isMobilePortrait = false;
    }

    _blockWidth = _screenWidth! / 100;
    _blockHeight = _screenHeight! / 100;

    textMultiplier = _blockHeight;
    imageSizeMultiplier = _blockWidth;
    heightMultiplier = _blockHeight;
    widthMultiplier = _blockWidth;
  }
}

Step 2

In main.dart We need to init the Size Config

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {

return LayoutBuilder(
  builder: (context, constraints) {
    return OrientationBuilder(builder: (context, orientation) {
      SizeConfig().init(
          constraints, orientation); // Initialize the size configuration.

      return MaterialApp(
        title: 'Example',
        debugShowCheckedModeBanner: false,
        theme: AppTheme.darkTheme,
        home: SplashPage(authRepository: AuthRepository()),
      );
    });
  },
);
  }
}

How to use

Select one screen first and measure the size. For example 414 x 896 is size then

32 text size you need to acheive

32 / ( 896 / 100 ) = 3.6

textsize / ( screen_height / 100 ) = value

so we can use it as

3.6 * SizeConfig.textMultiplier!

Height case

3.6 * SizeConfig.heightMultiplier!

Width case

The formula is different

size / ( screen_width / 100 ) = value

32 / ( 414 / 100 ) = 7.73

7.73 * SizeConfig.widthMultiplier!

By this way you can achieve almost pixel perfect responsive design

Youtube Ref: click here

Answer 2

Here is my solution. This code snippet is used to automatically scale the text size based on the device's width.

class TextScaled extends StatelessWidget {
  const TextScaled({Key? key, required this.text, this.style, this.textAlign, this.overflow, this.maxLines, this.softWrap}) : super(key: key);

  final String text;
  final TextStyle? style;
  final TextAlign? textAlign;
  final TextOverflow? overflow;
  final int? maxLines;
  final bool? softWrap;

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      style: style,
      textScaleFactor: _ScaleSize.textScaleFactor(context),
      textAlign: textAlign,
      overflow: overflow,
      maxLines: maxLines,
      softWrap: softWrap,
    );
  }

}

class _ScaleSize {
  static double textScaleFactor(BuildContext context, {double maxTextScaleFactor = 2}) {
    final width = MediaQuery.of(context).size.width;
    double val = (width / breakpoint) * maxTextScaleFactor; //breakpoint 768 for me
    return min(val, maxTextScaleFactor);
  }
}

The usage is as follows

TextScaled(
 text: "greetings from hwa",
 style: textStyle(),
 ..
 .
),