Your Second Flutter App

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

To continue on your Flutter journey. In this course, you'll build an app named RW Courses. This app will use the raywenderlich.com API to show you video course data. You'll build the app starting from a new project and visual studio code. Now you can also use Android Studio if you prefer, but you'll have to adjust the instructions given as we work our way through the course. Now, before you proceed, make sure you have a Flutter development environment set up. This will include Flutter, and the Dart SDKs, Xcode for macOS, and Android Studio with the Android SDK. To get started working with the new Flutter project, a good habit is to run Flutter Doctor to make sure everything is working as designed. Now I'm using macOS Command + Space bar to access the terminal. If you are using Windows, you can search for the command line app by searching from the start menu. My Flutter install is good to go. If you have issues, you should look into fixing them before you get started. See the course, your first Flutter app for more information. I'll provide a link in the author notes. Now, open up Visual Studio Code. We're going to create a new Flutter project. From the menu, select View and Command Palette. You may see Flutter: New Application Project. If not, search for Flutter, and then you should see it listed. Select your desktop or some other suitable location. Then click the button, select the folder to create the project in. You will now have a new Flutter project. Give it the name rwcourses. It will take a few moments, but soon you will have a brand new Flutter project. Well done. Next, we need to set up some constants. Select the lib folder, and create a new file called strings.dart. This is a file that contains constant strings that will be displayed to the user interface of the app. Add the following. Next, we need some constants that we'll be using throughout the app. In the lib folder, create a new file called constants.dart. Add the following. Okay, we have our strings in our constants. Now, to create our first widget. The widget will list all of our courses. First, in the lib folder, create a new folder called UI. Then create another folder inside the UI folder called courses. In the courses folder, create a new file called courses_page.dart. Now, to create a new stateful widget. You could do a lot of typing, but instead just type ST. From the dropdown, select Insert Stateful Widget. You'll get a whole bunch of code with your cursor set after the class declaration, give it the name CoursesPage. You're getting a lot of errors, because you haven't imported the material library yet. Select the StatefulWidget, and press Command + Period on macOS, or a Control + Period on Windows. Import the materials library. Once imported, you have courses page state return a text, instead of an empty container. Now, to create a new stateless widget for the entire app itself. This will display the navigation bar title, as well as display the new courses page. In the lib folder, create a new file called rwcourses_app.dart. In your new file, create a new stateless widget by typing ST, and selecting Insert Stateless Widget. Give it the name RWCoursesApp. Import the material library by selecting the StatelessWidget, and on macOS, press Command + Period, and on Windows, press Control + Period. Next, we need to set up an app bar. First, change the return container to a scaffold widget. The scaffold widget allows you to add drawers, snackbars, and bottom sheets to your app. Put this scaffold to work by adding an app bar, using the app title from your strings constants file. We're getting an error, because we haven't imported the strings constants file. You can select it, and press Command + Period on Mac, or Control + Period on Windows. This imports it using the package. Import the file. At this point, it's time to update our main app. Open main.dart and delete everything. Now to our new app, create a new material app. This will use Android theming. You'll pass in the appTitle and ThemeData. For the home, pass in our RWCoursesApp. Finally, important strings.dart. And that's it. We have our app almost set up. In the file navigator, you'll notice that there's a test folder. We won't be using unit tests in this app, so you can delete it. We also won't be deploying this app to the web. So if you see a web folder, you can delete that as well. At this point, either launch an iOS simulator or launch the Android emulator. Now with main.dart selected in your device selected, press F5 to launch your app. You'll be prompted to launch Dart DevTools. You'll explore them later in this course. For now, select Not Now. And with that, we have the beginnings of our courses app in place. Nice job.