Flutter 如何使文本在不同的屏幕比例下改变字体大小?

Flutter 如何使文本在不同的屏幕比例下改变字体大小?,flutter,dart,Flutter,Dart,我正在用Flutter编写一个简单的优惠券应用程序,但我正在努力使用一个文本小部件。我希望它具有响应性,所以当我用不同的屏幕比例在手机上打开我的应用程序时,它看起来应该是一样的 我打算它看起来是什么样子: 它在屏幕比例为19:9的手机上的外观: 18:9屏幕比率 我的代码: 导入“包装:颤振/材料.省道”; 导入“package:auto_size_text/auto_size_text.dart”; 导入“../helpers/makdolan.dart”; 类GeneratedCoup

我正在用Flutter编写一个简单的优惠券应用程序,但我正在努力使用一个文本小部件。我希望它具有响应性,所以当我用不同的屏幕比例在手机上打开我的应用程序时,它看起来应该是一样的

我打算它看起来是什么样子:

它在屏幕比例为19:9的手机上的外观:

18:9屏幕比率

我的代码:

导入“包装:颤振/材料.省道”;
导入“package:auto_size_text/auto_size_text.dart”;
导入“../helpers/makdolan.dart”;
类GeneratedCouponScreen扩展了无状态小部件{
最终字符串耦合图像;
GeneratedCouponScreen({Key-Key,@required this.couponImage}):super(Key:Key);
@凌驾
小部件构建(构建上下文){
var_makdolan=makdolan();
返回脚手架(
背景颜色:Colors.white,
正文:安全区(
子:容器(
填充:所有边缘设置(16.0),
子:列(
儿童:[
划船(
mainAxisAlignment:mainAxisAlignment.spaceBetween,
儿童:[
纵队(
crossAxisAlignment:crossAxisAlignment.start,
儿童:[
Text('DATA WYDANIA:',style:TextStyle(颜色:Colors.black,fontSize:16.0,fontwweight:fontwweight.bold)),
文本(_makdolan.calculateDate(),样式:TextStyle(颜色:Colors.black,fontSize:16.0))
],
),
纵队(
crossAxisAlignment:crossAxisAlignment.start,
儿童:[
Text('UNIKALNY KOD:',样式:TextStyle(颜色:Colors.black,fontSize:16.0,fontwweight:fontwweight.bold)),
文本(_makdolan.calculateUniqueCode(),样式:TextStyle(颜色:Colors.black,fontSize:16.0))
],
)
],
),
尺寸箱(高度:8.0),
Image.asset(耦合映像),
尺寸箱(高度:8.0),
AutoSizeText.rich(
TextSpan(
正文:“我们的产品是免费的。我们的产品是免费的。我们的产品是免费的。我们的产品是免费的瓦萨维·奥拉兹·洛特尼泽戈(Warszawie oraz Portu Lotniczego)是格但斯克的一个名为“Opinia Gości“znajduje sięna stronie”的监管机构,
样式:TextStyle(颜色:Colors.black),
儿童:[
TextSpan(
文本:“www.makdolan.pl”,
样式:TextStyle(颜色:颜色(0xffffc300),装饰:textEdition.underline)
),
TextSpan(
文字:“w sekcji”,
样式:TextStyle(颜色:Colors.black)
),
TextSpan(
文本:“Regulamy”,
样式:TextStyle(颜色:颜色(0xffffc300),装饰:textEdition.underline)
)
]
),
maxFontSize:14.0,
),
垫片(),
卡片(
子:容器(
身高:95.0,
颜色:颜色(0xffffc300),
儿童:中心(
子:列(
mainAxisAlignment:mainAxisAlignment.center,
儿童:[
Text('DRUKUJ/',样式:TextStyle(fontSize:28.0)),
文本('ZAPISZ JAKO PDF',样式:TextStyle(fontSize:28.0),)
],
),
)
),
),
卡片(
子:容器(
身高:95.0,
颜色:颜色(0xffffc300),
儿童:中心(
子:列(
mainAxisAlignment:mainAxisAlignment.center,
儿童:[
Text('PRZEŚLIJ KUPON',样式:TextStyle(fontSize:28.0)),
文本(WYSYŁKA W CIĄGU 24 GODZIN),样式:TextStyle(fontSize:17.0)
],
),
)
),
)
],
),
),
)
);
}
}

您可以尝试使用灵活/扩展的小部件为列中的每个小部件分配空间。这将使您的列具有响应性。还可以尝试将文本小部件放在FittedBox小部件中,以便文本大小具有响应性。

您可以尝试使用灵活/扩展的小部件为列中的每个小部件分配空间uld使您的列具有响应性。同时尝试将文本小部件放入FittedBox小部件中,以便文本大小具有响应性。

使用MediaQueryAspectRatio类请参见:


使用MediaQueryAspectRatio类请参见:

可能重复的可能重复的