All language subtitles for 1. MiCard - A Single Screen Personal Business Card App

All right.
1

So in the last lesson, we learned about how to create our very own Flutter app, completely from scratch.
2

And we built an 'I Am Rich' and 'I Am Poor' app.
3

But it is a module, we're going to take it much further.
4

We're going to learn how to design your app's user interface using Flutter's layout widgets. And by the
5

end of the module, you will have built a beautiful business card app, that has all of your contact details
6

on it, and you can get people to download it so that they'll have all your details on their phone.
7

It's a really simple app in terms of functionality, but by building it we're going to learn a lot about
8

how to layout user interface elements, onscreen, using various Flutter layout widgets. So once you're ready,
9

head over to this URL, github.com/londonappbrewery/mi_card_flutter
10

Now, of course, there's gonna be a link to this in the course resources, so you can also click on that
11

link.
12

Now, once you're here, you'll discover the skeleton project for this coming module. And it includes things
13

such as the app icons and images and resources that you'll need to be able to complete this module.
14

So, we're gonna go ahead and clone it onto your local system, by clicking on this green button 'Clone or
15

download' and then you're gonna click on this button to copy the URL of this repository. Now once you've
16

copied that, you're going to open up Android Studio, and on the welcome screen, you're going to click on
17

'Check out
18

project from Version Control'. And you're gonna select 'Git' as the provider. Now, where it says URL,
19

you're going to paste in that repository URL that you copied just now. And in the second part, where
20

it says directory, it's asking you, 'Where do you want this product to be cloned?'
21

So imagine that this process of cloning a repository being the same as say if I had emailed you a copy
22

of the starter project. And you had downloaded it, and you decided where to put it on your computer.
23

And this is effectively exactly the same thing, but it's so much more efficient. So choose where you want
24

your project to be saved. You can of course click on this little icon to change, that if you wanted to
25

save it onto your desktop or wherever.
26

Now once you're ready, go ahead and click on clone, for it to download that starter file, and put it onto
27

your computer.
28

Now at this point, you might get a popup that ask you whether if you want Android Studio to create a
29

project for you based on the files that you just downloaded, and you're going to select
30

No.
31

Instead, we're going to open up an existing Android Studio project. So we're going to click on that button,
32

and you're going to navigate to where you had cloned that previous project, mi_card_flutter.
33

So remember in my case, I put it into a folder called Android Studio project, and that's where I see it
34

now.
35

If you change that destination to your desktop or wherever maybe, that is also where you're going to
36

locate this particular project.
37

Now select on the folder that contains all of your project files, such as your lib, your iOS, your Android,
38

and then go ahead and click 'open'. An Android Studio is gonna do some magic behind the scenes, to open
39

up this project as a Flutter project.
40

Now, the first thing you see when you open it up, is a whole bunch of errors from Dart Analysis says, 'I
41

don't know about this, I don't know about that.'
42

And the reason is because before we do anything, we have to get our dependencies.
43

So remember that all Flutter project relies on a lot of the libraries and code from the Flutter team.
44

So if we click on get dependencies, that will download and get everything that we need in order for our
45

project to be setup.
46

So now we are all ready. We have no errors, no warnings and everything is all good to go.
47

So that was the entire process of taking a starter file, that I've created, and getting it downloaded
48

and set up on your local system. Now GitHub is one of the largest repositories for open source code.
49

So if you need some inspiration, and you wanted to see how other people's code look, you can go ahead
50

and just search for other Flutter projects. Say, just put in the word 'Flutter', and you can see that there's
51

25,000 repositories or 25,000 places where you can find other people's Flutter projects.
52

And if you scroll down this, you'll find really cool apps
53

other people have built. For example, 'The History of Everything' that was demoed at the Flutter conference
54

last year, where you can see all the animations, and timelines, and all sorts of crazy things that people
55

have generated using Flutter.
56

So, whenever you come across something that you quite like to see the code for, or you want to run it
57

locally, then you're going to go through that same process that we went through just now.
58

We're going to be doing it frequently when I give you starting files, with all the resources prepackaged.
59

So you're going to get used to this pretty soon.
60

Now back to Android Studio.
61

So we've set up our starting file, and we are ready to go. If you want to just check and confirm, then just
62

go ahead and run it on a device or simulator, just to make sure that everything works.
63

And once you're ready, head over to the next lesson where we're going to get started talking hot reload
64

and hot restart.