DEV Community: Crizant Lai

Flutter: State management with ChangeNotifier

Crizant Lai — Sun, 25 Jul 2021 10:23:14 +0000

Tl;dr: Go visit this package and see the example section.

What is State Management?

For those of you who are new to flutter: There should be no app which only display a single static screen, right? An app like this is no difference than an image. Every app should have certain parts of UIs which depends on some data, that data is called state. The process of structuring the state, and making the UI refreshes upon the change of the state is hence named state management.

State Management with `ChangeNotifier`

In Flutter there are many ways to do state management. One of the ways is by using ChangeNotifier. Comparing to the setState method, using ChangeNotifier lets you share the state among different widgets of your app, without having to worry about passing around the properties or “on change callbacks” by widget parameters.

Let’s start by creating an instance of the model:

class CounterModel extends ChangeNotifier {
  int _count = 0;
  void increment() {
    _count++;
    notifyListeners();
  }
  int get count => _count;
}

Simple enough. It has an integer count value, and a method to increase the value by 1.

Then we create an instance of the model somewhere:

final CounterModel counterModel = CounterModel();

Then the UI. Here comes the real trick:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            ChangeNotifierBuilder(
              // supply the instance of `ChangeNotifier` model,
              // whether you get it from the build context or anywhere
              notifier: counterModel,
              // this builder function will be executed,
              // once the `ChangeNotifier` model is updated
              builder: (BuildContext context, CounterModel? counter, _) {
                return Text(
                  '${counter?.count ?? ''}',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _counterModel.increment,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Wrap the portion of your widget, which depends on the value of the model, in a ChangeNotifierBuilder. The UI will be updated once the notifyListeners method inside the model is invoked. The smaller the portion is, the faster the rebuild.

ChangeNotifierBuilder

Wait. You said there is no such thing as ChangeNotifierBuilder?

You’re right! This is a package created by me. Or you can use AnimatedBuilder instead, they are pretty much the same thing.

But I created the package for 3 reasons:

For the purpose of state management, ChangeNotifierBuilder is a more reasonable and readable name than AnimatedBuilder, for a builder widget.
Sometimes our model is not yet ready (i.e. equals null). In this case if you use AnimatedBuilder, it throws "animation cannot be null" exception. However, if you use ChangeNotifierBuilder, the runtime value of notifier can be null.
The builder method provides you the T notifier object as a parameter, which is a bit more user-friendly.
You can’t listen to multiple ChangeNotifiers with AnimatedBuilder, so I created MultiChangeNotifierBuilder for this purpose.

Optimizing Performance

There are 3 techniques to boost performance when using ChangeNotifierBuilder and MultiChangeNotifierBuilder:

Never wrap the builder around the root of your widget tree. Since we want to minimize the number of widgets to rebuild on every update, try wrapping the builder around the widgets which depend on the model only (the further away from the root the better, i.e. the leaves).
If the builder callback’s return value contains a subtree that does not depend on the model, you may pass it as the child parameter, instead of rebuilding it every time.
Don’t supply models which are not depended by the widget tree. Because unnecessary rebuilds will be triggered when those models update.

Putting it all together

The final piece of the puzzle is, how do you pass the same instance of the model around your app?

You can do it by creating a singleton model, or using the fantastic community packages like provider or get_it.

Flutter: How to work with JSONs like a PRO

Crizant Lai — Mon, 27 Apr 2020 12:56:34 +0000

Before being a Flutter developer, I came from the JavaScript world. One thing I missed the most is the mighty JavaScript packages on npm, especially lodash and ramda.

When developing Flutter applications, we often need to parse JSON objects from API responses, then access or manipulate them accordingly. Sadly dart language’s support for Map objects is not very rich, therefore I created this package: map_enhancer.

Usage

import 'package:map_enhancer/map_enhancer.dart';

void main() {
  final Map peter = {
    'name': {
      'firstName': 'Peter',
      'lastName': 'Petrelli',
    },
    'age': 29,
  };

  print(
    peter.getIn(['name', 'firstName']),
  );
  // Output: Peter

  // or if you prefer the JSON "dot notation":
  print(
    peter.getIn('name.firstName'.split('.')),
  );
  // Output: Peter

  // call with default value:
  print(
    peter.getIn(
      'name.nickName'.split('.'),
      defaultValue: 'Pete',
    ),
  );
  // Output: Pete

  peter.setIn(['ability'], 'Empathic mimicry');
  print(peter['ability']);
  // Output: Empathic mimicry

  peter.unsetIn(['name', 'lastName']);
  print(peter['name']['lastName']);
  // Output: null

  print(peter.hasIn(['name', 'nickname']));
  // Output: false
}

Actually this package is not restricted to Flutter and JSON(Map) objects, you may use it in any dart projects, or on any dart’s native Map objects.

And that’s it. Visit pub.dev to install this package, or submit issues/pull requests on GitHub.

Things you should consider before using DynamoDb

Crizant Lai — Wed, 04 Mar 2020 09:35:30 +0000

Lately, I'm been working on a project with DynamoDb, and this is my first time to meet this AWS service. It is just not a regular NoSQL database like MongoDB, I have encountered a few issues (or features?) of it, I will share them along with the way I dealt with them(if I do know how to).

No empty strings

DynamoDB is a NoSQL database, but it cannot store empty strings. Not in any levels of your JSON object. If you have a single value which is an empty string in your object, DynamoDB throws an error.

The workaround of this is, in aws-sdk (for node developers like me, you can find it on npm), it provides an option convertEmptyValues, if you set it true, the empty strings will be converted to null before being written into DB.

Query operation size limit

DynamoDB can maximum return 1MB of data in one query/scan operation. If your query contains more data, the results would include a key last_evaluated_key that you need to include in the next query, in order to retrieve "next page" of data.

Batch write limit

In every write requests, you can maximum include 25 rows only, which is very inconvenient. To deal with this issue and handle the possible write failure due to the exceed of throughput in concurrent write operations in multiple nodes, I have to do it like this:

const R = require('ramda')
const aws = require('aws-sdk')
const batchWriteToDb = async (tableName, data) => {
  const dynamoDb = new aws.DynamoDB({
    maxRetries: 999
  })
  const docClient = new aws.DynamoDB.DocumentClient({
    service: dynamoDb,
    convertEmptyValues: true
  })
  const dataSegments = R.splitEvery(25, data)
  // dynamoDb can only write 25 items once
  for (let i = 0; i < dataSegments.length; i++) {
    const segment = dataSegments[i]
    const params = {
      RequestItems: {
        [tableName]: segment.map(item => ({
          PutRequest: {
            Item: item
          }
        }))
      }
    }
    try {
      let response = await docClient.batchWrite(params).promise()
      while (!R.isEmpty(response.UnprocessedItems)) {
        const count = response.UnprocessedItems[tableName].length
        console.log(`${count} unprocessed item(s) left, retrying...`)
        const params = {
          RequestItems: response.UnprocessedItems
        }
        response = await docClient.batchWrite(params)
      }
    } catch (error) {
      console.log(error, error.stack)
    }
  }
}

Very clumsy, right?

Counting number of rows in a table

In other databases, there should be simple APIs to count the number of rows in a table, but not in the case of DynamoDb. There are two ways to get the number of rows in a table:

1. Use DescribeTable API

It returns information about a table, including the number of rows in it. But it only updates approximately every six hours, I think this is unacceptable.

2. Do a full table scan

Yet if your data exceeds 1MB, you have to do the scan operation recursively to get all pages of data…

Conclusion

DynamoDB is powerful, but it definitely got some trade-offs. If you come from the world of other NoSQL databases like MongoDB, make sure you take the above points into consideration before switching.