device_preview: View UI on Multiple Devices and Screen Sizes

You’ve just created an amazing new app and you can’t wait to share it with the world. But before you do, you want to make sure that it looks great on all devices. It’s hard to know how your app will look on different devices without testing it out yourself. And who has the time or money to buy every single type of device out there? Device Preview! With this handy tool, you can see how your app will look on different devices without ever having to leave your own.

device_preview is a package that can help you approximate how your Flutter app looks and performs on another device. With this package, you can preview any device from any device, change the device orientation, dynamic system configuration (language, dark mode, text scaling factor, …), a freeform device with adjustable resolution and safe areas, keep the application state, plugin system (Screenshot, File explorer, …), customizable plugins. This package is very useful for those who want to test how their app looks on different devices before release.

Using it is simple:

//add to pubspec.yaml
device_preview: ^1.1.0

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(
      useInheritedMediaQuery: true,
      locale: DevicePreview.locale(context),
      builder: DevicePreview.appBuilder,
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: const HomePage(),
    );
  }
}