With various screen sizes and pixel densities of mobile phones, it is difficult to maintain the consistency of the UI design. So, UI Tool is developed for every mobile phone screen size, which calculates the ratio of the current device compared to the originally designed device and then applies it to the Size parameters.(i.e If the UI is originally designed for iPhone 12 Pro Max, the UI on the iPhone 5s must be the similar. This may cause fat-thumb problem. Use it wisely.)
These are the Initial views of UIs without applying Calculated Ratio.
After applying the Calculated Ratio
Add this to your pubspec.yaml
dependencies:
ui_tool: ^1.0.1
Add the widget to your app like this (It automatically calculates the ratio):
If the design is given with viewport sizes (iPhone 12 Pro Max):
MaterialApp(
builder: (context, child) {
UI.initialize(
context,
viewportWidth: 428,
viewportHeight: 926,
);
return MediaQuery(
data: MediaQuery.of(context).copyWith(textScaleFactor: UI.ratio),
child: child!,
);
},
)
Then use the ratio with your size values.
import 'package:ui_tool/ui_tool.dart';
Container(
width: 200.r,
height: 250.r,
child: Text(
"Sample Responsive Text",
style: TextStyle(
fontSize: 16, //Fonts will be automatically scaled
)
),
),