Skip to content

Instantly share code, notes, and snippets.

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.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;
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