sized_context 0.2.1+1

  • Readme
  • Changelog
  • Example
  • Installing
  • new81

âœĨ 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

0.2.1+1 #

  • Fixed bug for diagonal inches

0.2.1 #

  • Refactored percent api to: pctWidth and pctHeight

0.2.0+4 #

  • Added conditional check for mobile platforms, using 150px/inch rather than 96
  • Added fractional helper methods widthFraction and heightFraction

0.1.2 #

  • Initial version

example/lib/main.dart

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:sized_context/sized_context.dart';

void main() => runApp(MaterialApp(home: Demo()));

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print(window.physicalSize);

    return Material(
      child: Center(
          child: Text(
        "${context.isLandscape}, \n"
        "${context.sizePx},\n"
        "${context.widthPx},\n"
        "${context.heightPx},\n"
        "${context.diagonalPx},\n"
        "${context.sizeInches},\n"
        "${context.widthInches},\n"
        "${context.heightInches},\n"
        "${context.diagonalInches},\n"
        "${context.widthPct(.1)},\n"
        "${context.heightPct(.1)},\n"
        "${context.sizeInches},\n"
        "${context.mq.padding},\n",
      )),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  sized_context: ^0.2.1+1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:sized_context/sized_context.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
62
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
81
Learn more about scoring.

We analyzed this package on Mar 26, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Health suggestions

Format lib/src/extensions.dart.

Run flutter format to format lib/src/extensions.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.6.0-dev <3.0.0
flutter 0.0.0
universal_platform ^0.1.2 0.1.3
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8