Check App on Different Screen Sizes and Orientations
Tags: flutter
Published: 2021-08-16 12:53:31

---
title: Check App on Different Screen Sizes and Orientations
published: true
date: 2021-04-30 22:30:00 UTC
tags: flutter
canonical_url: https://mukhtharcm.com/check-app-on-different-screen-sizes-and-orientations/
---

You have successfully created a mobile app. And now you have to see how it may work on another device with different screen size. Grab your friend’s phone and Install the App on it. Right?

The [flutter package ecosystem](https://pub.dev) has an amazing package named `device_preview`which can help you with that. It allows us to view our App on Different form factors (phone, laptop, tablet, desktop) and different Operating Systems.

![App running with Device Preview](https://mukhtharcm.com/check-app-on-different-screen-sizes-and-orientations/device_preview_hu88a4be017f4f141e6f280c78d631a896_32498_800x0_resize_box_2.png) <figcaption>
<p>App running with Device Preview</p>
</figcaption>

### Adding packages

For this tutorial, we just have to import the [device\_preview](https://pub.dev/packages/device_preview)to our pubspec.yaml file.

```
dependencies:
flutter:
sdk: flutter
device_preview: ^0.7.1

```

### Setup

Next, we have to import the package to our main.dart file

```
import 'package:device_preview/device_preview.dart';

```

Next, we have to wrap our root widget in DevicePreview. ie, we have to put DevicePreview inside runApp and provide our Root widget at the builder parameter of it.

```
void main() {
runApp(
DevicePreview(
builder: (context) => MyApp(),
),
);
}

```

Next, we have to change the locale and builder parameter of MaterialApp to one provided with DevicePreview.

```
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
locale: DevicePreview.locale(context),// Add locale
 builder: DevicePreview.appBuilder, // Add builder
 title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}

```

If we run the app now, we can see the DevicePreview package in its glory.

![Device Preview Showing app running on a MacBook](https://mukhtharcm.com/check-app-on-different-screen-sizes-and-orientations/device_preview_macbook_huf33aba6499f370a5ff0a0b0ea093749c_36962_800x0_resize_box_2.png) <figcaption>
<p>Device Preview Showing app running on a MacBook</p>
</figcaption>

The bottom bar provided with the package has a couple of options. The first toggle allows us to completely turn off the Device Preview.

The second option is to change the Device. Here we have the option to choose between multiple iPhones, Android Devices, an iMac Pro as well as MacBook and Linux, and windows systems. We also have an option to select a free-form Device.

The third one is locale. If we change the locales here, the app will change it as it was changed on the real Device.

And the next is Orientation. With this option, we can see how our App will look in Another Orientation, ie, landscape.

![The Device Preview showing an iPad in Landscape Mode](https://mukhtharcm.com/check-app-on-different-screen-sizes-and-orientations/device_preview_ipad_landscape_hu8fa5fa16ed0ec243c8cfbe456dd24f96_41843_800x0_resize_box_2.png) <figcaption>
<p>The Device Preview showing an iPad in Landscape Mode</p>
</figcaption>

And then there is an option to Hide device frames, show Keyboard, etc. I think they’re self-explanatory.

The Next option is to change the Device Theme. Toggling it will simulate the Same effect on a Real Device.

### Plugins

The Device preview package has a real nice Plugin System. It has a Screenshot Plugin, File Explorer plugin, SharedPreferences Viewer, etc. And there is an option to build your own. You can find How to do that [here](https://aloisdeniel.github.io/flutter_device_preview/#/content/plugins/custom).

For Adding Plugins, we have to add the plugins array of Device Preview.

```
void main() {
runApp(
DevicePreview(
plugins: [
ScreenshotPlugin(),
],
builder: (context) => MyApp(),
enabled: !kReleaseMode,
),
);
}

```

The above code will add Screenshot functionality to our App. If we click on the Screenshot button provided now on the bottom bar, A screenshot will be taken and we’ll be given a URL to view it.

With all these, we can test how may our App look on Different Devices

Hope you found something useful here.

I’m always open to suggestions!

Let me know your suggestions and opinions in [Twitter](https://twitter.com/mukhtharcm) DM or drop a mail a [mukhtharcm@gmail.com](mailto:mukhtharcm@gmail.com).

If you’re feeling too generous, you can support me through [Buy Me a Coffee](https://buymeacoffee.com/mukhtharcm).

Finally, if you found this helpful, please share this within your reach so that more people can benefit from this. And Follow me on [Twitter](https://twitter.com/mukhtharcm) for getting more posts like these 😉.