Your Second Flutter App

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 then pop them off when the user leaves.

Android utilizes a back stack, allows for tabbed navigation, and also has tools like the Jetpack Navigation library that lets you easily swap Fragments to navigate.

In Flutter, you utilize the Navigator class and Routes to achieve a stacked navigation. A route example is a MaterialPageRoute, which represents an abstraction of the screen in the app. Routes are managed by the Navigator class, with which you can push routes to go to a new screen and then pop to go back.

That approach to navigation is called Navigator 1.0 in Flutter. There is 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 2.0. We’ll cover the 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 subfolder 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 stateless widget.

First type, ‘ST’ and select stateless widget. Give it the name CourseDetailsPage. Finally, click the StatelessWidget and then press Command-. on the mac or Control-. on Windows to import the material library.

class CourseDetailsPage extends StatelessWidget {

  CourseDetailsPage({Key key, this.course}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(

    );
  }
}

Next, create a property to hold a course object, making sure it is required.

final Course course;

Then make sure to import the course object.

import '../../model/course.dart';

We’ll need to update the constructor by adding the course as well as marking it as required.

const CourseDetailPage({Key? key, required this.course}) : super(key: key);

Now, change the container to use a scaffold. Provide an app bar and body property.

return Scaffold(
      appBar: AppBar(title: Text(course.name)),
      body: const Text('Course detail'),
    );

Okay, we have our placeholder 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 a onTap function for the ListTile. We can do this with the help of onTap property of ListTile.

onTap: () {

},

Inside the onTap, call Navigator.of().push() to push to a route

Navigator.of(context).push<MaterialPageRoute>());

Add a MaterialPageRoute argument to go to the course detail page

MaterialPageRoute(
  builder: (context) => CourseDetailsPage(
    course: course,
  ),
),

Make sure to import the course details page.

import '../course_detail/course_details_page.dart';

Now hot reload or build and run. Tap on one of the courses and look at that. You are navigated to the course detail page. Granted there’s not a lot of detail but we’re just getting started.