Flutter 中根据屏幕宽度更改文本大小

Question

我希望文本大小保持不变，但我希望在屏幕宽度较大的设备上它更大。

MediaQueryData queryData;

  @override
  Widget build(BuildContext context) {
    queryData = MediaQuery.of(context);
    Text("Hello.",
        style: TextStyle(
        fontSize: queryData.size.width, color: Colors.white),
 ),

}

但是，当我尝试queryData.size.width时，它变得如此之大。在这种情况下，我希望文本根据不同的设备屏幕扩展。

Answer 1

您只需将媒体查询的结果乘以一个常数即可。

double width = MediaQuery.of(context).size.width;
return Text(
  "Hello.",
  style: TextStyle(
    fontSize: width * 0.2,
    color: Colors.white,
  ),
);

Answer 2

定义一个名为sizeconfig的类：

  class SizeConfig {
  static MediaQueryData _mediaQueryData;
  static double screenWidth;
  static double screenHeight;
  static double blockSizeHorizontal;
  static double blockSizeVertical;

  static double _safeAreaHorizontal;
  static double _safeAreaVertical;
  static double safeBlockHorizontal;
  static double safeBlockVertical;

  void init(BuildContext context) {
    _mediaQueryData = MediaQuery.of(context);
    screenWidth = _mediaQueryData.size.width;
    screenHeight = _mediaQueryData.size.height;
    blockSizeHorizontal = screenWidth / 100;
    blockSizeVertical = screenHeight / 100;

    _safeAreaHorizontal =
        _mediaQueryData.padding.left + _mediaQueryData.padding.right;
    _safeAreaVertical =
        _mediaQueryData.padding.top + _mediaQueryData.padding.bottom;
    safeBlockHorizontal = (screenWidth - _safeAreaHorizontal) / 100;
    safeBlockVertical = (screenHeight - _safeAreaVertical) / 100;
  }
}

并在您的页面中使用 SizeConfig().init(context) 初始化此类 然后在你的字体大小上：SizeConfig.screenWidth * .02.

Answer 3

您的问题也与容器、按钮等相关...所以我建议您检查this惊人的开源（使用阿里巴巴redux）如何在几个地方使用utility-adapter文件解决这个问题，例如帐户标题页。

另一个很好的选择是检查 flutter-screen-util 依赖项，他们那里有一个很好的例子。

Answer 4

您可以使用 flutter_screenutil 设置响应任何屏幕布局的字体大小，也可以使用此包让其他小部件通过其 setWidth() 和 setHeight() 方法进行响应， 您可以在这里查看其文档：flutter_screenutil

Answer 5

import 'package:flutter/material.dart';
/* 
Size size = WidgetsBinding.instance.window.physicalSize /
    WidgetsBinding.instance.window.devicePixelRatio; */

///This method is used to set padding/margin (for the left and Right side) & width of the screen or widget according to the Viewport width.
double getHorizontalSize(double px,context) {
  return px * (getWidth(context) / 375);
}

///This method is used to set padding/margin (for the top and bottom side) & height of the screen or widget according to the Viewport height.
double getVerticalSize(double px,context) {
 /*  num statusBar =
      MediaQueryData.fromWindow(WidgetsBinding.instance.window).viewPadding.top;
  num screenHeight = getHeight(context) - statusBar; */
  return px * (getHeight(context) / 812);
}

///This method is used to set text font size according to Viewport
double getFontSize(double px,context) {
  var height = getVerticalSize(px,context);
  var width = getHorizontalSize(px,context);
  if (height < width) {
    return height.toInt().toDouble();
  } else {
    return width.toInt().toDouble();
  }
}

///This method is used to set smallest px in image height and width
double getSize(double px,context) {
  var height = getVerticalSize(px,context);
  var width = getHorizontalSize(px,context);
  if (height < width) {
    return height.toInt().toDouble();
  } else {
    return width.toInt().toDouble();
  }
}

double getHeight(BuildContext context) {
  return MediaQuery.of(context).size.height;
}

double getWidth(BuildContext context) {
  return MediaQuery.of(context).size.width;
}

Answer 6

我们可以使用视图 vw 和 vh 单位来提供字体大小，这将使您的文本在不同的视口大小下更加可见。

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}


1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger