MiCard Personal Business Card app

- [Instructor] All right, so in the last lesson, we learned about how to create our very own Flutter app completely from scratch, and we built an I am rich and I am poor app, but in this module, we're going to take it much further. We're going to learn how to design your app's user interface using Flutter's layout widgets. And by the end of the module, you will have built a beautiful business card app that has all of your contact details on it and you can get people to download it so that they'll have all your details on their phone. It's a really simple app in terms of functionality, but by building it, we're going to learn a lot about how to layout user interface elements on screen using various Flutter layout widgets. So once you're ready, head over to this URL. Github.com/londonappbrewery/mi_card_flutter. Now of course, there's going to be a link to this in the course resources, so you can also click on that link. Now once you're here, you'll discover the skeleton project for this coming module and it includes things such as the app icons and images and resources that you'll need to be able to complete this module. So we're going to go ahead and clone it onto your local system by clicking on this green button, clone or download, and then you're going to click on this button to copy the URL of this repository. Now once you've copied that, you're going to open up Android Studio and on the welcome screen, you're going to click on checkout project from version control, and you're going to select Git as the provider. Now where it says URL, you're going to paste in that repository URL that you copied just now, and in this second part where it says directory, it's asking you where do you want this project to be cloned? So imagine that this process of cloning a repository being the same as, say, if I had emailed you a copy of the starter project and you had downloaded it and you decided where to put it on your computer and this is effectively, exactly the same thing, but it's so much more efficient. So choose where you want your project to be saved. You can, of course, click on this little icon to change that, if you wanted to save it onto your desktop or wherever. Now once you're ready, go ahead and click on clone for it to download that starter file and put it onto your computer. Now at this point, you might get a pop up that asks you whether if you want Android Studio to create a project for you based on the files that you just downloaded and you're going to select no. Instead, we're going to open up an existing Android Studio project. So we're going to click on that button and you're going to navigate to where you had cloned that previous project, Mi Card Flutter, so remember, in my case, I put it into a folder called Android Studio project, and that's where I see it now. If you change that destination to a desktop or wherever it may be, that is also where you're going to locate this particular project. Now select on the folder that contains all of your project files, such as your lib, your iOS, your Android, and then go ahead and click open, and Android Studio is going to do some magic behind the scenes to open up this project as a Flutter project. Now the first thing you see when you open it up is a whole bunch of arrows from dot analysis. Says I don't know about this, I don't know about that, and the reason is because before we do anything, we have to get our dependencies. So remember that our Flutter project relies on a lot of the libraries and code from the Flutter team, so if we click on get dependencies, that will download and get everything that we need in order for our project to be set up. So now we are all ready. We have no errors, no warnings, and everything is all good to go. So that was the entire process of taking a starter file that I've created and getting it downloaded and set up on your local system. Now GitHub is one of the largest repositories for open source code. So if you need some inspiration and you wanted to see how other people's code look, you can go ahead and just search for other Flutter projects, say, just put in the word Flutter and you can see that there's 25000 repository, so 25000 places where you can find other people's Flutter projects. And if you scroll down this, you'll find really cool apps that other people have built. For example, the History of Everything that was demoed at the Flutter conference last year where you can see all the animations and timelines and all sorts of crazy things that people have generated using Flutter. So whenever you come across something that you quite like to see the code for or you want to run it locally, then you're going to go through that same process that we went through just now, and we're going to be doing it frequently when I give you starting files with all the resources prepackaged, so you're going to get used to this pretty soon. Now back to Android Studio. So we've set up our starting file and we are ready to go. If you want to just check and confirm, then just go ahead and run it on a device or simulator just to make sure that everything works. And once you're ready, head over to the next lesson where we're going to get started talking about hot reload and hot restart.