Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Mainly used for Flutter web, builds the correct child depending on the width of the screen.
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