Je suis confronté à un problème avec les textes réactifs. Dans mon application, il existe différentes tailles de police de texte et je dois les adapter à différentes tailles d'écran (uniquement les téléphones et le portrait d'orientation de l'appareil). J'ai également ajouté textScaleFactor: 1.0 à mon MaterialApp comme ceci:
builder: (context, widget) {
return MediaQuery(
child: widget,
data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
);
},
mais cela n'a pas beaucoup aidé. J'ai également essayé de calculer la taille de la police avec MediaQuery.of(context).size.width , mais je pense que c'est dangereux et faux. Je veux qu'il soit aussi proche que possible du design qui m'a été donné, mais j'ai commencé à le perdre sur cette étape. Existe-t-il une solution à ça? Comment y parvenir?
Merci d'avance.
4 Réponses :
Vous pouvez essayer ceci:
Container(
width: size.width * 0.85,
...
)
Vous pouvez appliquer le même concept, dans ce cas pour le conteneur:
final size = MediaQuery.of(context).size;
Je fais de cette manière uniquement pour (Container, Padding, SizedBox, etc.), mais je cherche un moyen pour les tailles de police du texte
Je l'ai très bien utilisé pour le texte. le seul inconvénient est que le style serait à l'intérieur du widget. Je voulais quelque chose que je pourrais définir au niveau du texte au niveau du thème mais je ne l'ai pas bien compris
vous pouvez utiliser ce plugin flutter_screenutil . C'est un plugin de flutter pour adapter la taille de l'écran et de la police.Laissez votre interface utilisateur afficher une mise en page raisonnable sur différentes tailles d'écran!
Initialisez et définissez la taille d'ajustement et la taille de la police à l'échelle en fonction de l'option d'accessibilité "taille de police" du système. # Veuillez définir la largeur et la hauteur du brouillon de conception avant utilisation, la largeur et la hauteur du brouillon de conception (unité px). Assurez-vous de définir la page dans l'accueil de MaterialApp (c'est-à-dire le fichier d'entrée, définissez-le une seule fois) pour vous assurer que la taille d'ajustement est définie avant chaque utilisation:
ScreenUtil.pixelRatio //Device pixel density ScreenUtil.screenWidth //Device width ScreenUtil.screenHeight //Device height ScreenUtil.bottomBarHeight //Bottom safe zone distance, suitable for buttons with full screen ScreenUtil.statusBarHeight //Status bar height , Notch will be higher Unit px ScreenUtil.textScaleFactory //System font scaling factor ScreenUtil.getInstance().scaleWidth //Ratio of actual width dp to design draft px ScreenUtil.getInstance().scaleHeight //Ratio of actual height dp to design draft px
Use： # Adapter la taille de l'écran： # Passer la taille px du projet de conception：
Adapté à la largeur de l'écran: ScreenUtil.getInstance (). SetWidth (540),
Adapté à la hauteur de l'écran: ScreenUtil.getInstance (). SetHeight (200),
Vous pouvez également utiliser ScreenUtil () au lieu de ScreenUtil.getInstance (), par exemple: ScreenUtil (). SetHeight (200)
Remarque
La hauteur est également adaptée en fonction de setWidth pour éviter toute déformation (lorsque vous voulez un carré)
La méthode setHeight est principalement adaptée en hauteur, vous souhaitez contrôler la hauteur et l'actualité d'un écran sur l'UIUsed lorsque celui-ci est affiché.
//Incoming font size，the unit is pixel, fonts will not scale to
respect Text Size accessibility settings
//(AllowallowFontScaling when initializing ScreenUtil)
ScreenUtil.getInstance().setSp(28)
//Incoming font size，the unit is pixel，fonts will scale to respect Text
Size accessibility settings
//(If somewhere does not follow the global allowFontScaling setting)
ScreenUtil(allowFontScaling: true).setSp(28)
//for example:
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'My font size is 24px on the design draft and will not change with the system.',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil.getInstance().setSp(24),
)),
Text(
'My font size is 24px on the design draft and will change with the system.',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil(allowFontScaling: true).setSp(24),
)),
],
)
Police de l'adaptateur:
//for example:
//rectangle
Container(
width: ScreenUtil.getInstance().setWidth(375),
height: ScreenUtil.getInstance().setHeight(200),
...
),
////If you want to display a square:
Container(
width: ScreenUtil.getInstance().setWidth(300),
height: ScreenUtil.getInstance().setWidth(300),
),
Autres apis： connexes
//fill in the screen size of the device in the design //default value : width : 1080px , height:1920px , allowFontScaling:false ScreenUtil.instance = ScreenUtil.getInstance()..init(context); //If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334) ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context); //If you wang to set the font size is scaled according to the system's "font size" assist option ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: true)..init(context);
Merci cela fonctionne partiellement, mais sur certains textes ne fonctionne pas
J'ai réessayé ce package et aucun effet, rien ne change même avec ce package
class SizeConfig {
static MediaQueryData _mediaQueryData;
static double screenWidth;
static double screenHeight;
static double blockSizeHorizontal;
static double blockSizeVertical;
void init(BuildContext context) {
_mediaQueryData = MediaQuery.of(context);
screenWidth = _mediaQueryData.size.width;
screenHeight = _mediaQueryData.size.height;
blockSizeHorizontal = screenWidth / 100;
blockSizeVertical = screenHeight / 100;
}
}
SizeConfig().init(context); add this after widget build and use
style: TextStyle(fontSize: 2 * SizeConfig.blockSizeVertical,),Multiply with your desired number, try at least one time. I have attached screen shots.My solution:
Other Solutions:
essayez ceci: vous obtenez la taille de texte adaptative en fonction de différentes tailles d'écran
Text("Paras Arora",style: TextStyle(fontSize:
AdaptiveTextSize().getadaptiveTextSize(context, 20)),
cas d'utilisation :
class AdaptiveTextSize {
const AdaptiveTextSize();
getadaptiveTextSize(BuildContext context, dynamic value) {
// 720 is medium screen height
return (value / 720) * MediaQuery.of(context).size.height;
}
}