Flutter 颤振Web：创建具有移动应用程序大小的UI

我有一个Flutter应用程序，它在安卓、iOS和网络上运行良好。但在网络中，它的全屏宽度非常难看。如何创建与web移动版类似的UI？

请参阅根据不同屏幕大小有效缩放UI

要确定用户是否正在使用浏览器，请使用

kIsWeb

例：

但是我个人使用这个类来动态调整大小，而不是上面提到的那个，两者都是相似的，但是下面给出的这个类有两个函数来获得宽高比的宽度和高度

屏幕大小.省道

class SizeConfig {
  static MediaQueryData _mediaQueryData;
  static double screenWidth;
  static 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 width 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;
}

}

例如：

Image.network('Exampleurl.com',height:getProportionateScreenHeight(150)); 

或

---

多亏了@nishuthan-s，我解决了KisWeb和容器的问题

Center(
  child: Container(
    width: kIsWeb ? 400.0 : double.infinity,
    child: ListView.builder(...)
  ),
);

---

这可能会帮到你@NishuthanS谢谢你。这节课给出了屏幕大小，我可以告诉Fatter我想要整个屏幕宽度的x%。但是我想告诉Fatter，如果屏幕是用于移动设备的，你可以显示100%屏幕宽度的图像，如果是web版本，并且在桌面操作系统的chrome中运行，你必须使用50%的屏幕宽度。非常感谢。如何使用此设置web中的全屏宽度？@mmsh您可以使用

SizeConfig.screenWidth

获取全屏宽度。这将返回设备的全屏宽度。thanx。但是得到这个尺寸对我有什么帮助呢？我很想告诉Flitter，如果应用程序在台式机或笔记本电脑的浏览器中运行，您必须显示应用程序宽度mobile width

kIsWeb

（如果是web浏览器，则该值为true）是一个全局变量，用于告知用户是否在浏览器或其他平台中使用。是的，我了解kIsWeb。但是witch widget我应该使用，如果kIsWeb是真的，widget widget width可以定制整个屏幕的宽度吗？

Image.network('Exampleurl.com',height:(kIsWeb)?getProportionateScreenHeight(250):getProportionateScreenHeight(100));

Center(
  child: Container(
    width: kIsWeb ? 400.0 : double.infinity,
    child: ListView.builder(...)
  ),
);