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

Setting up navigation between the multiple screens of your app is an important aspect of app development. On iOS and Android, there are various techniques for accessing multiple screens. On iOS, you have a navigation controller, whereby you push view controllers on your navigation controller, and then pop them off when the user leaves. Android utilizes a back stack, allowing for tab navigation, and also has tools like Jetpack navigation that allows you to easily swap fragments to navigate. In Flutter, you utilize the navigator class and routes to achieve a stacked navigation. A route example is a Material Page Route, which represents an abstraction of the screen in the app. Routes are managed by the navigator class with which you can push routes to, to go to a new screen and then pop to go back. That approach to navigation is called Navigator 1.0 and Flutter. There's also a Navigator 2.0 approach, which is beyond the scope of this course, and which instead uses a declarative approach to navigation and gives you a little more control. You can use either of these approaches for Flutter Navigation, since the 1.0 approach is not replaced by the 2.0 approach. We'll cover Navigator 2.0 approach in a future course. To get started, open your project in progress or open up the starter project for this episode. First, we'll create a new folder. Create a Course Detail sub folder in the UI folder. Inside the Course Detail folder, create a file called course_details_page.dart. This is going to be a placeholder for now. With the page open, create a StatelessWidget. First type "st" and select StatelessWidget. Give it the name, CourseDetailsPage. Finally, click the StatelessWidget and press Command + period on a Mac, or Control + period on Windows. Import the material library. Next, create a property to hold a course object. Then, make sure to import the course object. We'll need to update the constructor by adding the course as well by marking it as "required." Now, change the container to use a scaffold, provide an app bar, and body property. Our placeholder's good to go. Later, we'll update it to include Course Details. For now, we need to add an action when the user taps on the list item in the list view. Open up course_page.dart. Next, add an onTAP to the list tile. Inside the onTAP, call navigator of push to push to a route. Add a Material Page Route argument to go to the Course Details page. Make sure to import the Course Details page. Now, hot reload or build and run. Tap on one of the courses, and look at that. You're navigated to the Course Details page. Granted, there's not a lot of details, but we're just getting started.