device_simulator 0.9.6

  • Readme
  • Changelog
  • Example
  • Installing
  • 94

DeviceSimulator #

DeviceSimulator allows you to easily test your Flutter app for different screen resolutions and platforms. If you use this package, please consider downloading the Newsvoice app and giving us a five star review. Thanks!

Device Simulator demo

With DeviceSimulator you will be able to get a quick look at what your app would look like on all iOS / iPadOS devices and a selection of common Android devices. In addition, there is a screenshot mode that makes it really easy to take screens in different resolutions for App Store and Google Play.

Getting Started #

This project was born out of the frustration of testing apps on multiple devices to make sure that the layout looked good in all resolutions. DeviceSimulator will let you quickly emulate different device types. It works best if you run it on an iPad Pro, but it also works well on the iOS Simulator and smaller tablets.

To learn more about designing for multiple resolutions, check out the Medium article that I wrote on the topic.

Add DeviceSimulator to your widget tree #

It's really easy to add DeviceSimulator to your app. Simply add it to the root of your widget tree, right under your App widget. Build the rest of the widget tree as you would normally do. This is a minimal example:

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

const bool debugEnableDeviceSimulator = true;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DeviceSimulator demo',
      home: DeviceSimulator(
        brightness: Brightness.dark,
        enable: debugEnableDeviceSimulator,
        child: Scaffold(
          appBar: AppBar(
            title: Text('DeviceSimulator Demo'),
          ),
          body: Center(
            child: Text('Hello multiple resolutions!'),
          ),
        ),
      ),
    );
  }
}

Known issues & limitations #

  • Hero animations may be broken while having the DeviceSimulator enabled. It will not affect the production ready app.
  • It's currently only possible to use the home route of MaterialApp. To get around this limitation, you can place another Navigator as a child to MaterialApp.

Caveats #

I built DeviceSimulator for my own needs and it's working great for me, but it's not heavily tested and provided as is. Feedback and pull requests are most welcome.

Enjoy! / Vik

[0.9.1] - 2019-10-27 - Initial release. #

  • Initial working version of DeviceSimulator

[0.9.5] - 2019-10-27 - Docs. #

  • Improved documentation

[0.9.6] - 2020-02-23 - Support for routes #

  • Breaking change. This update includes automatic support for routes. There is no longer a need to include DeviceSimulator when pushing a route.

example/lib/main.dart

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

// It's good practice to define a constant for enabling the device simulator
// so you can easily turn it on or off
const bool debugEnableDeviceSimulator = true;

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

// Insert Device simulator at the top of your widget, as a child of your
// App widget. Build the rest of your widget tree as you would normally do.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DeviceSimulator demo',
      home: DeviceSimulator(
        brightness: Brightness.dark,
        enable: debugEnableDeviceSimulator,
        child: Scaffold(
          appBar: AppBar(
            title: Text('DeviceSimulator Demo'),
          ),
          body: Center(
            child: Text('Hello multiple resolutions!'),
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  device_simulator: ^0.9.6

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_simulator/device_simulator.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
89
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
94
Learn more about scoring.

We analyzed this package on Apr 7, 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

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.3.0 <3.0.0
custom_navigator ^0.3.0 0.3.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test