Easily preview your Flutter application on multiple different devices and screen sizes. Change themes, test accessibility controls and more.
Device Preview Package:
void main() => runApp(
DevicePreview(
builder: (context) => MyApp(),
),
);
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
locale: DevicePreview.of(context).locale, // <--- Add the locale
builder: DevicePreview.appBuilder, // <--- Add the builder
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
enabled
This property can be used to disable the preview.
DevicePreview(
enabled: !kReleaseMode, // Ensures that it is disabled in release mode
builder: (context) => MyApp(),
)
usePreferences
Indicates whether the configuration should be persisted between sessions.
DevicePreview(
usePreferences: false,
builder: (context) => MyApp(),
)
areSettingsEnabled
Indicates whether the settings menu should be available.
DevicePreview(
areSettingsEnabled: false,
builder: (context) => MyApp(),
)
background
The decoration used as the preview window background.
DevicePreview(
background: BoxDecoration(color: Colors.red),
builder: (context) => MyApp(),
)
toolBarStyle
The style of the bottom toolbar.
DevicePreview(
toolBarStyle: DevicePreviewToolBarStyle.light(),
builder: (context) => MyApp(),
)
onScreenshot
The processor used when the user takes a new screenshots.
By default, all screenshots are uploaded to file.io and the links are printed into the debugging console.
DevicePreview(
onScreenshot: (screenshot) {
final bytes = screenshot.bytes;
// Send the bytes to a drive, to the file system, to
// the device gallery for example. It may be useful for
// preparing your app release for example.
},
builder: (context) => MyApp(),
)
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.
What devices can I use for previewing?
If you are running the stable
, beta
or dev
channel of Flutter, you can use Android or iOS. If you are running the master
channel of Flutter, you can use macOS, Android or iOS.
What about Windows?
Since Flutter is still in technical preview on Windows, the path_provider
dependency can be satisfied by adding this dependency in your pubspec.yaml
if you are on the master
channel of Flutter:
device_preview:
shared_preferences_fde:
git:
url: https://github.com/google/flutter-desktop-embedding/
path: plugins/flutter_plugins/shared_preferences_fde
This is a temporary solution only. More information about this plug-in can be found here.
#flutter #mobile-apps