Preview Flutter Applications on Multiple Devices

Easily preview your Flutter application on multiple different devices and screen sizes. Change themes, test accessibility controls and more.
Device Preview Package:
pub.dev/packages/device_preview
Make a donation to the package creator:
www.buymeacoffee.com/aloisdeniel
Online preview:
flutter-device-preview.fireba...
/ 1250839559933493248

[@aloisdeniel]

Wow, thanks for the kind words and the highlight! I will add desktop preview as well as soon as it lands in stable! Great video work by the way! :) You got a new subscriber obviously.

[@FunwithFlutter]

Thanks :) and thanks to you for the great package.

[@kitompoglavi]

That's what she said?

[@gameplaystrailers7797]

Aloïs Deniel you are awesome

[@bikkikumarsha]

Flutter is a revolution. Thanks for your priceless contribution.

[@1879heikkisorsa]

Thank you both!

[@shwanagha230]

great way to raise donations.... best ever

[@loisienyami5095]

This is so cool! I really have been needing to do this and my issues are that I don't have a Mac, and I don't have many devices on me either. So it will make things so much easier for me

[@FunwithFlutter]

Super! Glad you like it. It makes it very easy to quickly switch between different devices to preview different screen sizes and so. But it can't substitute a real device in every instance. You'll see in the package description they mention some limitations - which will give you a better idea.

[@tristangrobler4950]

Always cool hearing someone in SA doing cool content!

[@FunwithFlutter]

We're taking over

[@Salehalanazi-7]

If anyone is wondering the music in the intro is Roral Ceef - A Snake Walking Great video yo! Brightened my day

[@FunwithFlutter]

Glad it brightened your day! This was the quickest I've ever chosen a song before. Went on epidemic sound. The song was promoted. Played it. Loved it. Five minutes later I put it in the video. Normally I spend an hour trying to decide.

[@nihatcancivi5630]

Nice video , ty.

[@mohsanikram3569]

Level no words for this

[@FunwithFlutter]

Thanks :)

[@admin69234]

really like this feature.

[@eiderarango5863]

Nice video, thanks bro for sharing.

[@alifarhadali5580]

amazing 💙💙

[@krishnakumarramachandran5888]

Thanks for this video, waiting for your upcoming video's brother.

[@FunwithFlutter]

Most welcome

[@blank-vw2sb]

Nice

[@bikkikumarsha]

More short videos about cool packages please.

[@FunwithFlutter]

Coming soon

[@michelgent7419]

Hey, getting the following exception: No MaterialLocalizations found. Does anyone knows how to solve it?

[@AMR-vx6rj]

Thaaaaaaaaaaaaaaank you , i have a small question >> Should i remove or add these properties inside the materialApp ? locale: DevicePreview.of(context).locale, builder: DevicePreview.appBuilder, i don't know the difference between adding or removing them but i see the difference !!

[@kavyapatnaik6975]

6.7.1 has issues with stable version of flutter. But using beta 0.6.2 solved it. Works smoothly on emulator.

[@taeispoop190]

hi! i'm a beginner in flutter, i just want to ask if this is enough to test my app if it works on multiple devices or is it just really a preview, because i can't work with emulators

[@FunwithFlutter]

I just emulates. Physical devices are always best, second best would be an emulator. And this is just a nice to have.

[@HimanshuYT]

❤️💙💙

[@simplastx4821]

cool

[@Ainigma]

Can i preview iPhone without a MacBook with this plugin?

[@MoAdel92]

how to run it after doing this steps

[@mefrochedcosta1428]

As new to Flutter After adding the dependency and installing the packages I'm receiving an error for the import. Target of URI doesn't exist: 'package:device_preview/device_preview.dart'. Try creating the file referenced by the URI, or Try using a URI for a file that does exist.

[@FunwithFlutter]

Are you sure the package was installed. Maybe do a test and see if you can use a different package. Also make sure that there are no weird tabs or spaces in your pubsec.yaml file when including packages. This could cause errors

[@taufiqhasib9720]

how can we calculate RGB(red, blue, green) from a photo image ?

[@FunwithFlutter]

pub.dev/packages/palette_generator

[@motabarjavaid5482]

The preview runs inside of my current emulator. I know its too much but is there a way to emulate it outside of the boundary of my current emulator? Like you've shown in the video

[@FunwithFlutter]

Hmmmm. I might misunderstand your issue. But here's my answer. I *am* running it in an emulator. That's what you want. However I created a *large* emulator. Specifically for this. You can create a custom android emulator in AVD (android virtual device) manager. That said if you're running a Mac I think you can run this as a Mac app, and you can also run this on the web. I'm sure in the future Windows/Linux will also have better support. Which will be dope.

[@motabarjavaid5482]

How big would you recommend?

[@FunwithFlutter]

Depends on your screen size. If your running on a 13 inch laptop, make it 13 inches. And set the resolution to a high resolution, or something like 1920x1080. That is my setting.

[@aloisdeniel]

You can launch it on Desktop from master channel!

[@motabarjavaid5482]

even on linux?

[@yaroslavmakarov2218]

How did you open emulator in the fill screen?

[@FunwithFlutter]

Tablet emulator. Hacky hack attack

[@nabinray3150]

I have added the dependencies and done the else code but now how to launch the emulator? Because when I run the code it tells to connect a device.

[@FunwithFlutter]

Not sure I understand. There shouldn't be an issue if you can run the normal Flutter starter app. Can you provide more info

[@fiqbaha8019]

@@FunwithFlutter Yeah i think their situation is similar to mine. I'm currently using flutter in android studio and can't seem to run the test app. It says that there are no connected devices( The green run button on android studio is grey and not green). So is there a way to get around this or do I have to use visual studio to run the dependency ' device_preview'.

[@nabinray3150]

@@fiqbaha8019 yeah its the same issue of mine.

[@walterbarker2]

I have the same issue in Visual Studio Code - no connected device

[@walterbarker2]

I think I understand the issue now. You have to have at least one Android emulator installed FIRST and then you run this as an emulator within an emulator, is that right?

[@sobanjosodiqsolomon9947]

Nice tutorial 👍...but, i really don't know how to run it on windows after adding to pubspec.yaml and to main.dart file, i'll appreciate any help. Thanks.

[@FunwithFlutter]

Hey, thanks. Just to clarify, in the video I'm running the app on a android emulator with a set size, not on windows

[@rayhanyulanda]

@@FunwithFlutter Should i input the package in "dependencies" not in "dev_dependencies"?

[@Maudrandir]

next video idea: styled_widget package, the author says it is a replacement for Division package, same owner

[@FunwithFlutter]

Get out of my head. I actually considered it for a while. But I've not used it day-to-day yet. Once I've used the package a bit more and given it a proper go, I might just make a video about it. Thanks for the suggestion.

[@khanisrarahmedalihusain]

I am getting error in app level build.gradle file while connecting my project to firebase. I am trying to solve this problem since last week. But I haven't got any solution yet. So if anyone can help me then please help.

[@FunwithFlutter]

Might be better to ask this question on StackOverflow, and maybe provide a little bit more information on the error.

[@maheshjamdade1]

Device preview is the package

[@abhinaychitirala2448]

Hey. Can you walk me throw this. I am not able to understand. Pretty much very new to Flutter.

[@maheshjamdade1]

@@abhinaychitirala2448 its very simple to use follow the documentaton at pub.dev/packages/device_preview Add the package to pubspec.yaml Add a device preview builder to your material app (main.dart) And simply run it, It will start running device in device

[@hardikvansia3293]

I accept I am noob. With the help of this now can we run ios device on Windows ?

[@FunwithFlutter]

Unfortunately not. It's just a skin to make it look like the device. For native functionality always run on the target platform/device.

[@phanirithvij]

0:18 you lied it only took me a few seconds

[@FunwithFlutter]

Hah! Better to underpromise and overdeliver.

[@adriaanstips1407]

Ek is ook Afrikaans 😌😎

[@ravgeetdhillon2990]

This video deserves 100% like-to-dislike ratio.

[@FunwithFlutter]

Thanks :)