After sharing our simplified screen size detection example to reddit last week, we received a great suggestion from the community: the concept would work better as a set of extension methods.

The original thought was to add the methods to MediaQuery, which didn’t seem that appealing because it would still be quite verbose to access.

Now, instead of long MediaQuery.of() calls, or using a utility class, you can simply ask the context it’s size:

import 'package:sized_context/sized_context.dart';
...
Size size = context.sizePx;

It also comes with a few helper methods, like landscape state, inch-based measurement and diagonal screen sizing:

//Instead of: MediaQuery.of(context).orientation == Orientation.landscape
bool isLandscape = context.isLandscape; 

//Get physical device size in inches 
bool isTablet = context.diagonalInches >= 7; 

//Access .width and .height directly, no need to go through .size
bool useSingleColumn = context.widthPx < 400; 

For convenience you can also access the MediaQueryData object directly, to get any other methods or properties:

EdgeInsets padding = context.mq.padding;
Size safeSize = context.mq.removePadding();

And just as you would expect, any calls to .size or .mq will automatically bind your view for a rebuild when screen size changes, just as if you were using MediaQuery.of() directly.

For a full list of available methods, check out the example on github where you can also view the source.

#code #flutter #open source #source code #layout #mediaquery #responsive #sizing