device_preview_plus

Description:

device preview plus

This is a fork of device_preview to keep it up to date with newer Flutter versions.

For users migrating from the device_preview package the only changes required are changing your pubspec.yaml
file to point to device_preview_plus and changing any import statements to point to
the updated package:device_preview_plus\device_preview_plus.dart.



Approximate how your app looks and performs on another device. Main features:

Preview any device from any device
Change the device orientation
Dynamic system configuration (language, dark mode, text scaling factor, ...)
Freeform device with adjustable resolution and safe areas
Keep the application state
Plugin system (Screenshot, File explorer, ...)
Customizable plugins

Getting Started #
Add this to your project's pubspec.yaml file:
dependencies:
device_preview_plus: ^2.1.2
copied to clipboard
Usage #
Wrap your app's root widget in a DevicePreview and make sure to :

Set your app's useInheritedMediaQuery to true.
Set your app's builder to DevicePreview.appBuilder.
Set your app's locale to DevicePreview.locale(context).


Make sure to override the previous properties as described. If not defined, MediaQuery won't be simulated for the selected device.

import 'package:device_preview_plus/device_preview_plus.dart';

void main() => runApp(
DevicePreview(
enabled: !kReleaseMode,
builder: (context) => MyApp(), // Wrap your app
),
);

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
useInheritedMediaQuery: true,
locale: DevicePreview.locale(context),
builder: DevicePreview.appBuilder,
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
home: const HomePage(),
);
}
}
copied to clipboard
Demo #
Open the demo
Limitations #
Think of Device Preview as a first-order approximation of how your app looks and feels on a mobile device. With Device Mode you don't actually run your code on a mobile device. You simulate the mobile user experience from your laptop, desktop or tablet.

There are some aspects of mobile devices that Device Preview will never be able to simulate. When in doubt, your best bet is to actually run your app on a real device.