Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zeshuaro/device_preview_plus
Approximate how your app looks and performs on another device
https://github.com/zeshuaro/device_preview_plus
dart flutter flutter-plugin
Last synced: about 1 month ago
JSON representation
Approximate how your app looks and performs on another device
- Host: GitHub
- URL: https://github.com/zeshuaro/device_preview_plus
- Owner: zeshuaro
- License: mit
- Created: 2024-05-26T01:08:25.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-11-24T00:52:44.000Z (about 1 month ago)
- Last Synced: 2024-11-24T01:30:13.109Z (about 1 month ago)
- Topics: dart, flutter, flutter-plugin
- Language: Dart
- Homepage: https://pub.dev/packages/device_preview_plus
- Size: 112 MB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://pub.dartlang.org/packages/device_preview_plus)
[](https://aloisdeniel.github.io/flutter_device_preview)
[](https://github.com/zeshuaro/device_preview_plus/blob/main/LICENSE)
[](https://github.com/zeshuaro/device_preview_plus/actions/workflows/github-actions.yml?query=event%3Apush)
[](https://app.codacy.com/gh/zeshuaro/device_preview_plus/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade)
[](https://pub.dev/packages/flutter_lints)
[](https://github.com/sponsors/zeshuaro)
[](https://www.buymeacoffee.com/zeshuaro)
[](https://ko-fi.com/zeshuaro)
[](https://liberapay.com/zeshuaro/)
[](https://patreon.com/zeshuaro)
[](https://paypal.me/JoshuaTang)
> This is a fork of [device_preview](https://pub.dev/packages/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:
```yml
dependencies:
device_preview_plus: ^2.1.5
```
## 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.
```dart
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(),
);
}
}
```
## 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.