Flutter Web：使用移动应用大小创建 UI

Question

我有一个 Flutter 应用程序，它在 android 、 iOS 和 Web 中运行良好。但在 web 中，它具有非常丑陋的全屏宽度。如何创建与网络移动版本一样的 UI？

Answer 1

参考This article根据不同的屏幕尺寸有效缩放UI。

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

例如：

Image.network('Exampleurl.com',height:kIsWeb?webHeight:mobileHeight);

但我个人使用这个 class 来动态调整大小，而不是上面提到的那个，两者都很相似，但下面给出的那个有 2 个函数来获取相对于纵横比的宽度和高度。

Screensize.dart

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

或

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

Answer 2

感谢@nishuthan-s 我用 KisWeb 和 Container 解决了我的问题

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

Flutter Web：使用移动应用大小创建 UI

Flutter Web : Create UI with mobile app size

flutter

flutter-layout

flutter-web