sized_context 1.0.0+1 icon indicating copy to clipboard operation
sized_context: ^1.0.0+1 copied to clipboard

Access MediaQuery sizing info directly on the context, also adds some helper methods for sizing and layout.

âœĨ Sized Context - Easy responsive sizing #

With this extension package you can easily access the MediaQuery sizing info directly on the build context:

Size size = context.sizePx;

It also provides additional convenience methods like landscape state, diagonal screen size, inch-based measurements, screen type and percentage values:

bool isLandscape = context.isLandscape; //Instead of: MediaQuery.of(context).orientation == Orientation.landscape
bool isTablet = context.diagonalInches >= 7; //Get physical device size in inches 
bool useSingleColumn = context.widthPx < 400; //Access .width and .height directly, no need to go through .size
double sidePadding = context.widthPercent(0.1); //Use percentages of width or height for sizing

🔨 Installation #

dependencies:
  sized_context: ^1.0.0+1

⚙ Import #

import 'package:sized_context/sized_context.dart';

🕹ī¸ Usage #

bool isLandscape = context.isLandscape;
//PIXELS
Size size = context.sizePx;
double width = context.widthPx;
double height = context.heightPx;
double diagonalPx = context.diagonalPx;
//INCHES
Size sizeInInches = context.sizeInches;
double widthInInches = context.widthInches;
double heightInInches = context.heightInches;
double diagonalInInches = context.diagonalInches;
//PERCENTAGE
double widthPercent = context.widthPct(.1);
double heightPercent = context.heightPct(.25);

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();

🐞 Bugs/Requests #

If you encounter any problems please open an issue. If you feel the library is missing a feature, please raise a ticket on Github and we'll look into it. Pull request are welcome.

👏 Thanks #

  • Thanks to reddit user der_kobold for the idea to turn this into an extension!

📃 License #

MIT License

129
likes
130
pub points
96%
popularity

Publisher

verified publisher icongskinner.com

Access MediaQuery sizing info directly on the context, also adds some helper methods for sizing and layout.

Homepage

Documentation

API reference

License

Icon for licenses.MIT (LICENSE)

Dependencies

flutter, universal_platform

More

Packages that depend on sized_context