display_metrics 0.5.1

Flutter plugin to retrieve device display metrics (resolution, size, PPI, diagonal). Convert inches & mm to Flutter logical pixels.

display_metrics

Flutter plugin that provides display metrics such as real screen resolution, physical display size, ppi, diagonal. Also it contains BuildContext extension to transform inches & millimeters into Flutter logical pixels.

Features

• Get real screen resolution, display size (inches) and PPI
• Convert inches and millimeters into Flutter logical pixels

Install

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  display_metrics: ^0.5.1

copied to clipboard

In your library add the following import:

import 'package:display_metrics/display_metrics.dart';

copied to clipboard

Getting started

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    // add DisplayMetricsWidget to Widget tree above MaterialApp to use DisplayMetrics.of(context) and BuildContext extension methods
    return DisplayMetricsWidget(
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Display metrics example app'),
            centerTitle: true,
          ),
          body: const BodyWidget(),
        ),
      ),
    );
  }
}

copied to clipboard

Usage

DisplayMetricsData

To access DisplayMetricsData you can call

final metrics = DisplayMetrics.maybeOf(context);
// or
final metrics = DisplayMetrics.of(context);

copied to clipboard

// Device's screen physical size in inches
metrics.physicalSize => Size

// Device's screen resolution in real pixels
metrics.resolution => Size

// Device's screen diagonal in inches
metrics.diagonal => double

// Device's screen pixels per inch (PPI)
metrics.ppi => double 

// The number of logical pixels on the device's screen
// that corresponds to one inch
metrics.inchesToLogicalPixelRatio => double 

// MediaQuery`s devicePixelRatio;
metrics.devicePixelRatio => double 

copied to clipboard

Convert units

To convert inches and millimeters into Flutter logical pixels and vice versa you can call one of BuildContext extension methods:

// Converts inches to Flutter logical pixels
context.inchesToPixels(double inches);

// Converts millimeters to Flutter logical pixels
context.mmToPixels(double mm);

// Converts Flutter logical pixels into inches
context.pixelsToInches(int pixels);

// Converts Flutter logical pixels into millimeters
context.pixelsToMm(int pixels);

copied to clipboard

DisplayMetricsWidget

// Add [DisplayMetricsWidget] to Widget tree above MaterialApp to use DisplayMetrics.of(context) and BuildContext extension methods
DisplayMetricsWidget(
  // Set [updateSizeOnRotate] to true if you need to update size when orientation of your device changes
  updateSizeOnRotate: true,
  child: child,
);

copied to clipboard

Supported Platforms

Platform	Support
iOS	✅
Android	✅
Windows	✅
Web	✅ please read limitations
macOS	🛠 (to be added)
Linux	🛠 (to be added)

Limitations

Due to browser limitations, it's not possible to accurately determine the physical screen dimensions or the actual DPI on the web platform. Browsers use a unit called a CSS pixel, which is not a physical pixel but a unit based on a reference pixel, defined as 1/96th of an inch. This system depends on the viewing angle of the device and varies across displays, making it impossible to obtain accurate physical measurements or DPI through web APIs. You can read more here.

Credits

iOS implementation uses Jens Schwarzer's UIScreenExtension