Made UI responsive #105
Made UI responsive #105
Conversation
|
Hey @chandansgowda I am done with the changes that were to be made by me, please do review the PR and suggest the required changes if any |
chandansgowda
left a comment
chandansgowda
left a comment
There was a problem hiding this comment.
Great job @Aarush-Acharya
lib/views/screens/home_screen.dart
Outdated
| Icons.ac_unit, | ||
| color: Colors.amber, | ||
| size: 30, | ||
| size: 0.01825*Get.height+0.0364*Get.width, |
There was a problem hiding this comment.
how are we coming with these random ratios ?
There was a problem hiding this comment.
Well, the size of the icon needed to be changed not just by the width or the height has to take into account both of them so in order to make the UI accurately responsive I divided sizes for Icons and Texts into two equal parts and converted one part into the ratio to the height (the values are ratio to the height of the screen at which everything looked perfect) while other into ratio to the width of the ideal/original screen.
Example:
30/2 = 15,
15/821.7 (height of the original screen) = 0.01825
15/411.4 (width of the original screen) = 0.0364
Hence the new representation of 30: 0.01825Get.height + 0.0364Get.width
This way both height and width can equally contribute to these sizes did this for all the Text and Icon sizes throughout the UI
lib/views/screens/login_screen.dart
Outdated
| errorStyle: TextStyle( | ||
| fontSize: | ||
| 0.0085 * Get.height + 0.017 * Get.width), | ||
| suffixIcon: IconButton( |
There was a problem hiding this comment.
Here I converted the default text size to dynamic to attain a precision of responsiveness default text size in Dart is 14
so 7 goes for the height and 7 for the width
7/411.4 (width of the original screen) = 0.017...
7/821.7 (height of the original screen) = 0.0085....
| Text( | ||
| widget.room.name, | ||
| style: TextStyle(fontSize: 20, color: Colors.amber), | ||
| style: TextStyle(fontSize: 0.012*Get.height+0.0243*Get.width, color: Colors.amber), |
There was a problem hiding this comment.
these as well. Please try not to use such constant values.
There was a problem hiding this comment.
Did this to make the static size 20 into dynamic with respect to height and width again divided 20 into 10 for height and 10 for width and applied the stated methodology
|
how can you say height of every screen the app is opened is 821 and width is 411 ? @Aarush-Acharya |
|
Hey @jddeep Well the ratios are extracted from the height and width of the original screen and then
So by extracting the ratios from the original screen and then putting the sizes in accordance to that ratio to the current height and width the UI is turned responsive (the result of this is presented in an image above) Apologies for not priorly providing the entire context, do let me know if I am going wrong somewhere |
|
@Aarush-Acharya then put those two values in the constants file and use from there everywhere. It will be difficult to understand otherwise. |
|
@jddeep I have tested it on three of my virtual devices. Can you please suggest ways to test it on all devices ? |
|
@jddeep would do so also rather than just the constant values shall I put the whole expression OR Shall I make it like this 
@jddeep which every you prefer Also, I have a prior commitment till the 7th morning would be able to work later that morning |
|
@Aarush-Acharya second way is fine. Just put the values |
|
@Aarush-Acharya Better if you can create a new file called ui_constants.dart and put everything there. |
|
@Aarush-Acharya @chandansgowda Please resolve conflicts |
@jddeep Sure. He's still working on the PR. |
|
@jddeep @chandansgowda apologies for the delay will commit it by EOD |
|
@Aarush-Acharya Please resolve conflicts |
|
Alright on it |
|
To be cleaned
|
|
Hey @jddeep this PR was still underwork 2 screen have been built and improvements were on the way shall I create a new PR for the rest of the updates |
3 participants
Took care of all the widgets using ratios via Get.height and Get.width. Made the UI generic and responsive to adapt to almost all the screen sizes
closes #104