Building Dynamic Lists with Streams in Dart's Flutter Framework

What Will I Learn?

• You will learn how to use Streams in Flutter
• You will learn how to build Dynamic Lists and Widgets
• You will learn how to manipulate the layout and User interface elements in Flutter

Requirements

• IDEA intellij or Visual Studio Code with the Dart/Flutter Plugins
• The Dart SDK and the Flutter SDK
• A fair understanding of Mobile development and Imperative or Object Oriented Programming
• An awareness of Functional Programming and Functional Reactive Programming

Difficulty

• Intermediate

Description

In this tutorial series, we use Dart Streams to build a Dynamic List View in Flutter. We implement a fairly simple Functional Reactive Programming pattern to create a lazy list of elements that loads as the User or User Interface requests them. We then subscribe to this stream to pull the state of our application out as it is needed. The User Interface dynamically responds to these updates and state changes in a way that keeps things fluid and stemless.

Our application pings the JSONPlaceholder fake Rest API to pull in about five thousand different photo URL elements. We then take these elements and reflect them against a Photo Class to give our application access to the data in a way that Flutter can parse. We then add this data to our User Interface to serve it out to the front-end of our application. At the end of the tutorial, we also play around with some of the different layouts to make the data look more appropriate for the application.

The source code for this project can be found here

Video Tutorial

Curriculum

• Dart Flutter Cross Platform Chat Application Tutorial
• Building a Multi-Page Application with Dart's Flutter Mobile Framework
• Making Http requests and Using Json in Dart's Flutter Framework

---

Posted on Utopian.io - Rewarding Open Source Contributors

---