阻止flutter根据手机字体改变字体大小

Question

我正在构建一个应用程序，有一个问题。我把手机字体调大了，字体溢出了

我试着用这个:

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;
}

和当我使用Text时:

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

当我把我的手机字体设置成更大的尺寸时，它会导致溢出。我原以为调整屏幕尺寸就能解决问题，但正如你所见，并没有。如何阻止应用程序更改字体大小?

Answer 1

如果你想阻止你的文字满屏，你可以试试:

• 把你的文本在一个灵活的小部件!:

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

• 或者设置文本的溢出选项来隐藏文本的其余部分，将其替换为点/淡出，我通常使用两者的组合。

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),
),