Advertisement
MELAMOURI

Untitled

Jul 28th, 2023
166
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.34 KB | None | 0 0
  1. In Dart, you can use the `MediaQuery` class provided by Flutter to manage different screen sizes and adapt your UI accordingly. `MediaQuery` allows you to retrieve information about the current device's size and orientation, which you can then use to make responsive design decisions.
  2.  
  3. Below is an example of a Dart class called `Responsive` that provides utility methods to handle different screen sizes using `MediaQuery`:
  4.  
  5. ```dart
  6. import 'package:flutter/material.dart';
  7.  
  8. class Responsive {
  9. static double screenWidth(BuildContext context) {
  10. return MediaQuery.of(context).size.width;
  11. }
  12.  
  13. static double screenHeight(BuildContext context) {
  14. return MediaQuery.of(context).size.height;
  15. }
  16.  
  17. static double blockSizeHorizontal(BuildContext context) {
  18. return screenWidth(context) / 100;
  19. }
  20.  
  21. static double blockSizeVertical(BuildContext context) {
  22. return screenHeight(context) / 100;
  23. }
  24.  
  25. static double textScaleFactor(BuildContext context) {
  26. return MediaQuery.of(context).textScaleFactor;
  27. }
  28.  
  29. static bool isTablet(BuildContext context) {
  30. return screenWidth(context) >= 600;
  31. }
  32.  
  33. static bool isMobile(BuildContext context) {
  34. return screenWidth(context) < 600;
  35. }
  36. }
  37.  
  38. ```
  39.  
  40. In this `Responsive` class, we have defined several static methods:
  41.  
  42. 1. `screenWidth` and `screenHeight`: These methods return the current screen width and height, respectively, based on the `MediaQuery` data.
  43.  
  44. 2. `blockSizeHorizontal` and `blockSizeVertical`: These methods divide the screen width and height by 100, respectively, to provide a percentage-based unit for responsive design.
  45.  
  46. 3. `textScaleFactor`: This method returns the text scale factor, which is useful for managing text size adjustments based on system settings.
  47.  
  48. 4. `isTablet` and `isMobile`: These methods provide simple checks to determine if the screen width falls within a tablet or mobile device range (600 pixels in this example). You can adjust this value based on your specific needs.
  49.  
  50. To use the `Responsive` class in your Flutter application, you can import the file where it's defined and then call its methods from within your widgets:
  51.  
  52. ```dart
  53. import 'package:flutter/material.dart';
  54.  
  55. class MyWidget extends StatelessWidget {
  56. @override
  57. Widget build(BuildContext context) {
  58. double screenWidth = Responsive.screenWidth(context);
  59. double screenHeight = Responsive.screenHeight(context);
  60. double blockSizeHorizontal = Responsive.blockSizeHorizontal(context);
  61. double blockSizeVertical = Responsive.blockSizeVertical(context);
  62. double textScaleFactor = Responsive.textScaleFactor(context);
  63. bool isTablet = Responsive.isTablet(context);
  64. bool isMobile = Responsive.isMobile(context);
  65.  
  66. // Use the retrieved values to adjust your UI based on the device's size
  67. // For example, you can use MediaQuery and LayoutBuilder to create responsive UI.
  68.  
  69. return Scaffold(
  70. appBar: AppBar(
  71. title: Text('Responsive Example'),
  72. ),
  73. body: Center(
  74. child: Text('Your content goes here'),
  75. ),
  76. );
  77. }
  78. }
  79. ```
  80.  
  81. With this `Responsive` class, you can easily manage different screen sizes and create a more adaptive and user-friendly UI in your Flutter app. Adjust the logic inside the `isTablet` and `isMobile` methods as per your needs and your understanding of tablet and mobile screen sizes.
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement