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
quickstart
wrap your app’s root widget in a devicepreview
and inject the dedicated builder
and locale
into your app.
make sure to provide
locale
andbuilder
to yourwidgetsapp
. if not defined,mediaquery
won’t be simulated for the selected device and selected locale won’t be applied.
import 'package:device_preview/device_preview.dart';
void main() => runapp(
devicepreview(
enabled: !kreleasemode,
builder: (context) => myapp(), // wrap your app
),
);
class myapp extends statelesswidget {
@override
widget build(buildcontext context) {
return materialapp(
locale: devicepreview.locale(context), // add the locale here
builder: devicepreview.appbuilder, // add the builder here
home: homepage(),
);
}
}
documentation
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.
Comments are closed.