Last active
January 5, 2021 23:34
-
-
Save Nash0x7E2/209c20214c177802f22a2070cbb9702c to your computer and use it in GitHub Desktop.
Mainly used for Flutter web, builds the correct child depending on the width of the screen.
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_web/material.dart'; | |
class ResponsiveLayout extends StatelessWidget { | |
const ResponsiveLayout({ | |
Key key, | |
@required this.largeChild, | |
this.mediumChild, | |
this.smallChild, | |
this.largeBreakPoint = 1200.0, | |
this.mediumBreakPoint = 800.0, | |
}) : assert(largeChild != null), | |
super(key: key); | |
final Widget largeChild; | |
final Widget mediumChild; | |
final Widget smallChild; | |
final double largeBreakPoint; | |
final double mediumBreakPoint; | |
@override | |
Widget build(BuildContext context) { | |
final smallestWidth = MediaQuery.of(context).size.shortestSide; | |
if (smallestWidth >= largeBreakPoint) { | |
return largeChild; | |
} else if (smallestWidth >= mediumBreakPoint) { | |
return mediumChild ?? largeChild; | |
} else { | |
return smallChild ?? mediumChild ?? largeChild; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment