Flutterで重い処理をする際にUIをフリーズさせない

dartにはFuture<T>という、jsでいうところのPromiseのようなものがあり、非同期処理を書ける。
しかし、その中にCPUヘビーな同期的な処理を書いてしまうと、dartはシングルスレッドで実行されるので、
flutterでは当然、UIがフリーズしてしまう。

Isolate

dartはシングルスレッドで動作するが、メインプロセス以外のところでも処理を動かせる。
この仕組みをIsolateという。
メインの処理自体も一つのIsolateとして動いている。(Main Isolate)
Isolateはいわゆる「別スレッド」とは異なるもので、メモリを共有しない。

flutterで簡単にIsolateを使って処理をする

package:flutter/foundation.dartにあるcompute()関数を用いて簡単に別Isolateで処理を行うことができる

...
import 'package:flutter/foundation.dart';
...

class MyState extends State<MyWidget> {
  ...
  ...
  foo() async{
    final result = await compute(computeString, 'Hello'); // computeStringに渡したい引数をcomputeの第二引数に指定

    setState((){
      _displayedStr = result;
    });
  }

  static String computeString(String param) {
    // 時間がかかるCPUヘビーな処理
  }

  ...
  ...

}

• 注1：computeに渡す関数はstaticなものであること
  • 上述のとおり、 compute関数によって新たに立ちあがるSecondary IsolateはMain Isolateとメモリを共有しないので、関数はstaticである必要があります
• 注2：computeに渡す関数の引数は1つであること
  • compute関数自体が第2引数までしかとらないので、複数の引数を渡したいときはオブジェクトにするなどが必要