Getting screen size in a class without buildcontext in Flutter

Question

I am trying to get screen size in flutter inside a custom class which donot have build method in it. How can i get screen size without using buildcontext class?

The following code :

class ShapesPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {

    BuildContext context;
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    final paint = Paint();

    paint.color = Colors.deepOrange;

    var center = Offset(size.width / 2, size.height / 2);

    print(height);
    print(width);

    Rect rect = Rect.fromLTWH(0.0, 0.0, width, height);
    canvas.drawRect(rect, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

gives following error :

The following assertion was thrown during paint(): 'package:flutter/src/widgets/media_query.dart': Failed assertion: line 689 pos 12: 'context != null': is not true.

score 54 · Accepted Answer · answered Aug 25 '21 at 10:22

54

use

MediaQueryData.fromWindow(WidgetsBinding.instance.window);

you can use it to get MediaQuery without need context it depend on instance of window to get size information

answered Aug 25 '21 at 10:22

kareem alkoul

739
6
13

6

This is the only answer on this page that actually answers the original question and is correct. – Stevey Oct 22 '21 at 02:33
An expression whose value can be 'null' must be null-checked before it can be dereferenced. This is the error I'm getting on using this, can anyone help! – Apoorv pandey Jan 16 '22 at 07:02
3

@Apoorvpandey just add an exclamation mark to it and tell the compiler that you know what you're doing like this `MediaQueryData.fromWindow(WidgetsBinding.instance!.window)` – Klemen Tusar Jan 29 '22 at 22:58
1

Wow, very nice. I access my `height` with: `MediaQueryData.fromWindow(WidgetsBinding.instance.window).size.width.toInt()`. Thanks! – Felipe Sales Dec 07 '22 at 14:23
So you access height with width..? – who-aditya-nawandar Dec 17 '22 at 13:52
It works, but once I change the orientation, for ex. from Portrait to landscape, it is not updated. – Ahmed Hammad Feb 28 '23 at 08:11
'MediaQueryData.fromWindow' is deprecated and shouldn't be used. Use MediaQueryData.fromView instead. – Nikhil kumar May 13 '23 at 04:17

score 9 · Answer 2 · answered May 24 '23 at 06:08

9

As of May 2023, in Flutter 3.10.1 MediaQueryData.fromWindow() has been deprecated. Use WidgetsBinding.instance.platformDispatcher.views.first.physicalSize.width now. Replace width with height to get the height of the screen

answered May 24 '23 at 06:08

Mohammad Khan Awan

164
1
3
8

score 5 · Answer 3 · answered Sep 02 '19 at 10:53

You can directly pass the screen's width and height as a parameter for the widget ShapesPainter if that is all what you need.

Solution Code:

class ShapesPainter extends CustomPainter {

  final double width;
  final double height;

  ShapesPainter({this.width,this.height});

  @override
  void paint(Canvas canvas, Size size) {

    final paint = Paint();

    paint.color = Colors.deepOrange;

    var center = Offset(size.width / 2, size.height / 2);

    print(height);
    print(width);

    Rect rect = Rect.fromLTWH(0.0, 0.0, width, height);
    canvas.drawRect(rect, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

Usage:

// Wherever you'll be using it
ShapesPainter(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
)

You can even use `double.infinity` if you wish to. – Mohit Shetty Nov 19 '19 at 11:20 — Mohit Shetty, Nov 19 '19 at 11:20

score 0 · Answer 4 · answered Jun 10 '23 at 15:12

To complete @MohammadKhanAwan response,

WidgetsBinding.instance.platformDispatcher.views.first.physicalSize.width return the resolution (ex: 1080 / 2400) to get the same value as MediaQuery.of(context).size

you have to divided it by pixel ratio like below

mixin Responsive {
  final double widthScreen = WidgetsBinding
          .instance.platformDispatcher.views.first.physicalSize.width /
      WidgetsBinding.instance.platformDispatcher.views.first.devicePixelRatio;
  
final double heightScreen = WidgetsBinding
              .instance.platformDispatcher.views.first.physicalSize.height /
          WidgetsBinding.instance.platformDispatcher.views.first.devicePixelRatio;
    }

score 0 · Answer 5 · answered Jul 14 '23 at 22:20

I previously used window singleton to retrieve the screen width and height:

double width = (window.physicalSize.shortestSide / window.devicePixelRatio);
double height = (window.physicalSize.longestSide / window.devicePixelRatio);

but it was deprecated, and consequently also MediaQueryData.fromWindow() (from the accepted answer) aswell.

Solution

FlutterView.physicalSize gives you

The dimensions of the rectangle into which the scene rendered in this view will be drawn on the screen, in physical pixels.

FlutterView.devicePixelRatio gives you

The number of device pixels for each logical pixel for the screen this view is displayed on.

By using the following snippet, you can then obtain the actual logical screen width and height:

FlutterView view = PlatformDispatcher.instance.views.first;

double physicalWidth = view.physicalSize.width;
double physicalHeight = view.physicalSize.height;

double devicePixelRatio = view.devicePixelRatio;

double screenWidth = physicalWidth / devicePixelRatio;
double screenHeight = physicalHeight / devicePixelRatio;

JISHNU N · Answer 6 · 2021-05-22T08:59:24.630

-4

In the following way, you can get the device screen size without declaring them in the build method.

  void paint(BuildContext context)
{
  double width = MediaQuery.of(context).size.width;
  double height = MediaQuery.of(context).size.height;
}

And you can access them inside other file build methods after importing this method.

paint(context)

edited May 22 '21 at 08:59

answered May 21 '21 at 19:39

JISHNU N

9
1
5

Getting screen size in a class without buildcontext in Flutter

6 Answers6

Solution

Linked