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 Douglas Moakley.
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.
- Future Types
- Network calls
- Parsing JSON
- Adding screens
- Shared preferences
- Inherited Widgets
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 the Project
Get started with your second Flutter project by creating a template project that will be the basis of your own raywenderlich.com 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, then 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.
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
Lists are a critical aspect of any mobile platform. This introduction will provide an overview of creating lists in Flutter.
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.
Practice what you’ve learned by showing more information for each course in the course ListTile widget.
Review the ListView and then get an upcoming preview of the next part: navigation and animation.
Part 3: Navigate & Animate
This episodes provides an overview of navigation and animation in this upcoming part.
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 widget you’ve created to help build out the course detail screen that shows more information for each course.
Practice your widget creation skills by creating a new skeleton page for filtering courses and navigating to that page.
Use a Hero Animation
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 in-app navigation and hero animations, then get an overview of the upcoming part.
Part 4: Filter Results
This episode provides an overview of how you’ll filter results in the upcoming part.
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 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
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.
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.
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.
Use Portrait Mode
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.