Device-Agnostic Design

Third-party Tutorial


Learning Objectives

  • You can follow a third-party tutorial to build a responsive application.

At this point of the course, you should be sufficiently familiar with Dart and Flutter, so that you can follow a third-party tutorial that focuses on building a responsive application. In the following exercise, this is exactly what you will do.

Following a tutorial

0 / 150 points

Open up the address https://codelabs.developers.google.com/codelabs/flutter-animated-responsive-layout that contains a tutorial for building an animated responsive application with Flutter.

Follow the tutorial, building the application piece by piece. Once finished, return the application here as a zip, where the contents of the zip contain the contents of the lib folder of the project that you created following the tutorial. The contents of the zip should be as follows.

Terminal window
models/
data.dart
models.dart
transitions/
bottom_bar_transition.dart
list_detail_transition.dart
nav_rail_transition.dart
widgets/
animated_floating_action_button.dart
disappearing_bottom_navigation_bar.dart
disappearing_navigation_rail.dart
email_list_view.dart
email_widget.dart
reply_list_view.dart
search_bar.dart
star_button.dart
animations.dart
destinations.dart
main.dart

As your task here is to follow the tutorial, keep to the original file structure in the tutorial. You may, if you choose, use libraries used in the course to adjust the behavior of parts of the application. As an example, you could use GetX for state management instead of creating stateful widgets.

There are no automated tests for this exercise beyond checking the file structure. Do not submit the solution before finishing the full tutorial, i.e. finishing all the steps to the end of the eight part “Adding a list/detail view”.

To emphasize, do not submit the solution before working through the full tutorial locally.