Stop flutter from chaing fontSize depending on phone font

Question

I'm building an app there is one problem. The font is causing overflow when I set my phone font to a bigger size.

I tried using this :

    class SizeConfig {
  static late MediaQueryData _mediaQueryData;
  static late double screenWidth;
  static late double screenHeight;
  static double? defaultSize;
  static Orientation? orientation;

  void init(BuildContext context) {
    _mediaQueryData = MediaQuery.of(context);
    screenWidth = _mediaQueryData.size.width;
    screenHeight = _mediaQueryData.size.height;
    orientation = _mediaQueryData.orientation;
  }
}

// Get the proportionate height as per screen size
double getProportionateScreenHeight(double inputHeight) {
  double screenHeight = SizeConfig.screenHeight;
  // 812 is the layout height that designer use
  return (inputHeight / 812.0) * screenHeight;
}

// Get the proportionate height as per screen size
double getProportionateScreenWidth(double inputWidth) {
  double screenWidth = SizeConfig.screenWidth;
  // 375 is the layout width that designer use
  return (inputWidth / 375.0) * screenWidth;
}

and when I used a Text :

Text(
        "Discover our latest products",
          style: TextStyle(
              letterSpacing: -1,
              fontFamily: 'Muli-Bold',
              fontSize: getProportionateScreenWidth(35),
              fontWeight: FontWeight.w700,
              color: kPrimaryColor),
        ),

It's causing overflow when I set my phone font to a bigger size. I thought that using the screen size will fix it but as you can see , it didn't. How can I stop the app from changing the font size?

Answer 1

If you are trying to stop your text from overflowing your screen, you can try:

• Putting your text inside a flexible widget!:

Flexible(child: Text(
        "Discover our latest products",
          style: TextStyle(
              letterSpacing: -1,
              fontFamily: 'Muli-Bold',
              fontSize: getProportionateScreenWidth(35),
              fontWeight: FontWeight.w700,
              color: kPrimaryColor),
              ),
        ),

• Or setting your text's overflow options to hide the rest of the text by replacing it with dots/fade it out, I usually use the combination of both.

Text(
        "Discover our latest products",
          style: TextStyle(overflow: TextOverflow.fade,//fade/ellipsis
              letterSpacing: -1,
              fontFamily: 'Muli-Bold',
              fontSize: getProportionateScreenWidth(35),
              fontWeight: FontWeight.w700,
              color: kPrimaryColor),
        ),