Your First Flutter App: Polishing the App

So far, you’ve run the app on the iOS Simulator and Android emulator. That’s nice and all but probably not why you’re learning Flutter development. You want to make apps that run on real iPhones and Android phones!

In my opinion, one of the coolest things about mobile development is being able to write an app, and carry it around in your pocket to show off to your family and friends.

Don’t get me wrong: developing your apps on a Simulator or emulator works very well. When developing, I spend most of my time with one of those and only test the app on my device every so often.

However, you do need to run your creations on a real device in order to test them properly. There are some things the iPhone Simulator and Android emulators simply cannot do. For example, if your app needs the devices’s accelerometer, you have no choice but to test that functionality on an actual device. Let’s give it a shot!

First, we’ll get started deploying the app on an iOS device. Now in the old days, you had to have a paid developer account to run your app on a device. It also was quite a complex affair. These days everything is pretty easy.

First, you need to have a free apple developer account. If you don’t have one, head over to developer.apple.com and sign up. Remember, you do not have to get a paid account.

Once you have created your free developer account, open up the Runner workspace, contained in your Flutter project. This will open Xcode. Select the Runner project. First you need to provide a bundle identifier. This use reverse domain syntax. The most important thing is it must be unique. I’m going to add razeware.com.flutter.ios.bullseye.2021. Now, if you type the same thing, you’ll get an error because I have already registered this as my bundle identifier. So pick something unique for yourself.

Next, select the Signing & Capabilities tab. You should have Automatically manage signing checked. Select Team, and then Add an Account. From there, login to your apple developer account.

Once you have logged into it, select the Team dropdown. Select yourself. At this point, Xcode will create and download all the necessary certificates. Now plug in your device. Select Window and then Devices and Simulators. This will open up a window. Select your listed device and you Xcode should prep it for development.

Now close Xcode and head on back to Visual Studio Code. From the device dropdown, select your device. Now you can run your app on your device. In my case, I’m running into an error so I can run the app directly from Xcode itself.

For the Android portion, I’ll let Joe walk you through the instructions.

Okay, so I’m gonna start by running the app on my Android device.

In order to do that, you first need to go to Settings on your device. I have my android device here mirrored using a Chrome plugin named Vysor. So, what you’re seeing here on the screen is actually my android device plugged into my Mac.

I’m gonna go to Settings, and then scroll down to System. And then Advanced. And we need to set up these options called Developer options on our device. If you haven’t done that yet, you need to go back to the About phone page in Settings, scroll all the way to the bottom, and you see this is build number here.

These instructions will vary a little bit per device and per Android version. But basically you need to go the About page on your Settings and find this Build number field, and then tap it seven times in a row. And I’ve already done that so it says no need, you’re already a developer. But if you haven’t done that yet, you tap it seven times, you will get a prompt asking you if you want to add the developer options.

So, I go back, go the System, go to Advanced, then you’ll see the Developer options. At that point, you can plug your phone into your Mac via USB. You’ll see a prompt asking you to connect your phone to the Mac. So, when you see that prompt, you just wanna hit OK.

So, we’ll go back home on the device. And at that point, VS Code will have detected that you’ve plugged in your device, and that you’re ready to launch the app on the device. So, you just wanna check down here in the bottom right and make sure that’s true. And then you can hit Control + F5.

Now, go back to Vysor. And when the app starts, Vysor detects that it’s a landscape app, so it switches to landscape mode. So, this is the app running on my actual phone device. It’s a Pixel 3a.

So, if I scroll over to 73, I’m doing this on my phone, not on my Mac. And hit the Hit Me button. I got 76, I’ll try one more round, and try and get it right in the middle at 50. Cool Perfect!