Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,300 --> 00:00:00,690
All right.
2
00:00:00,690 --> 00:00:01,750
Roll up roll up.
3
00:00:01,770 --> 00:00:06,570
Welcome to the 1 o'clock tour of your Flutter development environment.
4
00:00:06,600 --> 00:00:10,020
My name's Angela and I'm gonna be your tour guide.
5
00:00:10,110 --> 00:00:15,570
Now I want you to imagine that you've just started a new job and I'm basically going to take you on
6
00:00:15,570 --> 00:00:17,820
a tour of your work environment.
7
00:00:17,850 --> 00:00:18,250
Right.
8
00:00:18,270 --> 00:00:22,530
So I'm gonna take you on a tour of where the bathrooms are, where the snacks are,
9
00:00:22,560 --> 00:00:27,290
what are the best snacks that we stock in this office environment etc..
10
00:00:27,390 --> 00:00:33,500
So before I get carried away listening my favorite snacks, let's get started and show you what Android
11
00:00:33,510 --> 00:00:34,950
Studio has to offer.
12
00:00:34,950 --> 00:00:37,110
This is going to be our workspace.
13
00:00:37,110 --> 00:00:38,750
This is gonna be our office.
14
00:00:38,760 --> 00:00:44,040
We're developing our Flutter apps so it's really important that we get familiar with all the different
15
00:00:44,130 --> 00:00:46,800
areas and what we can do with each of those.
16
00:00:47,220 --> 00:00:53,760
Now, Android Studio is made by a company called IntelliJ, and they are really good at making these
17
00:00:53,840 --> 00:01:01,050
so-called IDEs or Integrated Development Environments. And they're integrated because they integrate
18
00:01:01,050 --> 00:01:02,850
lots of different things.
19
00:01:03,060 --> 00:01:08,690
So we can take a while to learn all of the things and all of the functionality that they have integrated.
20
00:01:09,030 --> 00:01:15,230
But I want to point you to some of the most important ones that is going to make your life a lot easier.
21
00:01:15,300 --> 00:01:22,050
And if you're coming from a simple text editor, such as Sublime or Atom or other ways of coding, then
22
00:01:22,110 --> 00:01:28,590
you're going to find that IDEs, such as Android Studio, are a little bit complicated initially. But once
23
00:01:28,590 --> 00:01:29,280
you get going,
24
00:01:29,280 --> 00:01:36,390
it's a much more powerful tool and will make your experience of developing things and coding, really
25
00:01:36,510 --> 00:01:37,950
a lot more delightful.
26
00:01:38,430 --> 00:01:39,720
So let's start from the top.
27
00:01:39,810 --> 00:01:43,980
And you can see right at the top we've got a navigation bar of sorts.
28
00:01:44,160 --> 00:01:50,160
And it's basically showing you the location of the current file, relative to your project.
29
00:01:50,520 --> 00:01:57,690
So in the last episode we created a new sort of dummy Flutter app just to configure our app and to show
30
00:01:57,690 --> 00:01:59,000
you what it looks like.
31
00:01:59,040 --> 00:02:06,840
Now if this is the location of your project, remember that I created this Flutter app inside my Android
32
00:02:06,840 --> 00:02:14,550
Studio projects folder. So if I locate this project folder then I can follow this sequence of navigation
33
00:02:14,580 --> 00:02:19,020
to get to this current file that's open inside the editor.
34
00:02:19,290 --> 00:02:25,560
And this is the main.dart file, which is pretty much the starting point for any of our Flutter apps.
35
00:02:25,560 --> 00:02:28,150
So it's a really important file to locate.
36
00:02:28,200 --> 00:02:35,790
Now, if I follow along with that navigation, inside Flutter app, let's go in to the lib folder, and inside
37
00:02:35,790 --> 00:02:39,290
the lib folder we find our main.dart file.
38
00:02:39,300 --> 00:02:43,550
So this was the route for us to be able to reach this current file.
39
00:02:43,560 --> 00:02:49,320
Now the next thing I want to show you is this project pane over here, which you can collapse or expand
40
00:02:49,350 --> 00:02:51,720
by clicking on the tab on the left.
41
00:02:51,750 --> 00:02:59,100
Now inside here you'll find a folder for your Android apps, and a folder for your iOS apps.
42
00:02:59,100 --> 00:03:05,910
Now if you've ever developed iOS or Android apps, when you expand these folders, the contents will look
43
00:03:05,910 --> 00:03:09,830
very familiar to you because, these are things that you're used to working with.
44
00:03:09,840 --> 00:03:15,840
Now if you've never made iOS or Android apps, then just know that when you're creating your apps using
45
00:03:15,840 --> 00:03:22,230
Flutter, it will automatically create your iOS and Android apps in the background, and update them as
46
00:03:22,230 --> 00:03:24,630
you create your Flutter app.
47
00:03:24,630 --> 00:03:30,680
We're going to be spending most of our time inside this lib folder here, where we're going to write Dart
48
00:03:30,690 --> 00:03:37,670
code and we're going to be creating most of our Flutter app. Inside the project navigator,
49
00:03:37,830 --> 00:03:42,480
when you want to open up a file to inspect, you double click on it.
50
00:03:42,510 --> 00:03:48,210
So for example, if I double click on this pubspec.yaml file, then you can see it shows up inside
51
00:03:48,210 --> 00:03:50,820
here on a new tab.
52
00:03:50,820 --> 00:03:54,290
Now this is an important file because it's our configuration file.
53
00:03:54,300 --> 00:03:56,760
It helps us configure our Flutter apps.
54
00:03:57,300 --> 00:04:03,390
And here you'll be adding things such as third party libraries or other packages, and you'll be setting
55
00:04:03,390 --> 00:04:05,540
up your assets folder etc..
56
00:04:05,570 --> 00:04:10,180
So we're going to be diving deep into our configuration in the coming lessons.
57
00:04:10,260 --> 00:04:12,900
But for now, just know that this is where it resides
58
00:04:12,990 --> 00:04:14,370
and this is where we'll find it
59
00:04:14,370 --> 00:04:15,800
when we need to change it.
60
00:04:15,910 --> 00:04:18,160
Now here's a really helpful button.
61
00:04:18,390 --> 00:04:24,780
If you find that when you open up your project, all the folders are all collapsed, and you want to locate
62
00:04:24,900 --> 00:04:27,120
the current file that's open,
63
00:04:27,120 --> 00:04:33,930
then just go ahead and click on this little sort of locate-me button here. And you'll see that it'll
64
00:04:33,930 --> 00:04:40,890
expand the folders as needed to show you where you currently are inside your project structure.
65
00:04:41,130 --> 00:04:42,550
So that's kind of neat.
66
00:04:42,720 --> 00:04:46,110
I'll be sharing some of these tips as we go along whenever it's relevant.
67
00:04:46,140 --> 00:04:50,380
So feel free to use it or not, it's totally up to you.
68
00:04:50,400 --> 00:04:56,070
The next thing I want to show you is this editor pane here. And this is where you're gonna be writing most
69
00:04:56,070 --> 00:04:56,750
of your code.
70
00:04:56,790 --> 00:05:02,670
So feel free to give yourself more space by dragging that separator there, or just collapsing the things
71
00:05:02,670 --> 00:05:06,530
that you don't really need. Inside this editor pane,
72
00:05:06,690 --> 00:05:14,520
you see a margin over here and the margin has certain helpful tools such as, for example here, when the
73
00:05:14,520 --> 00:05:20,460
code specifies a particular color. It'll actually show you a little swatch of that color so that as
74
00:05:20,460 --> 00:05:26,130
a human, you know what that color is because very often, when we're creating colors, it just kind of is
75
00:05:26,130 --> 00:05:28,520
like code right> what is light blue? What is blue?
76
00:05:28,550 --> 00:05:30,750
What is, you know, a hex code?
77
00:05:30,840 --> 00:05:33,230
And this just helps you see all of that.
78
00:05:33,250 --> 00:05:40,020
The other thing that you can do using this margin here is you can collapse parts of the code that you're
79
00:05:40,050 --> 00:05:43,260
kind of done with, to keep your work space tidy.
80
00:05:43,260 --> 00:05:49,110
So for example if we're done writing this particular part of the code, and I just want to get it out
81
00:05:49,110 --> 00:05:55,710
of the way, then I can click on either this one or this button. And it's almost like closing a book.
82
00:05:55,710 --> 00:06:00,990
It just collapses that part of the code so that you're not distracted by all the code that's in there.
83
00:06:01,200 --> 00:06:06,360
And if you're working on different parts, just collapsing these sections can make it so much easier to
84
00:06:06,360 --> 00:06:11,640
figure out what's actually going on on the page, especially when there's a lot of code. And you can click
85
00:06:11,640 --> 00:06:17,340
on these three dots to expand them again when you need to. The next thing I want to show you is, down
86
00:06:17,340 --> 00:06:17,720
here,
87
00:06:17,730 --> 00:06:24,330
we've got this section called Dart Analysis, and this comes from the Dart plugin we installed.
88
00:06:24,450 --> 00:06:30,300
And what this does is that it'll very helpfully point out parts of the code that it thinks is wrong,
89
00:06:30,630 --> 00:06:35,580
that you might have made an error or warnings telling you that you might be doing the wrong thing.
90
00:06:35,580 --> 00:06:41,190
So for example over here, if I just accidentally delete this comma here or I forgot to put it in, then
91
00:06:41,190 --> 00:06:48,300
it tells me that, oh look, it expected to find a little comma. And if you're lost somewhere in the code
92
00:06:48,360 --> 00:06:52,740
and you see this little warning and you don't know what it is or where it refers to, just double click
93
00:06:52,740 --> 00:07:00,540
on it and it'll show you where it expected to find a comma. So if we added a comma there, then that warning
94
00:07:00,540 --> 00:07:01,560
goes away.
95
00:07:01,620 --> 00:07:09,480
And if I right click and click on reformat code with dartfmt, then it will reformat my code to make
96
00:07:09,480 --> 00:07:10,440
it look proper
97
00:07:10,440 --> 00:07:16,980
again. Remember if you configured Android Studio to reformat your code every time you hit save, it'll
98
00:07:17,010 --> 00:07:20,160
be the same thing as right clicking and clicking on this.
99
00:07:20,610 --> 00:07:24,930
So let's just try that again and I'm going to hit COMMAND + S to save.
100
00:07:25,070 --> 00:07:29,190
And you can see it does exactly the same thing, and just formats the code, which is kind of neat.
101
00:07:29,580 --> 00:07:35,400
So keep an eye out inside Dart Analysis for any errors or warnings you might be getting, so that you
102
00:07:35,400 --> 00:07:39,300
can fix your code before you run it or make a mess of it.
103
00:07:39,300 --> 00:07:44,770
The next part I want to show you is the flutter outline on the right side here.
104
00:07:44,850 --> 00:07:50,460
So this kind of builds up a tree structure if you will, of your entire code base.
105
00:07:50,880 --> 00:07:56,000
So you can see that, for example, inside here, we've got a scaffold and in the scaffold there's an app
106
00:07:56,010 --> 00:07:58,140
bar. In addition to the app bar,
107
00:07:58,170 --> 00:08:04,230
there's also a center widget and there's a column widget and it shows you that tree structure of all
108
00:08:04,230 --> 00:08:05,460
of your widgets.
109
00:08:05,460 --> 00:08:11,340
This can be really helpful when you have a long file full of code, and you're trying to locate a specific
110
00:08:11,610 --> 00:08:12,180
thing.
111
00:08:12,180 --> 00:08:17,390
So you can just click on it and it will highlight that part inside your code.
112
00:08:17,400 --> 00:08:22,530
So it's really useful when you're navigating around your code and seeing kind of at a glance what your
113
00:08:22,530 --> 00:08:23,800
code looks like.
114
00:08:23,910 --> 00:08:27,120
The next thing I want to show you is the Flutter Inspector.
115
00:08:27,450 --> 00:08:33,690
But in order for something to show up in the Flutter Inspector, your app has to be running on a device
116
00:08:33,810 --> 00:08:36,070
or on a simulator on an emulator.
117
00:08:36,540 --> 00:08:44,190
Let's go ahead and click run to run our app on the iPhone XR, and if you ever see this little popup
118
00:08:44,250 --> 00:08:47,750
on the right here that tells you then IDE error occurred,
119
00:08:47,880 --> 00:08:52,110
don't worry, it's not your fault. It isn't related to what you've done.
120
00:08:52,110 --> 00:08:56,530
It's just relating to how the plugins are working with each other in the background.
121
00:08:56,880 --> 00:09:03,030
And Google will automatically report these issues back home to try and figure out what it is that might
122
00:09:03,030 --> 00:09:04,040
be going wrong.
123
00:09:04,110 --> 00:09:07,510
So don't get scared if you see that red box over there.
124
00:09:07,560 --> 00:09:14,460
So now that our app is up and running on a simulator or on a device, then we now have something actually
125
00:09:14,460 --> 00:09:17,060
inside our Flutter Inspector.
126
00:09:17,100 --> 00:09:24,030
Now for those of you who have ever made a website, the Flutter inspector can feel quite familiar. Because
127
00:09:24,030 --> 00:09:29,280
it's very very similar to the Chrome developer tools, and you have to remember that the people who built
128
00:09:29,280 --> 00:09:32,460
Flutter originally came from the chrome team.
129
00:09:32,460 --> 00:09:36,090
So a lot of this gets inspired by the same tools.
130
00:09:36,270 --> 00:09:42,740
For example, over here you can see that we have a floating action button right at the bottom here.
131
00:09:42,750 --> 00:09:49,410
Now if I click on this floating action button, the bottom pane here tells me all of its properties.
132
00:09:49,410 --> 00:09:56,880
So it tells me for example that the color is this blue color with that particular hex code, or other
133
00:09:56,880 --> 00:10:01,520
things such as what is the text size that's inside the button.
134
00:10:01,620 --> 00:10:08,220
And this is a list of all the properties that you can inspect whenever you're kind of miffed as to why
135
00:10:08,220 --> 00:10:10,020
does my app look like this?
136
00:10:10,020 --> 00:10:12,690
Why does it not look like the way I want to?
137
00:10:12,690 --> 00:10:19,110
So it's really useful for debugging and generally just checking to see what's going on with your app.
138
00:10:19,110 --> 00:10:25,540
Another really useful thing is you can go ahead and click on this little button here.
139
00:10:25,590 --> 00:10:29,320
Now this looks similar to the one that we saw over here.
140
00:10:29,370 --> 00:10:37,920
But what this one does, is it allows you to select anything that you see on screen here, to locate it inside
141
00:10:37,920 --> 00:10:38,490
the code.
142
00:10:38,490 --> 00:10:44,340
So for example if I want to figure out where this 0 comes from, I click on that after clicking on the
143
00:10:44,340 --> 00:10:51,090
locate button, and you can see it's highlighted to me, the part of my code, that's actually creating this
144
00:10:51,180 --> 00:10:52,670
zero here.
145
00:10:52,680 --> 00:10:56,910
Now if you're done with that and you want to select something else, then just click on this little icon
146
00:10:56,910 --> 00:11:00,050
on the bottom left and you now get to select something else.
147
00:11:00,090 --> 00:11:04,930
Let's select maybe up here, and you can see it's taken me to the app bar.
148
00:11:05,370 --> 00:11:09,810
So that's a really really useful thing that we can do.
149
00:11:09,900 --> 00:11:17,310
Another really cool feature is you can click on this button here. You can see right now my app looks
150
00:11:17,310 --> 00:11:25,110
like a normal app but once I click on this, then you can see it shows me how my app is actually laid
151
00:11:25,110 --> 00:11:25,730
out.
152
00:11:25,770 --> 00:11:30,460
So what are all the layout rules actually doing to the layout of my screen.
153
00:11:30,480 --> 00:11:33,010
So for example, you can see this little plus button.
154
00:11:33,140 --> 00:11:36,570
It has arrows pointing to it from all four corners.
155
00:11:36,570 --> 00:11:42,510
And that tells me that there's something in there that's keeping that plus symbol, right in the middle
156
00:11:42,810 --> 00:11:44,750
of this particular button.
157
00:11:44,790 --> 00:11:50,160
And so this also helps you to diagnose what's actually going on with your layout, and especially if you
158
00:11:50,160 --> 00:11:53,280
have problems with the way that things are laid out,
159
00:11:53,280 --> 00:11:57,600
this is really helpful for you to figure out what went wrong or what you should change.
160
00:11:57,600 --> 00:12:03,660
The final thing I want to show you is the Run tab down here, and this is your console.
161
00:12:03,660 --> 00:12:09,990
Whenever something goes wrong while your app is running, and you get messages back from the device, telling
162
00:12:09,990 --> 00:12:13,670
you what went wrong, that's usually displayed right here.
163
00:12:13,980 --> 00:12:17,550
And this is a little bit different from Dart Analysis.
164
00:12:17,580 --> 00:12:24,120
This part is really useful as you're writing your code, but when you've run your code and something goes
165
00:12:24,120 --> 00:12:27,780
wrong, then it's usually over here that you'll find it.
166
00:12:27,780 --> 00:12:33,450
So that's all talk of Android Studio for Flutter development, and don't worry if you've forgotten about
167
00:12:33,510 --> 00:12:37,440
a button that I've shown you or a feature that I've shown you. I'm gonna be using it
168
00:12:37,470 --> 00:12:43,320
as we learn how to develop flutter apps and you hear it mentioned again. Before we get started I wanted
169
00:12:43,320 --> 00:12:49,560
to familiarize you with the environment so that you're not just thrown into our workplace here and you
170
00:12:49,560 --> 00:12:54,940
actually get a little bit of an idea for what each part of Android Studio is used for.
171
00:12:54,990 --> 00:12:58,870
So that when we come to it next time, we're actually building it for real,
172
00:12:58,920 --> 00:13:00,500
it doesn't feel so foreign.
173
00:13:01,110 --> 00:13:03,160
So I hope you enjoyed the tour.
174
00:13:03,240 --> 00:13:05,820
Be sure to leave me review on TripAdvisor.
175
00:13:05,820 --> 00:13:06,630
Just kidding.
176
00:13:06,630 --> 00:13:13,690
But we are now finally ready to actually build a real app. So for all of that, and more.
177
00:13:13,800 --> 00:13:14,880
I'll see you on the next module.
18696
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.