Skip to content

Commit 292f3ad

Browse files
authored
Create responsive.dart
1 parent a03f32a commit 292f3ad

File tree

1 file changed

+47
-0
lines changed

1 file changed

+47
-0
lines changed

responsive.dart

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
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+
}

0 commit comments

Comments
 (0)