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 Brian Moakley.

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

Learning path

This is part of the Flutter Fundamentals learning path. View Path.

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.

Covered concepts

  • Future Types
  • async/await
  • Network calls
  • Parsing JSON
  • ListViews
  • Adding screens
  • Animation
  • Shared preferences
  • Inherited Widgets
  • Webviews

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

Get started with your second Flutter project by creating a template project that will be the basis of your own raywenderlich.com app.

3
Toggle description

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

4
Toggle description

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

5
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.

6
Toggle description

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

7
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.

8
Toggle description

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

9
Toggle description

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

10
Conclusion 1:23
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

Lists are a critical aspect of any mobile platform. This introduction will provide an overview of creating lists in Flutter.

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:49
Toggle description

Review the ListView and then get an upcoming preview of the next part: navigation and animation.

Part 3: Navigate & Animate

Toggle description

This episodes provides an overview of navigation and animation in this upcoming part.

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 widget you’ve created to help build out the course detail screen that shows more information for each course.

Toggle description

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

Toggle description

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 1:15
Toggle description

You’re more than halfway through the course! Review in-app navigation and hero animations, then get an overview of the upcoming part.

Part 4: Filter Results

Toggle description

This episode provides an overview of how you’ll filter results in the upcoming part.

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:53
Toggle description

Review some of the pros and cons about working with shared preferences and then receive an overview of the upcoming part.

Part 5: Meet Inherited Widgets

Toggle description

Get an overview of this final part on how Flutter manages state and how you can use it to manage state in your own app.

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:13
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.