Your Second Flutter App

Continue along your Flutter and Dart journey by building your second complete app in Flutter, learning about making network calls, showing data in a list, and more! By Joe Howard.

Login to leave a rating/review
Download materials
Save for later
Share

Who is this for?

This course is for people getting started with Flutter and that have completed the Your First Flutter App and Programming with Dart: Fundamentals courses, or have the equivalent knowledge.

You'll start by learning about asynchronous programming with the Future type and async/await. Then you'll see how to make a network call to retrieve data and how to parse the JSON response. You'll show the data in a ListView, create a detail screen, navigate from the ListView to the detail screen, and even show an animation when navigating! You'll see how to persist data into shared preferences and how to share app state between multiple screens by lifting state up. Finally, you’ll see how to launch a webview from the detail screen.

This is part of our Flutter Beginner Learning Path. The course will cover Dart concepts beyond the second course in the learning path Programming with Dart: Fundamentals as needed.

If you're an intermediate or advanced mobile developer that is new to Flutter, you can zoom through this course at 2X speed and build the sample app. Then you'll be ready to dive even deeper into Flutter!

Covered concepts

This course covers all the concepts you’ll need to build your second Flutter app! Here are some of the topics you’ll conquer along the way:

  • Using Future types
  • async/await
  • Making network calls
  • Parsing JSON responses
  • Showing data in a list
  • Navigating between routes
  • Hero animations
  • Shared preferences
  • Lifting state up
  • Launching a web view

Part 1: Parse Network Data

1
Toggle description

Welcome to the Your Second Flutter App course! See where you are in the Flutter Beginner Learning Path, learn about prerequisites, and check out all the concepts you'll cover.

2
Toggle description

Create a new Flutter project and adapt the template project to begin the RWCourses app.

Toggle description

Get started with asynchronous programming using the Dart Future type and the async/await keywords.

Toggle description

Get an introduction to app architecture and the repository pattern, and create the model classes for RWCourses.

Toggle description

Discuss the basics of HTTP networking, and see how to make a network call from within a Flutter app to the RW API.

Toggle description

Get an introduction to JSON parsing, and parse the JSON response from the RW API into model objects.

Toggle description

Practice what you’ve learned: Inspect the RW API for course data and add a new property to the course model class that is parsed from JSON.

Toggle description

See how to parse more complicated data returned from the API, a list of domains associated with each course.

Toggle description

Learn about the concept of dependency injection and see how to utilize dependency injection when accessing the app repository.

Conclusion 1:02
Toggle description

You've completed the first part of the course! Review what you’ve learned and find out what’s next.

Part 2: Show a List

Toggle description

Let's review what you'll be learning in this part, and why it's important.

Toggle description

See just how little code you need in Flutter to show a list of widgets using a ListView.

Toggle description

See how to create a ListTile class that will display the course data in the courses list.

Toggle description

Practice what you’ve learned by showing more information for each course in the course ListTile widget.

Conclusion 0:25
Toggle description

Review what you’ve learned in this section and discuss what’s next.

Part 3: Navigation and Animation

Toggle description

Check out what you'll be learning in this part, and why it's important.

Toggle description

Review the steps needed to navigate between screens in a Flutter app, and navigate from the courses list to a course detail screen.

Toggle description

Create a widget class that encapsulates showing an image in a container and that downloading the image from the network.

Toggle description

Use the image container you've created to help build out the course detail screen that shows more information for each course.

Toggle description

Practice your navigation skills by creating a new skeleton page for filtering courses and navigating to that page.

Toggle description

See how to add a basic hero animation when navigating between the courses list and the course detail screen.

Toggle description

Learn about the Dart Dev Tools, and see how to use them to modify the properties of the hero animation during development.

Conclusion 0:23
Toggle description

You're more than halfway through the course! Review what you’ve learned in this section and discuss what’s next.

Part 4: Use a Filter and Preferences

Toggle description

Let's review what you'll be learning in this part, and why it's important.

Toggle description

Create a custom widget that will be used on the filter page to show radio buttons and text for each filter option.

Toggle description

Use the custom filter widget you've created to help build out the filter page that lets the user filter the course list.

Toggle description

Practice what you’ve learned to add a new filter widget to the course filters screen.

Toggle description

Save the filter choice made by the user into the app's shared preferences, so that they are persisted between app restarts.

Toggle description

Apply the course filter to the courses list so that only the chosen platforms are shown in the list.

Conclusion 0:31
Toggle description

Review what you’ve learned in this section and discuss what’s next.

Part 5: Lift State Up

Toggle description

Welcome to the final part of the course! Check out what you'll be learning, and why it's important.

Toggle description

Learn about the importance of state management in Flutter and see some of the various options available for managing state.

Toggle description

Create a filter state container widget and an associated inherited widget that together will be used to hold filter state and lift state up the widget tree.

Toggle description

Use the filter state container and inherited widget you've create to lift filter state up to where it can be seen by both the courses page and the filter page.

Toggle description

Lock the app into portrait mode, and add a button to the course detail page that lets the user visit the course page on raywenderlich.com in a web view.

Conclusion 1:11
Toggle description

Congrats on finishing the course! Let's review what you learned and discuss where to go from here to continue your Flutter and Dart learning journey.