device_preview 0.4.4

  • Readme
  • Changelog
  • Example
  • Installing
  • 97

Device Preview for Flutter

Approximate how your app looks and performs on another device.

Device Preview for Flutter

Features #

  • Preview any device from any device
  • Change device orientation
  • Dynamic system configuration: language, dark mode, text scaling factor
  • Freeform device with adjustable resolution and safe areas
  • Keep the application state
  • Take screenshots

Quickstart #

void main() => runApp(
  DevicePreview(
    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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

Customization #

enabled #

This property can be used to disable the preview.

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

usePreferences #

Indicates whether the configuration should be persisted between sessions.

Example
DevicePreview(
  usePreferences: false,
  builder: (context) => MyApp(),
)

areSettingsEnabled #

Indicates whether the settings menu should be available.

Example
DevicePreview(
  areSettingsEnabled: false,
  builder: (context) => MyApp(),
)

background #

The decoration used as the preview window background.

Example
DevicePreview(
  background: BoxDecoration(color: Colors.red),
  builder: (context) => MyApp(),
)

toolBarStyle #

The style of the bottom toolbar.


DevicePreview(
  toolBarStyle: DevicePreviewToolBarStyle.light(),
  builder: (context) => MyApp(),
)

onScreenshot #

The processor used when the user takes a new screenshots.

By default, all screenshots are uploaded to file.io and the links are printed into the debugging console.

Example
DevicePreview(
  onScreenshot: (screenshot) {
    final bytes = screenshot.bytes;
    //  Send the bytes to a drive, to the file system, to 
    // the device gallery for example. It may be useful for
    // preparing your app release for example.
  },
  builder: (context) => MyApp(),
)

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.

FAQ #

What devices can I use for previewing?

If you are running the stable, beta or dev channel of Flutter, you can use Android or iOS. If you are running the master channel of Flutter, you can use macOS, Android or iOS.

What about Windows?

Since Flutter is still in technical preview on Windows, the path_provider dependency can be satisfied by adding this dependency in your pubspec.yaml if you are on the master channel of Flutter:

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

This is a temporary solution only. More information about this plug-in can be found here.

Ideas and roadmap #

  • Status bar
  • Override WidgetsBinding
    • Simulate physical button
    • Simulate lifecycle events
  • Favorite devices
  • More device filters : device type, search by name.
  • Storage explorer
  • Add custom predefineded devices
  • Desktop devices
  • TV devices
  • Complete documentation

0.4.4 #

  • Removed debug logs.

0.4.3 #

  • Added settings window for customizing preview appearance and layout.

0.4.2 #

  • Added a virtual keyboard.

0.4.1+1 #

  • Fixed an issue with duplicated windows.

0.4.1 #

  • Tool bar is bigger.
  • Windows background is now semi-transparent.
  • Windows can be dragged.

0.4.0+1 #

  • Fixed linter issues.

0.4.0 #

  • Redesigned UI : now a bottom bar.

0.3.0+1 #

  • Removed flutter_svg unused dependency.

0.3.0 #

  • Changed screenshot processor for a more generic solution.

0.2.7 #

  • Update to stable API surface for macOS
  • Fix API deprecations

0.2.6+1 #

  • Updated documentation.

0.2.6 #

  • Removed root navigator to fix dialogs.

0.2.5 #

  • Fix settings still visible when widget.areSettingsEnabled is false.
  • Moved example to package folder.

0.2.4 #

  • Added optional data to override the loaded one.

0.2.3 #

  • Remove hightContrast (not on stable yet).

0.2.2 #

  • Remove desktop dependencies.

0.2.1 #

  • Add throttling for data saving

0.2.0 #

  • Add Android devices
  • Add locale picker
  • Add preferences (dark mode, text scaling factor, ...)
  • Saving configuration between sessions.

0.1.9-beta #

  • Initial version

example/lib/main.dart

import 'package:device_preview/device_preview.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';

void main() {
  debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;

  runApp(DevicePreview(
    builder: (context) => ExampleApp(),
  ));
}

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context, nullOk: true);
    return PlatformApp(
      title: 'Flutter Demo',
      locale: DevicePreview.of(context)?.locale, // <--
      builder: DevicePreview.appBuilder, // <--
      supportedLocales: const [
        Locale('en'),
        Locale('fr', 'FR'),
      ],
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      android: (_) => MaterialAppData(
        theme: ThemeData.light(),
        darkTheme: ThemeData.dark(),
        themeMode: mediaQuery?.platformBrightness == Brightness.dark
            ? ThemeMode.dark
            : ThemeMode.light,
      ),
      ios: (_) => CupertinoAppData(
        theme: CupertinoThemeData(
          brightness: mediaQuery.platformBrightness,
        ),
      ),
      home: HomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final localeCode = Localizations.localeOf(context).toString();
    final dateFormat = DateFormat.yMMMMEEEEd(localeCode);
    return PlatformScaffold(
      appBar: PlatformAppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            PlatformText(
              'Hello, it is ' + dateFormat.format(DateTime.now()),
              style: theme.textTheme.headline,
            ),
            PlatformButton(
              child: PlatformText('Open'),
              onPressed: () {
                showPlatformDialog(
                  context: context,
                  builder: (context) => Container(
                    height: 300,
                    width: 300,
                    padding: const EdgeInsets.all(20),
                    child: PlatformButton(
                      child: PlatformText('Close'),
                      onPressed: () {
                        Navigator.pop(context);
                      },
                    ),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  device_preview: ^0.4.4

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:device_preview/device_preview.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
95
Health:
Code health derived from static analysis. [more]
98
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
97
Learn more about scoring.

We analyzed this package on Apr 9, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Health suggestions

Fix lib/src/device_preview_data.dart. (-1 points)

Analysis of lib/src/device_preview_data.dart reported 2 hints:

line 1 col 8: Unused import: 'dart:convert'.

line 5 col 8: Unused import: 'package:shared_preferences/shared_preferences.dart'.

Fix lib/src/device_preview_data.g.dart. (-1 points)

Analysis of lib/src/device_preview_data.g.dart reported 2 hints:

line 9 col 22: Name non-constant identifiers using lowerCamelCase.

line 28 col 22: Name non-constant identifiers using lowerCamelCase.

Fix lib/src/tool_bar/menus/popover.dart. (-0.50 points)

Analysis of lib/src/tool_bar/menus/popover.dart reported 1 hint:

line 124 col 20: The value of the field '_dragStart' isn't used.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.6.0 <3.0.0
flutter 0.0.0
font_awesome_flutter ^8.8.1 8.8.1
freezed_annotation ^0.7.1 0.7.1
http ^0.12.0 0.12.0+4
json_annotation ^3.0.0 3.0.1
meta ^1.1.8 1.1.8
shared_preferences ^0.5.6+3 0.5.6+3
shared_preferences_macos ^0.0.1+6 0.0.1+6
Transitive dependencies
async 2.4.1
charcode 1.1.3
collection 1.14.11 1.14.12
flutter_web_plugins 0.0.0
http_parser 3.1.4
path 1.6.4
shared_preferences_platform_interface 1.0.3
shared_preferences_web 0.1.2+4
sky_engine 0.0.99
source_span 1.7.0
string_scanner 1.0.5
term_glyph 1.1.0
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
build_runner ^1.8.0
flutter_test
freezed ^0.10.4
json_serializable ^3.2.0
pedantic 1.8.0+1 1.9.0