Description:

mediaquery sizer

Mediaquery Sizer #

It helps you to use the screen sizes through mediaquery, without having to make instances to shorten its size or use it completely.


Manage sizes by screen percentages or even scalable pixels

Width Percentage
Height Percentage
Scalable Pixels


Use sizes by percentage of the parent widget thanks to the LayoutBuilder

Parent Width Percentage
Parent Height Percentage
Parent Scalable Pixels


Manage all the information on the screen easily

Width
Height
Device Pixel Ratio
Aspect Ratio
Orientation
Screen Size




Getting started #
Copy the dependency into your pubspec.yaml
mediaquery_sizer: ^1.1.0
copied to clipboard
Import the package in your file to be able to use it
import 'package:mediaquery_sizer/mediaquery_sizer.dart';
copied to clipboard
Usage #
In order to use percentages and scalable pixels simply use the extension
By default it should be like this
Size size = MediaQuery.of(context).size;
Container(
// Long way
width: MediaQuery.of(context).size.width * 0.1,
// Short way
height: size.height * 0.2,
color: Colors.red,
Text(
'Hello world!',
// Text size is the same regardless of screen size
style: TextStyle(fontSize: 16),
)
);
copied to clipboard
But now you can put it like this
Container(
// It is the same as using the full MediaQuery but much faster and applicable to all your apps quickly and easily.
width: 10.w(context),
height: 20.h(context),
color: Colors.red,
Text(
'Hello world!',
// The font size will grow with the screen size so as not to break the design. Something like a vectorized image.
style: TextStyle(fontSize: 16.sp(context))
)
);
copied to clipboard

Use the screen information through the static methods of the [Sizer] class
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Screen Height: ${Sizer.h(context)}', style: style),
Text('Screen Width: ${Sizer.w(context)}', style: style),
// Eg: This is the same as using MediaQuery.of(context).devicePixelRatio
Text(
'Screen Device Pixel Ratio: ${Sizer.devicePixelRatio(context)}',
// Eg: This is the same as using MediaQuery.of(context).size.aspectRatio
style: style),
Text('Screen Aspect Ratio: ${Sizer.aspectRatio(context)}',
style: style),
Text('Screen Orientation: ${Sizer.orientation(context)}',
style: style),
Text('Screen Is Portrait: ${Sizer.isPortrait(context)}',
style: style),
Text('Screen Is Landscape: ${Sizer.isLandscape(context)}',
style: style),
Text('Screen Screen Size: ${Sizer.screenSize(context)}',
style: style),
Text('Screen Is Mobile: ${Sizer.isMobile(context)}',
style: style),
Text('Screen Is Tablet: ${Sizer.isTablet(context)}',
style: style),
Text('Screen Is Desktop: ${Sizer.isDesktop(context)}',
style: style),
],
),
copied to clipboard

Use the size as a percentage of the size of the containing parent widget
Container(
alignment: Alignment.centerLeft,
width: 300,
color: Colors.yellow,
child: LayoutBuilder(builder: (ctx, cons) {
return Container(
alignment: Alignment.centerLeft,
// Here the width of the widget is specified with respect to the
// total width of its parent widget thanks to the values received
// by the constraints
width: 40.parentW(cons),
color: Colors.green,
);
}),
)
copied to clipboard
Additional information #
As specified this package only makes use of the MediaQuery class.
An external package is not used, nor is any strange or special method done, it is something that anyone could do but in a shorter way to make things easier, since I have seen many packages that make use of special methods that in the end always give errors .
But this package only makes use of what Flutter and Dart already provide but in an abbreviated form.
Feel free to use it or tweak it, and if you don't want to mess with it you can make the request in the repository and I'll try to add the feature.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter