Since Device Preview is a simple Dart package, you have to declare it as any other dependency in your pubspec.yaml
file.
dependencies:
device_preview: <latest version>
Wrap your app's root widget in a DevicePreview
and make sure to :
useInheritedMediaQuery
to true
.builder
to DevicePreview.appBuilder
.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/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(
useInheritedMediaQuery: true,
locale: DevicePreview.locale(context),
builder: DevicePreview.appBuilder,
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
home: const HomePage(),
);
}
}
Open the website
Open the demo
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.