Your Second Flutter App

Introduction

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.

Create the Project

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

See the Future

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

Use a Model and Repository

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

Make a Network Call

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

Parse the Network Response

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

Challenge: Add More Properties

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.

Parse Domains

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

Use Dependency Injection

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

Conclusion

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

Introduction

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

Use a Listview

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

Use a List Tile

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

Challenge: Show More Data

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

Conclusion

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

Introduction

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

Navigate to a Route

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

Create an Image Container

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

Complete the Course Detail Page

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

Challenge: Navigation

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

Use a Hero Animation

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

Utilize Dart Dev Tools

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

Conclusion

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

Introduction

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

Create a Filter Widget

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

Build Out the Filter Page

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

Challenge: Add a Filter

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

Use Shared Preferences

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

Filter Courses

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

Conclusion

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

Introduction

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

Flutter State Management

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

Create an Inherited Widget

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.

Lift State Up

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.

Add Some Finishing Touches

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

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.

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!

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