Flutter Web：創建具有移動應用大小的 UI

Question

我有一個 Flutter 應用程序，它在 android、iOS 和 Web 中運行良好。但在 web 中，它的全屏寬度非常難看。 如何為 web 創建與移動版本一樣的 UI？

Answer 1

參考這篇文章，根據不同的屏幕尺寸有效縮放 UI。

要確定用戶是否正在使用瀏覽器，請使用kIsWeb

前任：

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

但是我個人使用這個 class 來動態調整大小，而不是上面提到的兩者都是相似的，但是下面給出的一個有兩個函數來獲取寬高比的寬度和高度。

屏幕尺寸.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(...)
  ),
);

Answer 3

我開發了一個 package 來為你處理這個問題： https://pub.dev/packages/center_the_widgets

你可以像這樣使用它：

 return CenterTheWidgets(
      child: Scaffold(
        body: const Text('Hi!'),
      ),
    );