All language subtitles for 3. Deploying Flutter Apps to iPhonesiPads

All right.
1

So for those of you guys who have a physical iPhone device or an iPad device even, and you would like
2

to run the Flutter apps that you create onto your physical iOS device, then you are in the right place.
3

That's exactly what we're going to cover in this lesson.
4

Now, before we can get started there's a couple of prerequisites that you have to fulfill before you
5

can actually do this.
6

One is you must have an Apple I.D. So you must have registered with Apple at some point, giving them your
7

email and have a password.
8

Now this Apple I.D. doesn't have to be a developer account.
9

So it could be any sort of Apple account that you have. Anyone that you use to say download apps from
10

the App Store, or the ones that you use to log in on your iPhone.
11

Now the next thing you need is a iPhone or an iPad device.
12

Our apps are not going to run onto a watch or any other type of Apple device. It has to be something
13

that can run iOS.
14

So one of these two. And then three, you're going to need Xcode already installed, which we already did
15

previously in the setup instructions. If you haven't done that, then you'll need to do that now before
16

we can continue.
17

And finally, you're going to need a good quality USB cable.
18

And strangely enough, we've discovered through years of teaching students that USB cables are not created
19

equal.
20

And some of them will only transfer data whereas other ones will only transfer power,
21

and you need both power and data.
22

So best case scenario, you have the original cable that you got from Apple, which is hopefully not yet
23

frayed because they tend to do that. Or you have a good quality USB cable from another provider.
24

Once you've got all of these four things, then we're ready to move on.
25

And just a word of warning,
26

there's quite a few steps that we have to go through, and they're kind of like the hoops that you have
27

to jump through before Apple will actually allow us to install our app onto our phone.
28

And as you can imagine, Apple is very serious about security.
29

So there's about 10 steps that we have to go through. But I will go through each of them with you, together
30

step by step.
31

So the first step is you have to make sure that the iOS version on your physical device is compatible
32

with the Xcode version.
33

Now generally speaking, the Xcode version is two versions behind iOS.
34

What does that mean?
35

So here I have my Xcode application open, and you can see that the version that's registered on it
36

is currently 10.2.1.
37

Now on the right hand side here, I've got quick time that's rendering my current iPhone.
38

And if I go into settings, and I go into general and about, then you can see that the current software
39

version I'm running is 12.2. The number that we're interested in is that, if you have an iOS version
40

of say 12, then minus 2 becomes 10.
41

So Xcode has to be at least version 10 in the first number.
42

Now the second number has to be lower on the iPhone.
43

So if this is a 2, this has to be a minimum of 2.
44

So if I had Xcode 10.3, 10.4 etc. that will also work with this version of
45

iOS.
46

But basically, your Xcode has to be ahead of, or equal to your iOS software version.
47

And there's a gap of 2 on that major number.
48

So 10 matches with 12. 11 would match with 13.
49

Eventually when Apple releases iOS 13.
50

But if your Xcode is too old, or it doesn't match with the iOS version, then the easiest way is to
51

update Xcode to the latest version.
52

So open up the app store and update it there.
53

It is very hard to go back in time for your iOS version.
54

It's much much easier to upgrade Xcode to the latest version.
55

Now however, some of the latest versions of Xcode will require you having the latest version of Mac OS.
56

So if you go into this little Apple sign and you click on About this Mac, you have to make sure that
57

you're running Mac OS Mojave to be able to run the latest version of Xcode.
58

So if you have one of these things that are a bit older, then you might end up initiating a chain of
59

updates where you first update your Mac OS and then you update your Xcode. So you go onto the app store
60

and you can see that there is a later version of Xcode but it's not letting you update,
61

then the reason might be because you have a older version of Mac OS. Because there are minimum requirements
62

on all of these pieces of software.
63

So you can see here, we need at least Mac OS 14.3 or later. Which is exactly what I have,
64

I actually have a later version of Mac OS.
65

But once you're done with that and you've made sure that your Xcode is compact with your iOS version,
66

then we can move on to the next step, which is to install homebrew.
67

Now we're going to do this by following the tutorial on the Flutter docs page.
68

So under install, when we go to the Mac option and we go to deploy to iOS devices, you can see that
69

there are detailed step by step instructions.
70

Now there's a couple of bits missing here that I think are really important which is why I'm walking
71

you through it in video format, but there's a couple of other things that we definitely have to do.
72

And the first thing is to install homebrew.
73

So if you click on this link right here, it'll take you to brew.sh and on this page it will show
74

you how to install homebrew.
75

So all we have to do is to copy this line in its entirety, so we hit COMMAND + C to copy.
76

And then we're going to launch terminal.
77

So if you go into this upper right corner and click on the magnifying glass, you'll launch Spotlight
78

and then we're going to search for something called a terminal, and we can hit ENTER
79

once it finds it to launch our terminal application. Now once terminal has launched, then you're going
80

to paste that command you copied over, and you get to hit ENTER to install homebrew. And you can leave
81

it running for as long as it takes. And then go ahead and hit ENTER to continue.
82

And it's going to ask you for your password.
83

Now the password it wants, is the one that you use to log into your Mac. And your user account on
84

your Mac that you're currently logged into, has to be one with Admin privileges. Because it's going to
85

be installing homebrew onto the computer for all users to use.
86

So I'm going to type in my password and notice that it doesn't actually show what I'm typing, so you're
87

typing blind.
88

And, if you get it wrong, it'll just tell you so you can try again.
89

But once you're done, hit ENTER, and it will continue installing homebrew.
90

Now you'll know it's done because they'll tell you installation successful, and you will also be able
91

to see your prompt which is your user name and also the $.
92

So now that we're done with installing homebrew, we're going to be using homebrew to do a couple of things
93

that Flutter will require to be able to run your app onto iOS. Here under Step 3, in deploy to iOS devices,
94

you're going to copy each of these instructions one by one and you're going to paste it into the terminal.
95

Right here, and then we're going to hit ENTER. Now, as it says here,
96

the first two steps here is because, Flutter is currently using a opensource package which is developed
97

by an external developer, and these two steps may go away at some point in the future.
98

So maybe when you're looking at this page sometime down in the future, you might not see these two instructions,
99

in which case, you don't need to do it anymore.
100

So this is just a quick heads up.
101

But as of right now it is still an essential step if you want everything to work.
102

So once you've done that step, then you're going to go and do the next step and you're basically going
103

to go through this one by one, until you get to the very bottom. And they will take different amounts
104

of time to complete, but you will always know once it's done by seeing your prompt and then you know
105

that it's time to add the next line of code from the Flutter website.
106

And when you get to this line where it says 'brew install', all of these things, 'idevice installer ios-
107

deploy cocoapods.
108

This is the one that's going to take the longest basically.
109

So, this is one where you have to be really patient.
110

So once that's all done, we're going to copy the very last line which is to set up something called cocoa
111

pods, and this will take a little while as well.
112

Now once that's complete, you should see 'Setup completed' and we're now done with Step 3, and all of this.
113

So we're now ready to move on, where we open up Xcode, and we add our Apple I.D. So in order to do this,
114

you're going to go into Android Studio, and you should have the 'I Am Rich' project already open.
115

If not, go ahead and open it from file, open or open recent.
116

You might see it in there as well.
117

And once you're here, you're going to locate the iOS folder in your project navigator.
118

So if you're in a different view, say the Android view etc. then make sure you're inside the project
119

view. And you're going to right click on the iOS folder, and go to Flutter, then open iOS module in
120

Xcode.
121

And this should automatically open up Xcode, and open up the runner project which contains all of
122

the iOS part of our 'I Am Rich' app. Now,
123

if that doesn't work for you, then you can also go ahead and right click on this iOS folder, and click
124

on 'Reveal in finder' and once you're here, you should be able to expand that folder,
125

and here, you can simply double click on the runner.xcworkspace to be able to launch it inside
126

Xcode.
127

Now, once you hear, you're going to click on the runner project. So it's the one that has the blue icon.
128

And now you're going to be adding an account.
129

So here where it says team, if you have never developed an iOS app before, you will have to add your Apple
130

I.D. here.
131

So here you're going to put in your e-mail that you use to logon to Apple, and then it's going to prompt
132

you for your password.
133

Now once you've successfully logged in with your Apple I.D. then you should now be able to go into the
134

team selector and select the account that you've just added.
135

Now because mine is a developer account, it will show up with our company name.
136

But in your case it should probably be your name, or the email that you use to log in.
137

So now we're finally ready to connect your phone with USB. So hook up your phone to your Mac.
138

And at this moment in time, you'll probably get a popup that ask you whether if you trust this computer
139

that you connected your phone to. The popup should look something like this.
140

And even though we're always used to clicking on the right hand side and and always the bolded words,
141

be sure that you click on 'Trust' over here instead.
142

Be careful that you actually click on the right one.
143

Now if you accidentally clicked on the one on the right, then be sure to unplug your phone and re-plug
144

it to hopefully read trigger these popup, and trust it.
145

Now there's one more thing that we have to trust, which is our development certificates. So it's the
146

Apple I.D. that we added just now in Xcode. And the easiest way to get this to trigger, is to actually
147

click Run inside Xcode to try and run it on to your physical devices.
148

If your device that's currently connected is not showing up right here,
149

make sure that the team is selected, and make sure that you've had a look inside this drop down and you've
150

been able to select the device.
151

Now you can click Run, and after you run it from Xcode,
152

If your app doesn't automatically launch on your iPhone, then it's time to go into your settings, go under
153

general, and then try and find device management, to find your Apple I.D. and then click on 'trust' to trust
154

your developer I.D. And once that's done, you should be able to come back to Xcode, run it again and
155

it should now go through without a problem.
156

Now the final thing we have to do here in Xcode, is to create a unique bundle I.D. That means you have
157

to make sure you've got the Runner app selected, you're inside the targets of runner,
158

you've got general selected, and this is your bundle identifier.
159

So here we've got our domain here appbrewere.co reversed.
160

So usually what we tell students is to write com, and then write your name, and then it should have .
161

the name of the app.
162

And this,
163

hopefully nobody with your full name is trying to release an app called 'I Am Rich'
164

onto the app store. And this will work just fine.
165

Now if you don't have this unique, usually you'll have a little red warning around here, and it will not
166

let you run your app until you fix this.
167

So after all of those steps, we're finally ready to tackle the very last one, which is being able to
168

run your app from Android Studio.
169

So head back into Android Studio, and at this point before we try and run our app on our physical iPhone,
170

it's a good idea to run a final check just to make sure that everything is setup correctly.
171

For that, we will use our Flutter Doctor. The Flutter Doctor will let us know if there was anything we
172

missed during the setup process. So go into Tools, and then under Flutter, select Flutter
173

Doctor. And now it will run the Flutter Doctor diagnostics, and it'll show you what are the things that you've
174

completed,
175

what are the things that might still be yet incomplete, and if you see any of these points as a cross,
176

then it usually includes a link to a documentation on Flutter's docs to tell you how you can fix it. But
177

now that I've got ticks all across the board, you should see your phone being listed inside this drop down
178

list, and from now on, every time it's plugged in, you'll see it show up as a potential deployment target,
179

so you'll be able to run your apps onto your phone, without ever having to do all of the setup that we
180

did before.
181

So with our device listed in the dropdown and no issues detected by the Flutter Doctor, we're finally
182

ready to hit play and run our app on our physical device. And now you can see that the app has been installed
183

onto my physical device, and it will launch automatically, without you having to click on the app icon.
184

And is actually quite important that you don't click on the app icon, because that will usually launch
185

the previous version of your app.
186

So just wait for Android Studio and Flutter to kickstart the app. And now I have my 'I Am Rich' app running
187

on my physical iOS device. So there's quite a few steps involved in doing this and there's quite a few
188

places that students fall down on.
189

So we've compiled a list for you to troubleshoot any problems you have and just check that you've completed
190

all of the steps. So that we'll be in the course resources under this module.
191

And if you have any problems getting up to here, then be sure to check that out.
192

Now once you already, head over to the next module, and we're going to be building another app.