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. How can I create UI as like as mobile version for web?
Refer This article to effectively scale UI according to different screen sizes.
To determine if the user is using the browser use 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.
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;
}
}
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
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
You can use it just like this:
return CenterTheWidgets(
child: Scaffold(
body: const Text('Hi!'),
),
);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.