Device Preview to Approximate how your Flutter App looks and performs on another device

Introduction to Previewing

Readers utilize previewing as a tool to recollect prior knowledge and set a reading goal. It instructs readers to skim a text before reading it in detail, looking for features and information that will aid them when they return to read it in depth later.

Previewing is a basic yet effective reading approach that entails scanning the required material before diving in. By giving your reading a purpose and meaning, the method helps you engage with what you’re reading. It also increases comprehension by assisting you in activating your knowledge foundation.

Although, previewing is a reading strategy same can be applied for almost everything. Same as in flutter previewing the app alongst editing it is very important. This is where Flutter Device Preview comes in.

Approximate how your app looks and performs on another device.

Main features

• Preview any device from any device
• Change the device orientation
• 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

Quickstart

Wrap your app’s root widget in a DevicePreview and inject the dedicated builder and locale into your app.

Make sure to provide locale and builder to your WidgetsApp. If not defined, MediaQuery won’t be simulated for the selected device and selected locale won’t be applied.

import 'package:device_preview/device_preview.dart';

void main() => runApp(
  DevicePreview(
    enabled: !kReleaseMode,
    builder: (context) => MyApp(), // Wrap your app
  ),
);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      locale: DevicePreview.locale(context), // Add the locale here
      builder: DevicePreview.appBuilder, // Add the builder here
      home: HomePage(),
    );
  }
}

Example Code

• main.dart

import 'dart:io';

import 'package:device_preview/device_preview.dart';
import 'package:device_preview/plugins.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';
import 'package:path/path.dart' as path;

import 'basic.dart';

void main() {
  debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;

  WidgetsFlutterBinding.ensureInitialized();

  _createFakeData();

  runApp(Row(
    textDirection: TextDirection.ltr,
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      /*Expanded(
        child: Container(color: Colors.red),
      ),*/
      Expanded(
        child: DevicePreview(
          enabled: true,
          plugins: [
            const ScreenshotPlugin(),
            const FileExplorerPlugin(),
            const SharedPreferencesExplorerPlugin(),
          ],
          builder: (context) => BasicApp(),
        ),
      ),
    ],
  ));
}

Future<void> _createFakeData() async {
  final directory = (await getApplicationDocumentsDirectory()).path;

  final file1 = File(path.join(directory, 'example.json'));
  await file1.writeAsString('{ "example": true}');

  final directoryWithFile = Directory(path.join(directory, 'subdir'));
  await directoryWithFile.create();

  final emptyDirectory = Directory(path.join(directory, 'emptyDir'));
  await emptyDirectory.create();

  final file2 = File(path.join(directoryWithFile.path, 'example2.json'));
  await file2.writeAsString('{ "example2": true}');

  final file3 = File(path.join(directoryWithFile.path, 'example2.bin'));
  await file3.writeAsString('kjh8bhb');
}

• basic.dart

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

class BasicApp extends StatelessWidget {
  const BasicApp({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: DevicePreview.appBuilder,
      locale: DevicePreview.locale(context),
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  const Home({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Basic'),
      ),
      body: ListView(
        children: [
          ...Iterable.generate(
            100,
            (i) => ListTile(
              title: Text('Tile $i'),
              onTap: () {},
            ),
          )
        ],
      ),
    );
  }
}

Documentation

Open the website

Demo

Open the demo

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.

GitHub

Source Code: Device Preview to Approximate how your Flutter App looks and performs on another device.