Skip to content

About

Flutter plugin: whether the display is round or rectangular - what a watch app needs to lay out a face

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Latest commit

 

History

1 Commit

Folders and files

Repository files navigation

screen_shape

pub package

A Flutter plugin that tells whether the display is round or rectangular - what a watch app needs to lay out a face, and what Flutter cannot tell from the window.

A Wear OS watch with a round face and one with a square face are both a square window to Flutter: the same size, the same insets, the same MediaQuery. A layout that keeps clear of a round bezel - content inside the inscribed square, a button along the bottom cut by the circle, a grid kept to the middle - needs to know which one it is on. The maker declares it in the device configuration; this plugin reads it.

Features

  • The maker's own answer - Configuration.isScreenRound on Android, not a guess from the window size.
  • Asked once - a display does not change shape, so the first answer is kept for the life of the process.
  • Null is an answer - on a platform with no display shape to report (web, desktop) you get null and decide for yourself, for example from the window's size.
  • No permissions, never throws.

Requirements

  • Flutter 3.47 or later.
  • Android 7.0 (API 24) or later, built with Android Gradle Plugin 8.13 or later.
  • iOS 15 or later.

Installation

dependencies:
  screen_shape: ^0.1.0
flutter pub get

Usage

import 'package:screen_shape/screen_shape.dart';

final shape = await const PlatformScreenShapeReader().read();

shape;           // ScreenShape.round on a Pixel Watch, ScreenShape.rectangular on a phone
shape?.isRound;  // true / false, or null where the platform has no answer

Read it once at startup, before the first frame, and hand it down the tree - with a Provider, an InheritedWidget or a service locator - so the first frame is already laid out for the right face:

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final shape = await const PlatformScreenShapeReader().read();
  runApp(MyApp(screenShape: shape));
}

Where read() gives null, a square window of watch size is a reasonable stand-in for a round face; that choice is the app's, not the plugin's.

Platform answers

Platform Answer
Android (phones, tablets, Wear OS) Configuration.isScreenRound: round on round watch faces, rectangular everywhere else
iOS always rectangular: no iPhone or iPad display is round
Web, macOS, Windows, Linux null, without asking

Any failure on the platform side - a missing plugin registration in a test, an exception - also answers null.

Testing

ScreenShapeReader is an interface: give a fake one to the code under test instead of the platform reader. To reset the kept answer between tests that use the platform reader, call PlatformScreenShapeReader.debugForget().

License

MIT - see LICENSE.

About

Flutter plugin: whether the display is round or rectangular - what a watch app needs to lay out a face

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages