aloisdeniel / flutter_device_preview Goto Github PK

It would be great to have these basic debugging toggles available to us. 99% of the time I open dev tools it's to use these buttons, so having them inside Device Preview would be a huge convenience.

Under Ubuntu, I cannot find where the screenshots are saved, or if it's taking it at all. Can someone help me, please?

FAILURE: Build failed with an exception.

-* What went wrong:
Could not determine the dependencies of task ':shared_preferences:compileDebugAidl'.
-> Could not resolve all task dependencies for configuration ':shared_preferences:debugCompileClasspath'.
-> Could not resolve project :shared_preferences_macos.
Required by:
project :shared_preferences
-> Unable to find a matching configuration of project :shared_preferences_macos:
- None of the consumable configurations have attributes.
-> Could not resolve project :shared_preferences_web.
Required by:
project :shared_preferences
-> Unable to find a matching configuration of project :shared_preferences_web:
- None of the consumable configurations have attributes.

this is my pubspec.yaml
`version: 1.0.0+1

environment:
sdk: ">=2.1.0 <3.0.0"

dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
logger: ^0.9.1
http: ^0.12.0+4
json_serializable: ^3.3.0
build_runner: ^1.9.0
bloc_pattern: ^2.5.1
html: ^0.14.0+3
basic_utils: ^2.5.3
isolate: ^2.0.3
rxdart: ^0.24.1
device_preview: ^0.4.5`

The README currently says:

Can I use device preview with Desktop embedding ?
Yes, you just have to add thoses dependencies in your pubspec.yaml :

device_preview:
path_provider_fde:
  git:
    url: https://github.com/google/flutter-desktop-embedding/
    path: plugins/flutter_plugins/path_provider_fde

There are a few problems with this:

• For Windows and Linux, there are manual steps to adding a plugin, so the "just have to add" is not actually correct. (And for macOS, that plugin is no longer the right one, per discussion in #19.)
  • And there actually isn't a Linux implementation of path_provider_fde yet (although there is one under review so hopefully that will change soon).
• The instructions for Windows and Linux are a moving target; any specific instructions you give for using path_provider_fde will likely be wrong soon.
• You are showing unpinned references, which are a very bad idea for FDE; things in that repository are subject to change without warning (example: macOS being removed when it moved to path_provider_macos)

I would recommend changing this section to say that on macOS you need path_provider_macos (per #19, although very soon that won't be needed at all) and for Windows and Linux saying you need path_provider_fde and pointing here instead of providing instructions. The README there has information about supported platforms, and links to detailed instructions on using plugins on those platforms, both of which I maintain as things change.

Hi!

I've been using device_preview for a long time and was happy to see new update.

I'd like to share some feedback to recent layout changes. The package looks sleek but unfortunately it lost some of its previous usability.

For instance right now the toolbar is located at the bottom.

For me it'a bit inconvenient as usually I run device_preview on a computer and have spare space on the sides not on bottom or top of the screen. I would love to be able to have toolbar on the left or right.

Having the menu on the side would allow to add the labels describing each tool. Right now the icons are not always self-explanatory. Also, they are very very small on my screen.

Another small issue is that some of the tools lost their wide range of configuration options e.g. the text scale factor. Right now there are only 3 options with very little explanation. It used to have a slider to test various text scale factors from 0.5 up to 3.0. In my opinion it was much more useful than current design.

Also the menu (as it's in the middle of the toolbar) obscures the device preview.

I don't want to complain as the device_preview is one of the most useful dev tools out there. It helped me in many projects and I always recommend to use it. Thanks @aloisdeniel for your fantastic work. Let me know if there's something that I could help with.

In our project we switched to use the latest version of freezed package with freezed_annotation: ^0.11.0. However since device preview depends on a different version freezed_annotation ^0.7.1 and these packages are not compatible. Would be great if this could be updated to avoid clashes. Also in the scoring section of the flutter_device_preview package it is suggested to upgrade or fix this miss match. Following is the error I see in my log when trying to install this package.

Because device_preview >=0.4.0 depends on freezed_annotation ^0.7.1 and mypackage  depends on freezed_annotation ^0.11.0, device_preview >=0.4.0 is forbidden.
So, because mypackage depends on device_preview 0.4.0, version solving failed.
pub get failed (1; So, because mypackage depends on device_preview 0.4.0, version solving failed.)

Great package, I find it really helpful.

Is there a way to disable the settings icon and just render the app in a device frame?

Thanks!

Ideally, a custom WidgetsBinding should be provided to emulate the host.

This would allow to emulate more things :

• Application lifecycle events
• Memory pressure event
• Platform channels
• A mouse pointer

The DevicePreview.appBuilder (injects a custom MediaQuery) and DevicePreview.of(context).locale parameters wouldn't be needed anymore too since they would be managed by the binding itself.

The issue is that the WidgetBindings.instance is unique and static, so it is not possible to override it only from the encapsulated user app.

Is there a way to use multiple builders in the MaterialApp widget? If i use this package i have to write this code:
builder: DevicePreview.appBuilder

Is there a way to use another package with this package that also requires a builder?
For example auto_route:
builder: ExtendedNavigator(router: Router())

Ditto for 'Android Small Tablet'.

To reproduce this, I put debug break points on my ScreenTypeLayout widget, one on both portrait and landscape in 'mobile' and one on both portrait and landscape on 'tablet'.

The attached 'Screenshot' image shows that on my Android test device, I have selected 'iPad Pro'.

The attached 'debug' image shows that the code stopped at the 'portrait' breakpoint in 'mobile'. Since the iPad is a tablet, I had expected the breakpoint to stop at 'portrait' in 'tablet'.

Same is happening in 'Android Small Tablet'.

Please let me know if, instead of an issue with Device_Preview, I am doing something wrong.

The enabled property is true by default and the developer can forget to set it to false is release mode.

What I propose to fix this is to:

1. use Flutter kReleaseMode constant as the default value of this param.

Now:

DevicePreview(
  enabled: !kReleaseMode, // Ensures that it is disabled in release mode
  builder: (context) => MyApp(),
)

After this changes:

DevicePreview(
  builder: (context) => MyApp(),
)

2. Annotate the enabled as a required param so the user don't forget to specify its value!

I can work on that if you want to.

Hi!

I want to take a screenshot of the device without the shadow present so I can more easily create app store feature images.

Currently even if I add a transparent background, once it's on file.io, it has the same subtle gradient background:

DevicePreview(
  style: DevicePreviewStyle.light().copyWith(
    background: BoxDecoration(color: Colors.transparent),
  ),
  enabled: kIsTakingScreenshots,
  builder: (context) => App(prefs),
),

I then have to go into photoshop or similar and then remove the background manually. Would just help if it came out fully transparent png.

Thanks for your work on this package

My app uses media query to automatically adjust UI for the screen sizes. While using this library, the app seems to get media query of the device the preview is running on.
Is there a way to fix it?

If I try to change the device, I get a No MaterialLocalizations found. exception.

Am I missing something obvious here?

Here is the exception detail:

══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following assertion was thrown building TextField(controller:
TextEditingController#f59ce(TextEditingValue(text: ┤├, selection: TextSelection(baseOffset: -1,
extentOffset: -1, affinity: TextAffinity.downstream, isDirectional: false), composing:
TextRange(start: -1, end: -1))), decoration: InputDecoration(hintText: "Search by device name...",
floatingLabelBehavior: FloatingLabelBehavior.auto, contentPadding: EdgeInsets(10.0, 0.0, 10.0, 0.0),
prefixIcon: Icon(IconData(U+0F002), size: 12.0), suffix: InkWell, filled: true, fillColor:
Color(0x1ffefefe), border: OutlineInputBorder()), style: TextStyle(inherit: true, color:
Color(0xfffefefe), size: 12.0), dirty, dependencies: [MediaQuery], state: _TextFieldState#a3523):
No MaterialLocalizations found.
TextField widgets require MaterialLocalizations to be provided by a Localizations widget ancestor.
The material library uses Localizations to generate messages, labels, and abbreviations.
To introduce a MaterialLocalizations, either use a MaterialApp at the root of your application to
include them automatically, or add a Localization widget with a MaterialLocalizations delegate.
The specific widget that could not find a MaterialLocalizations ancestor was:
  TextField
The ancestors of this widget were:
  ...
  Padding
  ColoredBox
  ConstrainedBox
  Container
  DefaultTextStyle
  ...
The relevant error-causing widget was:
  DevicePreview 

Here is my app code:

import 'package:flutter/material.dart';
import 'package:device_preview/device_preview.dart';

// void main() => runApp(MyApp());

void main() => runApp(
      DevicePreview(
        enabled: true,
        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: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
            title: Text('Welcome to Flutter'),
            ),
        body: Center(
            child: Text('Hello World'),
            ),
      ),
    );
  }
}

Would be great to be able to pin the left navbar and/or use a media query to keep it open when the screen is appropriately sized. When doing development on a desktop, there's enough horizontal real estate to keep it always available, and it can be a point of friction to continually be opening and closing it during development.

Hey,
Is it possible or will it be possible to run the same app on multiple device simultaneously, for example side-by-side instead of always changing between them?

I made a simple app to tried out this library, I made one screen that changes it's screen color when the device is in landscape mode and back to the normal screen color when the device in landscape mode and it works fine with default emulator. But when I tried it with this library it's not working(it never change color).

Please add DevicePreviewData as an optional constructor parameter to DevicePreview.

Reason:
Multiple DevicePreviews can be used at the same time to demo different features of the same app.
For customized views the menu and the saved preferences are not enough.

Thanks.

HI!

I keep getting this error on iOS and Android:

════════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown while finalizing the widget tree:
Multiple widgets used the same GlobalKey.

The key [GlobalKey#653c9] was used by multiple widgets. The parents of those widgets were:
- Builder-[<'iPhone 5'>]
- Builder-[<'Medium phone'>]
A GlobalKey can only be specified on one widget at a time in the widget tree.
When the exception was thrown, this was the stack
#0      GlobalKey._debugVerifyGlobalKeyReservation.<anonymous closure>.<anonymous closure>.<anonymous closure> 
package:flutter/…/widgets/framework.dart:246
#1      _LinkedHashMapMixin.forEach  (dart:collection-patch/compact_hash.dart:379:8)
#2      GlobalKey._debugVerifyGlobalKeyReservation.<anonymous closure>.<anonymous closure> 
package:flutter/…/widgets/framework.dart:193
#3      _LinkedHashMapMixin.forEach  (dart:collection-patch/compact_hash.dart:379:8)
#4      GlobalKey._debugVerifyGlobalKeyReservation.<anonymous closure> 
package:flutter/…/widgets/framework.dart:189
...
════════════════════════════════════════════════════════════════════════════════

It didn't happen to me immediately but I think it was triggered by me switching phone types. Here's my flutter doctor.

[✓] Flutter (Channel beta, v1.17.0-3.3.pre, on Mac OS X 10.15.4 19E287, locale en-US)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.6)
[✓] Connected device (3 available)

Thank you for an amazing package.

Here is a little bug I'm seeing on a Pixel 2 emulator:

the debug tool from the flutter inspector in Android Studio is somewhat scaled down with device_preview on, any idea why ?

Please find here the device references used for rendering.

To contribute, simply launch the tools' flutter app on your device (both in portrait and landscape and upload the screenshots here. I would appreciate also if you have a photo of the device's body too.

I got device_preview running fine the first time, now I keep getting crashes on launch.

I'm on the latest beta channel. Android. Works fine if I disable devicepreview.

I'm using a MultiProvider,

    ChangeNotifierProvider(create: (context) => Preferences()),
     ChangeNotifierProvider(create: (context) => FirebaseUserProvider()),

I'm using create properly, but I get this crash.

I/FIAM.Headless( 6638): Successfully fetched 0 messages from backend
D/EGL_emulation( 6638): eglMakeCurrent: 0x74c4a04560c0: ver 2 0 (tinfo 0x74c453d4eb40)
I/flutter ( 6638): MAP: null

�[38;5;248m════════ Exception caught by widgets library ═══════════════════════════════════�[39;49m
�[38;5;244mThe following assertion was thrown building AppWidgetLoggedIn(dirty, dependencies: [_DefaultInheritedProviderScope]):�[39;49m
The default constructor of ListenableProvider/ChangeNotifierProvider
must create a new, unused Listenable.

If you want to reuse an existing Listenable, use the second constructor:

• DO use ChangeNotifierProvider.value to provider an existing ChangeNotifier:

MyChangeNotifier variable;
ChangeNotifierProvider.value(
value: variable,
child: ...
)

• DON'T reuse an existing ChangeNotifier using the default constructor.

MyChangeNotifier variable;
ChangeNotifierProvider(
create: (_) => variable,
child: ...
)
'package:provider/src/listenable_provider.dart':
Failed assertion: line 41 pos 28: '!value.hasListeners'

�[38;5;244mThe relevant error-causing widget was�[39;49m
�[38;5;248mAppWidgetLoggedIn�[39;49m
�[38;5;244mWhen the exception was thrown, this was the stack�[39;49m
�[38;5;248m#2 new ListenableProvider.�[39;49m
�[38;5;248m#3 _CreateInheritedProviderState.value.�[39;49m
�[38;5;248m#4 _CreateInheritedProviderState.value�[39;49m
�[38;5;248m#5 _InheritedProviderScopeMixin.value�[39;49m
�[38;5;248m#6 Provider.of�[39;49m
�[38;5;244m...�[39;49m
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

Using DevicePreview to run on chrome shows the following error, no device frame is shown:

══════╡ EXCEPTION CAUGHT BY RENDERING LIBRARY
The following UnimplementedError was thrown during paint():
UnimplementedError
The relevant error-causing widget was:
CustomPaint

When the exception was thrown, this was the stack:
dart-sdk/lib/internal/js_dev_runtime/private/ddc_runtime/errors.dart 216:49 throw
lib/ui/src/ui/path.dart 281:5 combine
packages/device_preview/src/frames/mobile_device_frame.dart 212:14 paint
packages/flutter/src/rendering/custom_paint.dart 531:12 [_paintWithPainter]
packages/flutter/src/rendering/custom_paint.dart 572:7 paint
packages/flutter/src/rendering/object.dart 2264:7 [_paintWithContext]
packages/flutter/src/rendering/object.dart 184:12 paintChild
packages/flutter/src/rendering/proxy_box.dart 129:14 paint
packages/flutter/src/rendering/object.dart 2264:7 [_paintWithContext]
packages/flutter/src/rendering/object.dart 184:12 paintChild
packages/flutter/src/rendering/box.dart 2515:14 defaultPaint
packages/flutter/src/rendering/stack.dart 602:5 paintStack
packages/flutter/src/rendering/stack.dart 610:7 paint
packages/flutter/src/rendering/object.dart 2264:7 [_paintWithContext]
packages/flutter/src/rendering/object.dart 184:12 paintChild
packages/flutter/src/rendering/shifted_box.dart 70:14 paint
packages/flutter/src/rendering/object.dart 2264:7 [_paintWithContext]
packages/flutter/src/rendering/object.dart 184:12 paintChild
packages/flutter/src/rendering/proxy_box.dart 129:14 paint
packages/flutter/src/rendering/object.dart 2264:7 [_paintWithContext]
packages/flutter/src/rendering/object.dart 135:10 _repaintCompositedChild
packages/flutter/src/rendering/object.dart 95:5 repaintCompositedChild
packages/flutter/src/rendering/object.dart 201:7 [_compositeChild]
packages/flutter/src/rendering/object.dart 182:7 paintChild
packages/flutter/src/rendering/proxy_box.dart 129:14 paint
packages/flutter/src/rendering/object.dart 391:12 pushLayer
packages/flutter/src/rendering/object.dart 572:7 pushTransform
packages/flutter/src/rendering/proxy_box.dart 2389:21 [_paintChildWithTransform]
packages/flutter/src/rendering/proxy_box.dart 2406:17 paint
packages/flutter/src/rendering/object.dart 2264:7 [_paintWithContext]
packages/flutter/src/rendering/object.dart 184:12 paintChild
packages/flutter/src/rendering/proxy_box.dart 129:14 paint
packages/flutter/src/rendering/proxy_box.dart 2040:11 paint
packages/flutter/src/rendering/object.dart 2264:7 [_paintWithContext]
packages/flutter/src/rendering/object.dart 184:12 paintChild
packages/flutter/src/rendering/box.dart 2515:14 defaultPaint
packages/flutter/src/rendering/flex.dart 950:7 paint
packages/flutter/src/rendering/object.dart 2264:7 [_paintWithContext]
packages/flutter/src/rendering/object.dart 184:12 paintChild
packages/flutter/src/widgets/overlay.dart 737:14 paintStack
packages/flutter/src/widgets/overlay.dart 747:7 paint
packages/flutter/src/rendering/object.dart 2264:7 [_paintWithContext]
packages/flutter/src/rendering/object.dart 184:12 paintChild
packages/flutter/src/rendering/view.dart 213:14 paint
packages/flutter/src/rendering/object.dart 2264:7 [_paintWithContext]
packages/flutter/src/rendering/object.dart 135:10 _repaintCompositedChild
packages/flutter/src/rendering/object.dart 95:5 repaintCompositedChild
packages/flutter/src/rendering/object.dart 980:29 flushPaint
packages/flutter/src/rendering/binding.dart 404:19 drawFrame
packages/flutter/src/widgets/binding.dart 865:13 drawFrame
packages/flutter/src/rendering/binding.dart 284:5 [_handlePersistentFrameCallback]
packages/flutter/src/scheduler/binding.dart 1074:15 [_invokeFrameCallback]
packages/flutter/src/scheduler/binding.dart 1013:9 handleDrawFrame
packages/flutter/src/scheduler/binding.dart 822:7
dart-sdk/lib/_internal/js_dev_runtime/private/isolate_helper.dart 50:19 internalCallback
The following RenderObject was being processed when the exception was fired: RenderCustomPaint#b1dd0:
creator: CustomPaint ← IgnorePointer ← Positioned ← Stack ← Padding ← MobileDeviceFrame ←
RepaintBoundary-[GlobalKey#69b08] ← Builder-[<'iPhone 5'>] ← FittedBox ← DecoratedBox ←
Expanded-[<'Preview'>] ← Flex ← ⋯
parentData: (can use size)
constraints: BoxConstraints(w=356.0, h=760.0)
size: Size(356.0, 760.0)
This RenderObject has no descendants.
═══════════
Another exception was thrown: UnimplementedError

════════ Exception caught by rendering library
The following UnimplementedError was thrown during paint():
UnimplementedError

The relevant error-causing widget was
DevicePreview
When the exception was thrown, this was the stack
dart-sdk/lib/internal/js_dev_runtime/private/ddc_runtime/errors.dart 216:49 throw
lib/ui/src/ui/path.dart 281:5 combine
packages/device_preview/src/frames/mobile_device_frame.dart 212:14 paint
packages/flutter/src/rendering/custom_paint.dart 531:12 [_paintWithPainter]
packages/flutter/src/rendering/custom_paint.dart 572:7 paint
...
The following RenderObject was being processed when the exception was fired: RenderCustomPaint#b1dd0
RenderObject: RenderCustomPaint#b1dd0
parentData: (can use size)
constraints: BoxConstraints(w=356.0, h=760.0)
size: Size(356.0, 760.0)
═══════════

════════ Exception caught by rendering library
UnimplementedError
The relevant error-causing widget was
DevicePreview
═══════════

Unable see the device options even using for the general demo app.

No Material Localization error in the list of devices and local menu.

Following is the code I am testing device_preview 0.4.7 with.

import 'package:device_preview/device_preview.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(DevicePreview(builder: (context) => MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      locale: DevicePreview.of(context).locale, // <--- Add the locale
      builder: DevicePreview.appBuilder,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Following is my fluter doctor summary

[√] Flutter (Channel master, 1.20.0-8.0.pre.41, on Microsoft Windows [Version 10.0.18363.900], locale en-US)
    • Flutter version 1.20.0-8.0.pre.41 at C:\Abhilash\Installs\flutter
    • Framework revision fd80503fd3 (10 hours ago), 2020-07-10 14:41:02 +0530
    • Engine revision 9b3e3410f0
    • Dart version 2.9.0 (build 2.9.0-21.0.dev 06cb010247)

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.0)
    • Android SDK at C:\Users\abhil\AppData\Local\Android\sdk
    • Platform android-29, build-tools 29.0.0
    • Java binary at: C:\Abhilash\Installs\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.5.4)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.5.30011.22
    • Windows 10 SDK version 10.0.17763.0

[√] Android Studio (version 4.0)
    • Android Studio at C:\Abhilash\Installs\Android\Android Studio
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] Connected device (6 available)
    • 010229610904 (mobile) • 010229610904       • android-arm    • Android null (API null)
    • Mi A1 (mobile)        • 192.168.0.102:5555 • android-arm64  • Android 9 (API 28)
    • Windows (desktop)     • windows            • windows-x64    • Microsoft Windows [Version 10.0.18363.900]
    • Web Server (web)      • web-server         • web-javascript • Flutter Tools
    • Chrome (web)          • chrome             • web-javascript • Google Chrome 83.0.4103.116
    • Edge (web)            • edge               • web-javascript • Microsoft Edge 83.0.478.61

• No issues found!

Every time I tap on a textfield, the actual emulator's keyboard pops up then disappears and the textfield is not given focus.

I unfortunately cannot use this package unless I am able to interact with TextFields

I expected darkTheme to be used when I toggle dark mode. It doesn't seem to do anything.

    MaterialApp(
       theme: ThemeData.light(),
       darkTheme: ThemeData.dark(),
      ...
    )

Hello,

I have built a package and one of the first feedbacks from a lot of people has been to make my app web preview a package: https://jamesblasco.github.io/modal_bottom_sheet/#/.

I think your package is awesome and you have been doing a great job, that is why I think this would great to add on.

A new widget that only would contain the device frame and the custom values are provided as params.

Let me know what you think about it. I can help to build it

Currently the prefs are stored in getApplicationDocumentsDirectory(); by my understanding of the API that is for files intended to be user-visible, and accordingly it's implemented on desktop using the user's documents directory (e.g., ~/Documents on macOS). Having an app store its preferences file in ~/Documents/device_preview.config would be very unexpected on macOS, and I would expect similarly for any other desktop platform.

getApplicationSupportDirectory(), by contrast, is "for files you don’t want exposed to the user", so that's where I would expect a file like this to be stored. In the desktop implementations, those would end up in folders that the user is unlikely to interact with in normal use of their machine.

Potentially this is unavoidable but it seems that any widgets that consume MediaQuery.size are rendered incorrectly on Device Preview. It looks like it returns the actual device size as opposed to the virtual device size.

As a follow up to the #33 there are still two more debug prints:

• flutter_device_preview/device_preview/lib/src/storage.dart

  Line 83 in 5127be6

  print('SAVED2');

  (non intrusive, haven't seen it)

• flutter_device_preview/device_preview/lib/src/storage.dart

  Line 93 in 5127be6

  print('MAP: $json');

  (pops on each app launch)

One thing that really is effected by the hardware screen size is localisation.
Like German wors are really long and screw up your menu or app bar etc.

So if you can add the ability to change the locale from the black menu it would be super useful for helping with localisation of app is think.

Hey guys, I love this plugin! Thank you so much. Here's the issue I found.

When I want to show dialog, the dialog widget does not respect the virtual phone boundaries. The behavior I want dialog to stay within the phone.

Hi,

Thanks for this useful library. I may be missing something obvious, but can't find it on pub. I noticed #4 fixed pub warnings, but I'm confused as to the relevance if it's not on pub. Can you point me in the right direction?

Thanks

Hey,

Would be really helpful if the Screenshots of iOS Devices would match the AppStore Screenshot Guidlines.

I/flutter ( 7413): STYLE!
I/flutter ( 7413): STYLE!!!
I/flutter ( 7413): MAP: null
I/flutter ( 7413): STYLE!!!!

flutter_device_preview spams the console with non-helpful debug output.

The macOS project format is now considered stable (i.e., not subject to random unannounced breaking changes), so you could add a macOS folder (and add a path_provider_macos dependency temporarily ,to address #19) and then this would work out of the box on macOS.

Here is my config:
class MyApp extends StatelessWidget {
// This widget is the root of your application.

@OverRide
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (context) => UserData(),
child: MaterialApp(
locale: DevicePreview.of(context).locale, // <--- Add the locale
builder: DevicePreview.appBuilder, // <--- Add the builder
debugShowCheckedModeBanner: false,
title: 'Mebrat Tefa',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Builder(builder: (BuildContext context) {
return _DisplayScreen();
}),
),
);
}
}

Device Preview is not working as expected with MediaQuery not only that it does not exist in the docs so u will waste to much time until you find that the problem is not my code. so, it would be very great if you add this feature but at least for now please add this int the docs as a limitation.

Example:
A real device => with 480, height 1080.
Device preview small device => width 350, height 740

Expected: MediaQuery return width 350, height 740

Found: with 480, height 1080.

Here is an example:

Clicking on the actions only show when i make it almost the fill width of the screen. But it does not go off the parent size only the mediaquery device size.

On a new project, the default language is set to Afrikaans, on my machine at least. (It's defaulting to the top item in the ListView.) At the risk of parochialism, it might make more sense to set this to EN-US, since that's the default language of newly created projects.

First of all this library is amazing, well done!

It's just a convenience thing, but it would be nice if we could select locales only from the list of supported locales.

In my app using Device Preview breaks hero animations.

Device Preview off

Device Preview on

Because device_preview >=0.4.0 depends on font_awesome_flutter ^8.8.1 which doesn't match any versions, device_preview >=0.4.0 is forbidden.

So, because demo depends on device_preview ^0.4.4, version solving failed.

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.9, on Mac OS X 10.15.4 19E266,
    locale en-GB)
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ✗ Android license status unknown.
      Try re-installing or updating your Android SDK Manager.
      See https://developer.android.com/studio/#downloads or visit
      https://flutter.dev/setup/#android-setup for detailed instructions.
[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
[✓] Android Studio (version 3.6)
[✓] VS Code (version 1.44.1)
[✓] Connected device (3 available)

Is there a way to tell we are currently in preview mode? something like kPreviewMode.

The device frame disappears in Flutter for web.

When I do hot reload , it navigates to homepage. This problem does not exist in android emulator installed from android studio.

device preview cannot be found after running flutter pub get.
has confirmed dart package installed.
error: Target of URI doesn't exist: 'package:device_preview/device_preview.dart'. (uri_does_not_exist at [ulu_platform_demo] lib/main.dart:34)

pubspec.yml:

name: ulu_platform_demo
description: where beautiful thing happens.

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.6.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

  http: ^0.12.1
  dots_indicator: ^1.1.0
  #url_launcher: ^5.4.5
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  webview_flutter: ^0.3.22+1
  flutter_html: ^1.0.0
  json_annotation: ^3.0.1
  rxdart: ^0.24.1
  sqflite: ^1.3.0
  url_launcher: ^5.4.10
  youtube_player_flutter: ^7.0.0+3
  google_sign_in: ^4.5.1
  sign_in_with_apple: ^2.5.1
  flutter_facebook_login: ^3.0.0
  country_code_picker: ^1.4.0
  cached_network_image: ^2.2.0+1
  image_picker: ^0.6.7+4
  color_dart: ^0.1.0
  fluttertoast: ^7.0.1
  image_crop: ^0.3.2
  path_provider: ^1.4.0
  sentry: ">=3.0.0 <4.0.0"
  provider: ^4.3.1
  device_preview: ^0.4.7


dev_dependencies:
  flutter_test:
    sdk: flutter
  build_runner: ^1.8.1
  json_serializable: ^3.3.0


# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages
  assets:
    - assets/
    - assets/icons/
    - locale/

flutter doctor -v output

[✓] Flutter (Channel stable, v1.17.5, on Mac OS X 10.15.4 19E287, locale zh-Hans-CN)
    • Flutter version 1.17.5 at /Users/wangshuzhu/flutter
    • Framework revision 8af6b2f038 (6 weeks ago), 2020-06-30 12:53:55 -0700
    • Engine revision ee76268252
    • Dart version 2.8.4

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
    • Android SDK at /Users/wangshuzhu/Library/Android/sdk
    • Platform android-30, build-tools 30.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.6, Build version 11E708
    • CocoaPods version 1.8.4

[✓] Android Studio (version 3.6)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 45.1.1
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)

[✓] VS Code (version 1.47.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.13.2

The getApplicationDocumentsDirectory method is not available for macOS. Part of the shift is that the macOS implementation of path_provider is now in the main package, rather than the FDE implementation. But even after removing the extra fde dependency, you still get an error:

[ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: 
MissingPluginException(No implementation found for method 
getApplicationDocumentsDirectory on channel plugins.flutter.io/path_provider)

Either this method needs implementing for macOS in path_provider, and/or flutter_device_preview needs to be more resilient to this missing method.