Flutter code extension that provides MediaQuery sizing info directly on the BuildContext instance

Last update: Apr 26, 2022

✥ 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: ^0.2.1+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

GitHub

https://github.com/gskinnerTeam/flutter-sized-context
You might also like...

Add beautiful and trending tab indicators directly to your default Flutter TabBar

Add beautiful and trending tab indicators directly to your default Flutter TabBar

Add beautiful and trending tab indicators directly to your default Flutter TabBar. Features 💚 Supports Android, iOS, Web Can be directly added to the

May 10, 2022

This package allows you to scroll/select the value directly from the dropdown with less effort and time.

Direct Select This package allows you to scroll/select the value directly from the dropdown with less effort and time. Inspired by Virgil Pana shot Sa

May 16, 2022

Immich - Self-hosted Photo backup solution directly from your mobile phone

IMMICH Self-hosted Photo backup solution directly from your mobile phone. Note T

May 26, 2022

Flutter cinema front - Movie Info App UI For Flutter

Flutter cinema front - Movie Info App UI For Flutter

Movie Info App - Flutter UI Watch it on YouTube Packages we are using: flutter_s

Jan 17, 2022

A collection of stylish animated dialogs like Normal, Progress, Success, Info, Warning, and Error for flutter.

A collection of stylish animated dialogs like Normal, Progress, Success, Info, Warning, and Error for flutter.

stylish_dialog A collection of stylish animated dialogs like Normal, Progress, Success, Info, Warning, and Error for flutter. Showcase ⭐ Installing de

Feb 23, 2022

Breaking-bad - Used Flutter with BLoC pattern to show some info

Breaking-bad - Used Flutter with BLoC pattern to show some info

📘 Overview Used Flutter with BLoC pattern to show some info. about my favorite

Dec 31, 2021

System info plus - A Flutter plugin to get device Random Access Memory (RAM) size

system_info_plus A Flutter plugin to get device Random Access Memory (RAM) size.

Jan 10, 2022

Flutter App to Fetch Anime Info

Flutter App to Fetch Anime Info

Weebify Flutter App to get Anime and Manga Details Getting Started Follow the steps to install flutter from here After installing flutter, follow thes

Mar 5, 2022

Find The Latest trending and upcoming movies and tv shows with MovieDB app. The app contains all info about movies and tv shows. find similar movies or shows, Browse all genres, video trailers, backdrops, logos, and posters.

MovieDB App Features. Dynamic Theming Search Functionality Onboarding-Screen Select favourite movie Home Screen Tranding movie Movies different catego

May 11, 2022
Comments
  • 1. context.widthPx origin?

    Hey there, When using context.widthPx, where is that size actually coming from? I am trying to put an AnimatedContainer inside my Expanded widget, as I am using an event to resize two Expanded containers on three possible conditions. Both start off at 50/50 flex size, then on the second condition it changes to 25/75, the last condition it's 75/25. It worked well without the Animated container, but the size transition is instant and I would prefer to have it animate.

    I was hoping that this package might be able to help somehow, but I am not quite sure where the size of context.widthPx is coming from? Is it the size of wherever it happens to be in the widget tree at the time it is being called, the size of the topmost parent of that particular widget up to the most recent build method, or is it the size of the screen itself?

    This is essentially how things are setup at the moment:

      Flex(
        direction: Axis.horizontal,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          Expanded(  // <---  I would like to get the current width of this
            flex: (target[expController.target]["newsWidth"]),
            child: AnimatedContainer(
              width: ?, // <-- and use it here
              duration: Duration(milliseconds: 500),
              curve: Curves.fastOutSlowIn,
              child: NewsMainHome(),
            ),
          ),
          Spacer(flex: target[expController.target]["spacer"]),
          Expanded(
            flex: (target[expController.target]["changeLogWidth"]),
            child: AnimatedContainer(
              width: ?, // Set to parent size
              duration: Duration(milliseconds: 500),
              curve: Curves.fastOutSlowIn,
              child: ChangeLogList(),
            ),
          ),
        ],
      ),
    

    It would be nice to be able to set the AnimatedContainer width to the size of the parent Expanded width so it will animate the size transition when the Expanded flex value changes from the event, but I have yet to find a decent way to go about it.

    Thanks, -MH

    Reviewed by MostHated at 2020-06-20 11:28
  • 2. I extended your extension to add more responsive helpers

    I put together my own SizingInfo class similar to yours, but I liked your implementation better. Hope you don't mind me transplanting my additional MediaQuery helpers that others should find useful for dealing with responsive screen sizing, especially when trying to adapt ui for big desktop screens. Here's a quick list of what I added: double widthPercent(double percentage) => percentage / 100 * widthPx; double heightPercent(double percentage) => percentage / 100 * heightPx; double get textSizeMultiplier => heightPx / 100.0; double get imageSizeMultiplier => widthPx / 100.0; ScreenType get screenType {..} enum ScreenType { Mobile, Tablet, Desktop }

    Plus I added inline documentations for all the functions for you.. Hope ya don't mind my additions, but it does make it a little more useful design pattern. Feel free to change any of it you want, all's good. I just love all the cool new tricks we can do with the Dart extensions on anything... Cheers.

    Reviewed by Skquark at 2020-03-06 13:18

Related

D info - Flutter package for response info message
D info - Flutter package for response info message

D'Info Flutter package for response info message. It's like bootstrap view but s

Feb 9, 2022
RelativeScale is a simple custom sizing system for flutter widgets to achieve the same physical sizes across different devices.
RelativeScale is a simple custom sizing system for flutter widgets to achieve the same physical sizes across different devices.

RelativeScale is a simple custom sizing system for flutter widgets to achieve the same physical sizes across different devices. Usage It is VERY easy

Feb 14, 2022
Various extensions on BuildContext to access inherited widget's state

context_extentions Getting inherited widget's state var themeData = context.theme; var scaffold = context.scaffold; var navigator = context.navi

Sep 23, 2021
A flutter app which provides basic info about our soalr system.
A flutter app which provides basic info about our soalr system.

⭐ Solar System ⭐ Built with ❤︎ by Akash Debnath This is my first project on Flutter. I made a simple solar system app which provides basic information

Apr 3, 2022
Jan 27, 2022
A Flutter plugin to retrieve the Firebase App Instance ID

firebase_instance_id A Flutter plugin to retrieve the Firebase App Instance ID# device_unlock How does it work App Instance Id is an unique identifier

Jan 21, 2022
A script to disable and re-enable CORS checks for Flutter's Chrome instance

A script to disable and re-enable CORS checks for Flutter's Chrome instance Note This script only disables CORS checks for local testing, and will not

May 23, 2022
Dart package to retrieve Transmission data from remote instance

transmission Dart package to talk to a Transmission torrent instance, for a flutter package including UI widget please check transmission Getting Star

Aug 3, 2021
A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your issue.
A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your issue.

r_scan A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your iss

May 24, 2022
ABC of Flutter widgets. Intended for super beginners at Flutter. Play with 35+ examples in DartPad directly and get familiar with various basic widgets in Flutter
ABC of Flutter widgets. Intended for super beginners at Flutter. Play with 35+ examples in DartPad directly and get familiar with various basic widgets in Flutter

Basic Widgets Examples This is aimed for complete beginners in Flutter, to get them acquainted with the various basic widgets in Flutter. Run this pro

May 13, 2022