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