I am trying to learn the design in filters, but during my research in the existing templets, I found one of them that completely depends on giving any height or width on this file

import 'package:flutter/material.dart';

class SizeConfig {
  static late MediaQueryData _mediaQueryData;
  static late double screenWidth;
  static late 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;
  }
}

double getProportionateScreenHeight(double inputHeight) {
  double screenHeight = SizeConfig.screenHeight;
  return (inputHeight / 812.0) * screenHeight;
}


double getProportionateScreenWidth(double inputWidth) {
  double screenWidth = SizeConfig.screenWidth;
  return (inputWidth / 375.0) * screenWidth;
}

example :

EdgeInsets.symmetric(
                horizontal: getProportionateScreenWidth(20)),

so what is the difference between that method and giving fixed numbers

CodePudding user response：

The difference is :

• Method is Device Screen Dependent

  • Produces different heights based on the screen size.

• Fixed numbers is Device Screen Independent

  • Produces same height accross devices of different sizes.

---

Explanation:

Lets assume 2 screens of

1. First Screen 1000px height ,
2. Second Screen 1500px height,

Container of 100px to be produced in these devices

In Method:

Height is calculated as (inputHeight / 812.0) * screenHeight;

• First Screen : Container height (100/812) * 1000 = 123.1527 px
• Second Screen : Container height (100/812) * 1500 = 184.729 px

In Fixed Value:

Height is 100px in both First Screen and Second Screen

CodePudding user response：

The SizeConfig class in the code you provided is used to dynamically determine the dimensions of the screen or viewport, and then scale the dimensions of other UI elements accordingly. This will ensure that your UI layout is consistent and looks good on different devices and screen sizes.

The getProportionateScreenHeight and getProportionateScreenWidth functions in the SizeConfig class are used to calculate the proportionate dimensions of UI elements based on the dimensions of the screen or viewport. They take as input the desired dimensions of the UI element in pixels, and then scale them based on the dimensions of the screen or viewport.

For example, if you call getProportionateScreenHeight(100), it will return the height in pixels that is equivalent to 100 pixels on an iPhone 8, which has a screen height of 812 pixels. If the screen height of the device where the app is running is different from that of an iPhone 8, the returned value will be scaled accordingly.

On the other hand, if you use fixed numbers, such as EdgeInsets.symmetric(horizontal: 20), the dimensions of the UI element will be fixed and will not be scaled based on the dimensions of the screen or viewport.