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

Size of text in Flutter

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

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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(),
 ..
 .
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search