Created
November 15, 2021 11:06
-
-
Save ishaquehassan/7407024078548347c160df2013a58073 to your computer and use it in GitHub Desktop.
To handle responsive layouts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
class ResponsiveView extends StatelessWidget { | |
final Widget mobile; | |
final Widget tablet; | |
final Widget desktop; | |
const ResponsiveView({ | |
Key? key, | |
required this.mobile, | |
required this.tablet, | |
required this.desktop, | |
}) : super(key: key); | |
// maybe you need some customization depends on your design | |
static bool isExtraSmall(BuildContext context) => | |
MediaQuery.of(context).size.width < 470; | |
static bool isMobile(BuildContext context) => | |
MediaQuery.of(context).size.width < 650 && | |
MediaQuery.of(context).size.width >= 470; | |
static bool isTablet(BuildContext context) => | |
MediaQuery.of(context).size.width < 1000 && | |
MediaQuery.of(context).size.width >= 650; | |
static bool isDesktop(BuildContext context) => | |
MediaQuery.of(context).size.width >= 1024; | |
@override | |
Widget build(BuildContext context) { | |
return LayoutBuilder(builder: (context, breackPoint) { | |
// if our width is more then 1100 then we consider it a desktop | |
if (breackPoint.maxWidth >= 1000) { | |
return desktop; | |
} | |
// if our width is less then 1100 and more then 650 we consider it as tablet | |
else if (breackPoint.maxWidth >= 650) { | |
return tablet; | |
} | |
// or less then that we called it mobile | |
else { | |
return mobile; | |
} | |
}); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment