Building Immutable Models with Built Value and Built Collection in Dart's Flutter Framework

in utopian-io •  11 months ago

flutter-logo.jpg

Repository

https://github.com/flutter/flutter

What Will I Learn?

  • You will learn about Built Value and how to use it to serialize JSON
  • You will learn how to use the Builder Pattern to create immutable data
  • You will learn about Build Collection and how it works.
  • You will learn how to use the AnimatedCrossFade widget.
  • You will learn about build runner and the built value generator

Requirements

System Requirements:
OS Support for Flutter:
  • Windows 7 SP1 or later (64-bit)
  • macOS (64-bit)
  • Linux (64-bit)

Required Knowledge

  • A little understanding state management and functional programming
  • A fair understanding of Mobile development and Imperative or Object Oriented Programming
  • Some understanding of Rx or Streams

Resources for Flutter and this Project:

Sources:

Flutter Logo (Google): https://flutter.io/
Builder Pattern Image (Wikipedia): https://en.wikipedia.org/wiki/Builder_pattern

Difficulty

  • Intermediate

Description

Outline and Overview

In this Flutter Video tutorial, we take a look at one of the ways that we can build out a complex model to serialize and deserialize data to and from JSON. We use the Built Value Library to build an immutable and complex data structure by composing multiple classes together through the builder pattern. We also use the Built Collection library to create an immutable list inside of this data structure. The application pulls from the complex and nested JSON data structure that comes from the Reddit API. We are then able to serve this data using a AnimatedCrossFade widget in a way that provides some reactivity.

Outline for this Tutorial
Item One: Built Value and Built Collection

Immutability is the cornerstone of many programming languages and using immutable data structures can be more efficient then using mutable data. Built Value and Built Collection are libraries that were created by google to help with so called "Value Types". Value Types are classes that represent immutable data such as Dates, Times, Money, URLs and even Authentication. Implementing these types into a program can often require a fair amount of boilerplate and Built Value helps cut that boilerplate down considerably.

reddit-abstract.png

In this image, we have the top level abstract class that represents the top level object from the JSON request. By just writing five to six lines of code, we have the ability to create a model which is immutable and fully serializable. The build_runner generator then generates almost 40 lines of code which would otherwise be boilerplate.

Item Two: The Builder Pattern

There are many design patterns in programming and the builder pattern is considered to be one of the most well known. The builder pattern allows us to decouple the the creation of a complex object from its actual representation. In this way, we can create multiple contexts of the same object which lets us also have multiple internal representations for this object. We use so called Builder objects for this.

builder.png

In a normal Builder Pattern, we have a director which refers to a builder interface. This interface creates and assembles parts of the complex object. In the Built Value library, the Builder is created through code generation. By defining multiple abstract classes, each with their own builder associated to them, we are able to create a single complex object with multiple contexts.

Item Three: Creating Reactive User Interfaces with the AnimatedCrossFade Widget

Often in Flutter, it is easy to associate reactive interfaces with Streams. We can however, build these reactive interfaces without streams however because of the tools that the framework gives us. One such tool is the AnimatedCrossFade widget. This widget makes it possible to swap between two different subtrees based on a small piece of business logic.

cross-fade.png

In our application, we are able to display our list of data base on whether or not the list is empty. If the list is not empty then we display the ListView widget which has all of the data inside of it. If the list is empty then we display a CircularProgressIndicator which tells the user that the data is loading.

The source code for this project can be found here

Video Tutorial

Projects and Series

Stand Alone Projects:
Building a Calculator
Movie Searcher Application

Minesweeper Game

Weather Application

Curriculum

Proof of Work Done

https://github.com/tensor-programming

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Thank you for your contribution @tensor.

Your contribution has been evaluated according to Utopian rules and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post,Click here


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

·

Thank you for moderating my contribution as always.

You just received a Tier 0 upvote! Looking for bigger rewards? Click here and learn how to get them or visit us on Discord

·

Again with this...

Hey @tensor
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Contributing on Utopian
Learn how to contribute on our website or by watching this tutorial on Youtube.

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Fantastic post friend

Nice note.
I believe this is already being looked upon .

👍👍