Fixed SVG issues. Fixed enabled property. Updated documentation.

README.md

@@ -27,9 +27,24 @@
 
 ## Quickstart
 
-Wrap your app's root widget in a `DevicePreview` and set  your app's `useInheritedMediaQuery` to `true`.
+### Add dependency to your pubspec file
 
-> Make sure to provide `locale` and `useInheritedMediaQuery` to your `WidgetsApp`. If not defined, `MediaQuery` won't be simulated for the selected device and selected locale won't be applied.
+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: <latest version>
+```
+
+### 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';
@@ -45,9 +60,12 @@ class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      useInheritedMediaQuery: true,// Set to true
-      locale: DevicePreview.locale(context), // Add the locale here
-      home: HomePage(),
+      useInheritedMediaQuery: true,
+      locale: DevicePreview.locale(context),
+      builder: DevicePreview.appBuilder,
+      theme: ThemeData.light(),
+      darkTheme: ThemeData.dark(),
+      home: const HomePage(),
     );
   }
 }
@@ -65,4 +83,4 @@ class MyApp extends StatelessWidget {
 
 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.
+> 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.

device_preview/CHANGELOG.md

@@ -1,4 +1,9 @@
-## 1.0.0-alpha.5
+## 1.0.0-alpha.7
+
+* Fixed `enabled` issue.
+* Fixed SVG issue with custom device.
+
+## 1.0.0-alpha.6
 
 * Upgraded `device_frame` dependency.
 * Fixed theming issues in small layout.

device_preview/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Aloïs Deniel
+Copyright (c) 2021 Aloïs Deniel
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

device_preview/README.md

@@ -27,9 +27,24 @@
 
 ## Quickstart
 
-Wrap your app's root widget in a `DevicePreview` and set  your app's `useInheritedMediaQuery` to `true`.
+### Add dependency to your pubspec file
 
-> Make sure to provide `locale` and `useInheritedMediaQuery` to your `WidgetsApp`. If not defined, `MediaQuery` won't be simulated for the selected device and selected locale won't be applied.
+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: <latest version>
+```
+
+### 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';
@@ -45,9 +60,12 @@ class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      useInheritedMediaQuery: true,// Set to true
-      locale: DevicePreview.locale(context), // Add the locale here
-      home: HomePage(),
+      useInheritedMediaQuery: true,
+      locale: DevicePreview.locale(context),
+      builder: DevicePreview.appBuilder,
+      theme: ThemeData.light(),
+      darkTheme: ThemeData.dark(),
+      home: const HomePage(),
     );
   }
 }
@@ -65,4 +83,4 @@ class MyApp extends StatelessWidget {
 
 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.
+> 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.

device_preview/example/lib/custom_plugin.dart

@@ -0,0 +1,23 @@
+import 'package:device_preview/device_preview.dart';
+import 'package:flutter/material.dart';
+
+class CustomPlugin extends StatelessWidget {
+  const CustomPlugin({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return ToolPanelSection(
+      title: 'Screenshot',
+      children: [
+        ListTile(
+          title: const Text('Print in console'),
+          onTap: () {
+            print('Hey, this is a custom plugin!');
+          },
+        )
+      ],
+    );
+  }
+}

device_preview/example/lib/main.dart

@@ -4,15 +4,16 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
 import 'basic.dart';
+import 'custom_plugin.dart';
 
 void main() {
-  debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
-
-  WidgetsFlutterBinding.ensureInitialized();
-
   runApp(
     DevicePreview(
       enabled: true,
+      tools: [
+        ...DevicePreview.defaultTools,
+        const CustomPlugin(),
+      ],
       builder: (context) => const BasicApp(),
     ),
   );

device_preview/example/macos/Podfile.lock

@@ -1,26 +1,20 @@
 PODS:
   - FlutterMacOS (1.0.0)
-  - path_provider_macos (0.0.1):
-    - FlutterMacOS
   - shared_preferences_macos (0.0.1):
     - FlutterMacOS
 
 DEPENDENCIES:
   - FlutterMacOS (from `Flutter/ephemeral`)
-  - path_provider_macos (from `Flutter/ephemeral/.symlinks/plugins/path_provider_macos/macos`)
   - shared_preferences_macos (from `Flutter/ephemeral/.symlinks/plugins/shared_preferences_macos/macos`)
 
 EXTERNAL SOURCES:
   FlutterMacOS:
     :path: Flutter/ephemeral
-  path_provider_macos:
-    :path: Flutter/ephemeral/.symlinks/plugins/path_provider_macos/macos
   shared_preferences_macos:
     :path: Flutter/ephemeral/.symlinks/plugins/shared_preferences_macos/macos
 
 SPEC CHECKSUMS:
   FlutterMacOS: 57701585bf7de1b3fc2bb61f6378d73bbdea8424
-  path_provider_macos: 160cab0d5461f0c0e02995469a98f24bdb9a3f1f
   shared_preferences_macos: 480ce071d0666e37cef23fe6c702293a3d21799e
 
 PODFILE CHECKSUM: 6eac6b3292e5142cfc23bdeb71848a40ec51c14c

device_preview/lib/device_preview.dart

@@ -9,4 +9,8 @@ export 'src/storage/file.dart';
 export 'src/locales/locales.dart';
 export 'src/locales/default_locales.dart';
 
+export 'src/views/tool_panel/sections/accessibility.dart';
+export 'src/views/tool_panel/sections/device.dart';
 export 'src/views/tool_panel/sections/section.dart';
+export 'src/views/tool_panel/sections/settings.dart';
+export 'src/views/tool_panel/sections/system.dart';

device_preview/lib/src/device_preview.dart

@@ -141,14 +141,19 @@ class DevicePreview extends StatefulWidget {
   /// Create a new [ThemData] from the given [data], but with updated properties from
   /// the currently simulated device.
   static Widget appBuilder(BuildContext context, Widget? child) {
+    if (!_isEnabled(context)) {
+      return child!;
+    }
+
     final theme = Theme.of(context);
-    final isInitialized = context.select(
+    final isInitializedAndEnabled = context.select(
       (DevicePreviewStore store) => store.state.maybeMap(
-        initialized: (_) => true,
+        initialized: (initialized) => initialized.data.isEnabled,
         orElse: () => false,
       ),
     );
-    if (!isInitialized || !_isEnabled(context)) {
+
+    if (!isInitializedAndEnabled) {
       return child!;
     }
 
@@ -161,6 +166,19 @@ class DevicePreview extends StatefulWidget {
     );
   }
 
+  /// Indicates whether the device preview is currently enabled.
+  static bool isEnabled(BuildContext context) {
+    if (_isEnabled(context)) {
+      return context.select(
+        (DevicePreviewStore store) => store.state.maybeMap(
+          initialized: (initialized) => initialized.data.isEnabled,
+          orElse: () => false,
+        ),
+      );
+    }
+    return false;
+  }
+
   static bool _isEnabled(BuildContext context) {
     final state = context.findAncestorStateOfType<_DevicePreviewState>();
     return state != null && state.widget.enabled;

device_preview/lib/src/state/custom_device.dart

@@ -49,13 +49,13 @@ class CustomDeviceInfo implements DeviceInfo {
 
     final svgFrame = '''
     <svg width="${frameSize.width}" height="${frameSize.height}" viewBox="0 0 ${frameSize.width} ${frameSize.height}" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <rect x="0" y="0" width="${frameSize.width}" height="${frameSize.height}" rx="20" fill="#0A0A0A" stroke="url(#paint0_linear)" stroke-width="6"/>
       <defs>
       <linearGradient id="paint0_linear" x1="${frameSize.width}" y1="0" x2="${frameSize.width}" y2="${frameSize.height}" gradientUnits="userSpaceOnUse">
         <stop stop-color="#D2D2D2"/>
         <stop offset="1" stop-color="#525252"/>
         </linearGradient>
       </defs>
+      <rect x="0" y="0" width="${frameSize.width}" height="${frameSize.height}" rx="20" fill="#0A0A0A" stroke="url(#paint0_linear)" stroke-width="6"/>
     </svg>
     ''';
 

device_preview/pubspec.yaml

@@ -1,5 +1,5 @@
 name: device_preview
-version: 1.0.0-alpha.6
+version: 1.0.0-alpha.7
 description: Approximate how your Flutter app looks and performs on another device.
 homepage: https://github.com/aloisdeniel/flutter_device_preview
 

docs/README.md

@@ -5,8 +5,7 @@
 * 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
+* Plugin system (*Screenshot, custom...* )
 
 # Demo
 

docs/content/plugins/custom.md

@@ -1,45 +1,59 @@
 # Writing your own plugin
 
-Making custom plugins can be really useful to add your own debugging tools.
-
-You can easily add a button to the tool bar that opens a window with your custom content.
+Making custom plugins can be really useful to add your own debugging tools to the device preview menu.
 
 ## Define your plugin
 
+A plugin is nothing more than a regular [Sliver] that is added to the main Device Preview menu.
+
+To make things more aligned with built-in sections, you can add the `ToolPanelSection` widget and the `package:flutter/material.dart` widgets.
+
 ```dart
-import 'package:device_preview/plugins.dart';
+import 'package:device_preview/device_preview.dart';
+import 'package:flutter/material.dart';
 
-class CustomPlugin extends DevicePreviewPlugin {
-  const CustomPlugin() : super(
-          identifier: 'custom', // Unique identifier
-          name: 'Custom', // Window's title
-          icon: Icons.battery_unknown, // Button's icon
-          windowSize: const Size(220, 220), // Window's size
-        );
+class CustomPlugin extends StatelessWidget {
+  const CustomPlugin({
+    Key? key,
+  }) : super(key: key);
 
   @override
-  Widget buildData(
-    BuildContext context,
-    Map<String, dynamic> data, // You plugin preferences (saved with other device preview's preferences)
-    DevicePreviewPluginDataUpdater updateData,  // update your plugin's data and triggers a rebuild.
-  ) {
-    // Build the window's content here.
-    return Center(
-        child: Text('Hello !'), 
+  Widget build(BuildContext context) {
+    return ToolPanelSection(
+      title: 'Screenshot',
+      children: [
+        ListTile(
+          title: const Text('Print in console'),
+          onTap: () {
+            print('Hey, this is a custom plugin!');
+          },
+        )
+      ],
     );
   }
 }
 ```
 
 ## Configure
 
-Add your plugin instance to your `DevicePreview`'s `plugins` property.
+![illustration](images/custom.png ':size=150')
+
+Add your plugin instance to your `DevicePreview`'s `tools` property.
 
 ```dart
 DevicePreview(
     // ...
-    plugins: [
+    tools: [
+        ...DevicePreview.defaultTools,
         const CustomPlugin(),
     ],
 ),
-```
+```
+
+## Observing Device Preview's state
+
+If you need to check the current `DevicePreview` state, you can use one of the available methods :
+
+* `DevicePreview.isEnabled(BuildContext context)` : indicate whether the preview is currently enabled or not
+* `DevicePreview.selectedDevice(BuildContext context)` : get the currently selected device
+* `DevicePreview.locale(BuildContext context)` : get the currently selected locale