https://github.com/aloisdeniel/flutter_device_preview
Approximate how your app looks and performs on another device.
https://github.com/aloisdeniel/flutter_device_preview
device flutter preview tool
Last synced: 13 days ago
JSON representation
Approximate how your app looks and performs on another device.
- Host: GitHub
- URL: https://github.com/aloisdeniel/flutter_device_preview
- Owner: aloisdeniel
- License: mit
- Created: 2019-05-27T05:51:42.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-08-05T09:21:33.000Z (9 months ago)
- Last Synced: 2025-04-02T01:15:38.914Z (20 days ago)
- Topics: device, flutter, preview, tool
- Language: Dart
- Homepage: https://aloisdeniel.github.io/flutter_device_preview/
- Size: 112 MB
- Stars: 2,249
- Watchers: 19
- Forks: 362
- Open Issues: 126
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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
### Add dependency to your pubspec file
Since Device Preview is a simple Dart package, you have to declare it as any other dependency in your `pubspec.yaml` file.
```yaml
dependencies:
device_preview:
```
### Add DevicePreview
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.
```dart
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(),
);
}
}
```
## 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.