Learn how to organize your Flutter codebase so that it is easier to maintain and improve over time.
- [Instructor] All right, so it's time to build a new app. And in this module, we're going to be building a quiz app where the user has to answer questions and we'll tell them how many they got right. And while we build that, we're going to learn all about classes and objects and how to create them using Dart. Now by the end of the module, you're going to have a app that looks like this. It keeps track of the user's score and it lets them answer true and false questions. Even though the app looks simple, under the hood, we're going to be tackling some more intermediate programming concepts and also figure out how we can better structure our app. So as always, first things first. Let's get set up using the GitHub repository that we've got as the starting file. This is the starting project for our Quizzler app and as always, we're going to copy the URL and we're going to go into Android Studio and we're going to check out our project. From Version Control, we're going to select Git and then we'll paste in that URL that we got previously and clone our project. And we're going to select No, as always. Instead, we're going to choose to open it up where we saved it, which is inside my Android Studio projects. And we have to click on Get Dependencies in order for it to pull in all of our Flutter packages and set up our project for Flutter development. So as always, we have our main.dart, which contains all of the starting code. And in this case actually, we haven't made any changes in the pubspec. We've actually left it as it is. And there's no resources that we've added, no images, other than the app icons for the Android and iOS side. But the main reason why we have the starting file for you is because we've actually gone ahead and created a very simple user interface. So once you clone the project, go ahead and run it to see what we've done. Once the app has run, this is what you should see. There is a dark background and there's white text. And exactly as what it says, this is where our questions will go. And these are the true and false buttons that the user will be able to click on to select their answer. And this is all that we've done. And it's simply a text widget and two FlatButton widgets. And they're, of course, embedded inside expanded widgets in a column so that they take up the right amount of space. Now if you want to create this user interface completely from scratch yourself just to get extra practice, then feel free to create a new project from scratch. There's no images that you need and there's no changes in the pubspec. But given that we're going to learn quite a lot in this module, I thought it was a good idea that we gave you the starting components so that we don't have to spend a lot of time creating things and doing things that we already know how to do. So once you've reviewed the code and seen how the widgets are set up, then you're pretty much ready to go to the next lesson. And we're going to start building our scorekeeper. So for all of that and more, I'll see you on the next lesson.
Released
8/30/2019This course was created by London App Brewery. We are pleased to host this content in our library.
Share this video
Embed this video
Video: Quizzler: A true-or-false quiz app