Committed by
GitHub
Merge pull request #494 from juanjoseleca/master
Add function to get responsive value
Showing
2 changed files
with
32 additions
and
0 deletions
@@ -431,6 +431,14 @@ context.isLargeTablet() | @@ -431,6 +431,14 @@ context.isLargeTablet() | ||
431 | 431 | ||
432 | /// True if the current device is Tablet | 432 | /// True if the current device is Tablet |
433 | context.isTablet() | 433 | context.isTablet() |
434 | + | ||
435 | +/// Returns a value according to the screen size | ||
436 | +/// can give value for | ||
437 | +/// swatch: if the shortestSide is smaller than 300 | ||
438 | +/// mobile: if the shortestSide is smaller than 600 | ||
439 | +/// tablet: if the shortestSide is smaller than 1200 | ||
440 | +/// desktop: if width is largest than 1200 | ||
441 | +context.responsiveValue<T>() | ||
434 | ``` | 442 | ``` |
435 | 443 | ||
436 | ### Optional Global Settings and Manual configurations | 444 | ### Optional Global Settings and Manual configurations |
1 | import 'package:flutter/material.dart'; | 1 | import 'package:flutter/material.dart'; |
2 | import 'package:flutter/widgets.dart'; | 2 | import 'package:flutter/widgets.dart'; |
3 | +import 'package:flutter/foundation.dart'; | ||
3 | 4 | ||
4 | extension ContextExtensionss on BuildContext { | 5 | extension ContextExtensionss on BuildContext { |
5 | /// The same of [MediaQuery.of(context).size] | 6 | /// The same of [MediaQuery.of(context).size] |
@@ -102,4 +103,27 @@ extension ContextExtensionss on BuildContext { | @@ -102,4 +103,27 @@ extension ContextExtensionss on BuildContext { | ||
102 | 103 | ||
103 | /// True if the current device is Tablet | 104 | /// True if the current device is Tablet |
104 | bool get isTablet => isSmallTablet || isLargeTablet; | 105 | bool get isTablet => isSmallTablet || isLargeTablet; |
106 | + | ||
107 | + /// Returns a specific value according to the screen size | ||
108 | + /// if the device width is higher than or equal to 1200 return [desktop] value. | ||
109 | + /// if the device width is higher than or equal to 600 and less than 1200 | ||
110 | + /// return [tablet] value. | ||
111 | + /// if the device width is less than 300 return [watch] value. | ||
112 | + /// in other cases return [mobile] value. | ||
113 | + T responsiveValue<T>({ | ||
114 | + T mobile, | ||
115 | + T tablet, | ||
116 | + T desktop, | ||
117 | + T watch, | ||
118 | + }) { | ||
119 | + double deviceWidth = mediaQuerySize.shortestSide; | ||
120 | + | ||
121 | + if (kIsWeb) { | ||
122 | + deviceWidth = mediaQuerySize.width; | ||
123 | + } | ||
124 | + if (deviceWidth >= 1200 && desktop != null) return desktop; | ||
125 | + if (deviceWidth >= 600 && tablet != null) return tablet; | ||
126 | + if (deviceWidth < 300 && watch != null) return watch; | ||
127 | + return mobile; | ||
128 | + } | ||
105 | } | 129 | } |
-
Please register or login to post a comment