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.
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
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 a new Flutter project and adapt the template project to begin the RWCourses app.
Get started with asynchronous programming using the Dart Future type and the async/await keywords.
Get an introduction to app architecture and the repository pattern, and create the model classes for RWCourses.
Discuss the basics of HTTP networking, and see how to make a network call from within a Flutter app to the RW API.
Get an introduction to JSON parsing, and parse the JSON response from the RW API into model objects.
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.
See how to parse more complicated data returned from the API, a list of domains associated with each course.
Learn about the concept of dependency injection and see how to utilize dependency injection when accessing the app repository.
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
Let's review what you'll be learning in this part, and why it's important.
See just how little code you need in Flutter to show a list of widgets using a ListView.
See how to create a ListTile class that will display the course data in the courses list.
Practice what you’ve learned by showing more information for each course in the course ListTile widget.
Review what you’ve learned in this section and discuss what’s next.
Part 3: Navigation and Animation
Check out what you'll be learning in this part, and why it's important.
Review the steps needed to navigate between screens in a Flutter app, and navigate from the courses list to a course detail screen.
Create a widget class that encapsulates showing an image in a container and that downloading the image from the network.
Use the image container you've created to help build out the course detail screen that shows more information for each course.
Practice your navigation skills by creating a new skeleton page for filtering courses and navigating to that page.
See how to add a basic hero animation when navigating between the courses list and the course detail screen.
Learn about the Dart Dev Tools, and see how to use them to modify the properties of the hero animation during development.
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
Let's review what you'll be learning in this part, and why it's important.
Create a custom widget that will be used on the filter page to show radio buttons and text for each filter option.
Use the custom filter widget you've created to help build out the filter page that lets the user filter the course list.
Practice what you’ve learned to add a new filter widget to the course filters screen.
Save the filter choice made by the user into the app's shared preferences, so that they are persisted between app restarts.
Apply the course filter to the courses list so that only the chosen platforms are shown in the list.
Review what you’ve learned in this section and discuss what’s next.
Part 5: Lift State Up
Welcome to the final part of the course! Check out what you'll be learning, and why it's important.
Learn about the importance of state management in Flutter and see some of the various options available for managing state.
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.
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.
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.
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.