Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

device_preview is not working, a blank page is displayed. #231

Open
robinbakkerus opened this issue Aug 9, 2023 · 4 comments
Open

device_preview is not working, a blank page is displayed. #231

robinbakkerus opened this issue Aug 9, 2023 · 4 comments

Comments

@robinbakkerus
Copy link

This very basic implementation only displays a blank page.

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

void main() {
  DevicePreview(
    enabled: true, //kReleaseMode,
    builder: (context) => const MyApp(), // Wrap your app
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        locale: DevicePreview.locale(context),
        builder: DevicePreview.appBuilder,
        home: const Material(
          child: Text('demo'),
        ));
}

flutter doctor =>

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.10.6, on Microsoft Windows [Version 10.0.19045.3208], locale en-NL)
[√] Windows Version (Installed version of Windows is version 10 or higher)
[√] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Build Tools 2019 16.11.15)
[√] Android Studio (version 2021.2)
[√] Connected device (3 available)
[√] Network resources
• No issues found!

flutter --version =>

Flutter 3.10.6 • channel stable • https://github.com/flutter/flutter.git 
Framework • revision f468f3366c (4 weeks ago) • 2023-07-12 15:19:05 -0700
Engine • revision cdbeda788a
Tools • Dart 3.0.6 • DevTools 2.23.1

And I tested this app with the following commands:

flutter clean
flutter build web
flutter run
@udit6023
Copy link

udit6023 commented Aug 10, 2023

Here,you can try these few adjustments in your code.
1)Ensure that the text widget is wrapped in a Center widget so that the "demo" text is centered on the screen.
2)Use the Key parameter for the MyApp constructor instead of super.key. Like( const MyApp({Key? key}) : super(key: key); // Use Key instead of super.key)
3)Or you can try Importing kReleaseMode from flutter/foundation.dart to properly handle enabling DevicePreview only during development.

@robinbakkerus
Copy link
Author

robinbakkerus commented Aug 14, 2023 via email

@robinbakkerus
Copy link
Author

robinbakkerus commented Aug 18, 2023 via email

@udit6023
Copy link

udit6023 commented Aug 18, 2023

@robinbakkerus im glad that you able to figure it out, keep growing and enjoy your ride with flutter ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants