aloisdeniel/flutter_device_preview

This system is a Flutter-based toolkit for simulating and testing user interfaces across multiple devices and platforms. It provides a \DevicePreview\ widget and a \DeviceFrame\ library to emulate various mobile, tablet, and desktop environments, including media queries, themes, and localization. The system also includes a DevTools integration for interactive previewing and a separate plugin for capturing screenshots of the simulated devices.

9 changes.

This period focused on the initial release of the device\_frame and DevicePreview packages, introducing core widgets for simulating various mobile and desktop devices. The work also involved establishing comprehensive example applications across Android, iOS, macOS, and web platforms to demonstrate and validate the new functionality.

12 changes.

This period focused on expanding the device\_preview package with robust state management, flexible storage backends, and a modular UI architecture. It also introduced the devtools\_device\_preview package to enable device preview functionality within DevTools, alongside a new screenshot plugin and updated example applications.

A new example application has been added to the devtools\_device\_preview package, demonstrating how to integrate the DevicePreviewDevtools API. The example app enables device preview features such as changing screen orientation, bold text, brightness, and device models (e.g., iPhone 12 Mini, Samsung Galaxy Note 20 Ultra) via a simple UI with list tiles for each setting.

_devtools\_device\preview/example · high confidence

Users can now fine-tune custom device dimensions via a new dialog and sliders for width, height, and pixel ratio, with values constrained between 128 and 2688. The device model picker now groups devices by type (Phone, Tablet, Laptop, TV, Desktop) with section headers, and the locale picker adjusts its layout to avoid bottom inset issues.

_device\_preview/lib/src/views/tool\panel/sections/subsections · high confidence

The example app now includes a complete demo of the device\_frame library, showcasing how to render device frames with customizable styles (dark/light), toggle frame visibility, switch between portrait and landscape orientations, and display a virtual keyboard overlay. The app iterates through all supported devices via a scrollable tab bar, allowing users to preview each device's frame and screen insets. This provides a practical reference for integrating device frames into Flutter applications.

_device\frame/example · high confidence

The \device\_preview\_screenshot\ plugin is now available as a separate package, allowing users to capture screenshots of the device preview. The change includes the plugin's core files, a complete example application for both Android and iOS platforms, and supporting configuration files (such as \.gitignore\, \CHANGELOG.md\, and \README.md\).

_plugins/device\_preview\screenshot · high confidence

Introduced the devtools\_device\_preview package, providing a custom Flutter binding (PreviewWidgetsFlutterBinding) that enables device preview functionality by wrapping the standard WidgetsBinding. The package exports core tools and the device\_frame library. Additionally, a complete example application was added, including all necessary configuration files (.gitignore, .metadata, analysis\_options), platform-specific setup for Android (AndroidManifest, MainActivity, Gradle, styles) and iOS (Xcode project, Info.plist, assets, storyboards), as well as web and test scaffolding to demonstrate the package's usage.

_devtools\_device\preview · high confidence

The device\_preview library now includes new storage backends for persisting user preferences. A file-based storage implementation has been added, supporting both standard I/O and web-specific (localStorage) platforms, with conditional imports to ensure compatibility and improve the pub.dev score. Additionally, a preferences-based storage implementation has been introduced, which uses platform-specific storage mechanisms (shared\_preferences for native platforms and localStorage for web) to save and load device preview settings. These changes provide users with more flexible options for preserving their device preview configurations across sessions.

_device\preview/lib/src/storage · high confidence

The device\_preview package introduces new utility classes to support device preview functionality. A new \MediaQueryObserver\ widget is added to track window metric changes and provide an up-to-date \MediaQuery\ data. Additionally, JSON converters for \Size\ and \EdgeInsets\ are introduced to handle serialization, and a \DeviceScreenshot\ class is added to represent screenshot data with device information and image bytes.

_device\preview/lib/src/utilities · high confidence

The Android portion of the example app has been added, providing the necessary AndroidManifest files for debug, profile, and main builds, along with the MainActivity Kotlin class, launch theme styles, and Gradle wrapper configuration. This establishes the standard Android project structure required to build and run the Flutter example on Android devices.

_device\preview/example/android · high confidence

The package introduces the core \DevicePreview\ widget, which simulates how an app renders on different devices by wrapping the application with device-specific themes and media queries. It includes a \ToolPanel\ for managing device selection, system settings, and accessibility options. Users can configure the preview using properties like \defaultDevice\, \isToolbarVisible\, \backgroundColor\, and \padding\. The widget supports localization, state management via a store, and optional persistence of user preferences.

_device\preview/lib/src · high confidence

The device\_frame package is now available, providing mockups for common mobile and desktop devices. Users can wrap widgets in a DeviceFrame widget to simulate various devices, including iOS and Android phones, tablets, and generic desktop or laptop frames. The package includes support for displaying a virtual keyboard and maintaining device media query and theme in an encapsulated app. It also provides factory methods to create custom generic devices for phones, tablets, and monitors.

_device\_frame, device\_preview, device\preview/lib · high confidence

Users can now define and save custom device configurations via a new \CustomDeviceInfo\ model and associated state classes (\DevicePreviewState\, \DevicePreviewData\, \DevicePreviewSettingsData\) that support JSON serialization. The preview state is now managed by a \DevicePreviewStore\ that persists settings and custom device data to storage, enabling the preview's configuration to be restored between sessions.

_device\preview/lib/src/state · high confidence

The device preview interface has been completely rebuilt with new \large.dart\ and \small.dart\ layout files that adapt the tool panel to different screen sizes. A new \theme.dart\ file introduces dark and light theme support for the toolbar, allowing the preview to match the app's visual style. Additionally, new widget components for device type icons, search fields, and target platform icons have been added to the tool panel, improving the overall user experience and accessibility of the preview tool.

_device\preview/lib/src/views · high confidence

The example application now includes the necessary files to run on the web platform. This includes a new \index.html\ template for bootstrapping the Flutter engine and a \manifest.json\ file that configures the app's metadata, icons, and PWA settings. Users can now build and run the example in a browser, enabling cross-platform testing and demonstration of the device preview functionality on the web.

_device\preview/example/web · high confidence

The iOS native project files for the example app have been added, including the Xcode project configuration, workspace settings, and standard Flutter iOS template files (such as the AppFrameworkInfo, xcconfigs, and storyboards). This establishes the iOS build environment for the example, ensuring the project can be opened and built in Xcode.

_device\preview/example/ios · high confidence

The device preview now includes a comprehensive list of default available locales (default\_locales.dart) and a new named locale class (locales.dart) that maps locale codes to human-readable names. The locale resolution algorithm has been updated to handle null or empty preferred locale lists gracefully, defaulting to the first supported locale when no platform-provided locales are available. This ensures the preview UI can still display localized content even if the platform does not pass locale information.

_device\preview/lib/src/locales · high confidence

The tool panel's UI has been refactored into distinct, reusable section components (accessibility, device, settings, system, and a shared section header) that can be individually hidden or shown via boolean parameters. This change improves the maintainability of the tool panel and allows users to customize which settings are visible in the preview menu.

_device\_preview/lib/src/views/tool\panel/sections · high confidence

The Linux and Windows example applications have been updated with new project scaffolding to support Flutter 3. This includes regenerated CMake build files, updated native C++ entry points, and modernized build configurations (e.g., CMake 3.14 for Windows, GTK dependencies for Linux). Users building these examples will get a compatible native host application structure aligned with the latest Flutter tooling.

_device\_preview/example/linux, device\preview/example/windows · medium confidence

The README has been significantly expanded to include a visual header, feature list, and a detailed quickstart guide. The guide now explicitly instructs users to set the app's \useInheritedMediaQuery\ to \true\ and use \DevicePreview.appBuilder\ for the builder, ensuring \MediaQuery\ is correctly simulated for the selected device. The documentation also clarifies that Device Preview is an approximation and recommends running on a real device for accurate testing.

(repo-wide) · high confidence

The device\_preview/example app has been updated to support Flutter 3, including the adoption of useInheritedMediaQuery and the addition of web platform support. The example now includes a custom plugin demonstration and is configured with modern linting rules via flutter\_lints.

_device\preview/example · medium confidence

The macOS example application has been updated to support Flutter 3.22, including a migration to null-safety and the addition of a \GeneratedPluginRegistrant\ to properly register the \shared\_preferences\_foundation\ plugin. The project now includes a standard macOS app structure with an \AppDelegate\, \MainFlutterWindow\, and associated Xcode project files, ensuring the example runs correctly on macOS.

_device\preview/example/macos · high confidence

The example apps for device\_frame, device\_preview, devtools\_device\_preview, and device\_preview\_screenshot have been updated with new dependency versions and build configurations. This includes updates to Android build scripts (build.gradle, settings.gradle, gradle.properties), iOS/macOS Podfiles, and pubspec.yaml files to reflect current Flutter and Dart SDK requirements.

(dependencies) · medium confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 48 → 48 (+0.0)
• Rubric changed (rubric-2026.08.18 → rubric-2026.08.19) — scores are not directly comparable.

• Code Health 96 → 96 (+0.0)
• Architecture 100 → 100 (+0.0)
• Maturity 32 → 32 (+0.0)
• Readiness 26 → 26 (+0.0)
• Security 100 → 100 (+0.0)
• Domain Modelling 100 → 100 (+0.0)

• LLM evaluation failed

• The device proposal section mentions an official Figma file but does not link to it. (docs/content/contributing/device_proposal.md)

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

aloisdeniel/flutter_device_preview was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.