Flutter Web : Create UI with mobile app size

Question

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 ?

Answer 1

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