[英]Flutter Web : Create UI with mobile app size
I have a Flutter app and it is work fine in android, iOS and Web. But in web it has full screen width that is very ugly.我有一个 Flutter 应用程序,它在 android、iOS 和 Web 中运行良好。但在 web 中,它的全屏宽度非常难看。 How can I create UI as like as mobile version for web?
如何为 web 创建与移动版本一样的 UI?
Refer This article to effectively scale UI according to different screen sizes.参考这篇文章,根据不同的屏幕尺寸有效缩放 UI。
To determine if the user is using the browser use kIsWeb
要确定用户是否正在使用浏览器,请使用
kIsWeb
Ex:前任:
Image.network('Exampleurl.com',height:kIsWeb?webHeight:mobileHeight);
But I personally use this class for dynamic resizing instead of the one mentioned above both are similar but the one given below has 2 functions to get width and height with respect to the aspect ratio.但是我个人使用这个 class 来动态调整大小,而不是上面提到的两者都是相似的,但是下面给出的一个有两个函数来获取宽高比的宽度和高度。
Screensize.dart屏幕尺寸.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;
}
}
Example:例子:
Image.network('Exampleurl.com',height:getProportionateScreenHeight(150));
or或者
Image.network('Exampleurl.com',height:(kIsWeb)?getProportionateScreenHeight(250):getProportionateScreenHeight(100));
Thanks to @nishuthan-s I solved my problem with KisWeb and Container感谢@nishuthan-s,我用 KisWeb 和 Container 解决了我的问题
Center(
child: Container(
width: kIsWeb ? 400.0 : double.infinity,
child: ListView.builder(...)
),
);
I developed a package to handle this for you: https://pub.dev/packages/center_the_widgets我开发了一个 package 来为你处理这个问题: https://pub.dev/packages/center_the_widgets
You can use it just like this:你可以像这样使用它:
return CenterTheWidgets(
child: Scaffold(
body: const Text('Hi!'),
),
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.