File tree Expand file tree Collapse file tree 1 file changed +47
-0
lines changed Expand file tree Collapse file tree 1 file changed +47
-0
lines changed Original file line number Diff line number Diff line change
1
+ import 'package:flutter/material.dart' ;
2
+
3
+ class Responsive extends StatelessWidget {
4
+ final Widget mobile;
5
+ final Widget tablet;
6
+ final Widget desktop;
7
+
8
+ const Responsive ({
9
+ Key key,
10
+ @required this .mobile,
11
+ @required this .tablet,
12
+ @required this .desktop,
13
+ }) : super (key: key);
14
+
15
+ // This size work fine on my design, maybe you need some customization depends on your design
16
+
17
+ // This isMobile, isTablet, isDesktop helep us later
18
+ static bool isMobile (BuildContext context) =>
19
+ MediaQuery .of (context).size.width < 650 ;
20
+
21
+ static bool isTablet (BuildContext context) =>
22
+ MediaQuery .of (context).size.width < 1100 &&
23
+ MediaQuery .of (context).size.width >= 650 ;
24
+
25
+ static bool isDesktop (BuildContext context) =>
26
+ MediaQuery .of (context).size.width >= 1100 ;
27
+
28
+ @override
29
+ Widget build (BuildContext context) {
30
+ return LayoutBuilder (
31
+ // If our width is more than 1100 then we consider it a desktop
32
+ builder: (context, constraints) {
33
+ if (constraints.maxWidth >= 1100 ) {
34
+ return desktop;
35
+ }
36
+ // If width it less then 1100 and more then 650 we consider it as tablet
37
+ else if (constraints.maxWidth >= 650 ) {
38
+ return tablet;
39
+ }
40
+ // Or less then that we called it mobile
41
+ else {
42
+ return mobile;
43
+ }
44
+ },
45
+ );
46
+ }
47
+ }
You can’t perform that action at this time.
0 commit comments