Upgrade to Pro — share decks privately, control downloads, hide ads and more …

flutterで画面を固めないために

 flutterで画面を固めないために

keitatomozawa

December 14, 2019
Tweet

More Decks by keitatomozawa

Other Decks in Programming

Transcript

  1. 7 画面を固めてしまう例
 `async/await`は書けばいい訳ではない 
 • 中身がasyncになっていないので無意味 
 ◦ よく使う‘package:http’等の中身は非同期になる ように実装されているから安心


    • 固まる目安
 ◦ flutterは 通 常 60fps 出 るようになっているので 16ms以上かかるような処理ではフレーム落ちの 可能性がでてくる
 Source: https://flutter.dev/docs/perf/rendering/ui-performance

  2. 9 どうする:Use `compute` function
 ‘package:flutter/foundation.dart’ 内のcompute関数を使う 
 • foundation.dartをimport 


    • 該当する処理をstaticな処理にする 
 • compute関数に該当処理、計算したい引数を 渡してawait(または普通のFutureを扱うように) 
 Source: https://api.flutter.dev/flutter/foundation/compute.html

  3. 10 何がおこっているか
 • DartにはIsolateというものがある ◦ JavaなどのThreadみたいなものだが、メモリを共有しない ◦ jsのwebworkerに近い ◦ 異なるisolateはparallelに動作する

    • メイン処理は『Main Isolate』という場所で動いている • flutterから複数のIsolateを使うことができる • 重い処理は、別のIsolateに乗せてあげることでUIフリーズを防ぐ • このIsolateを簡単に使えるようにしてくれているのがcompute関数
  4. 11 注意点
 • staticメソッドしか渡せない ◦ 2つのIsolateは互いにメモリを共有しないので • 処理に必要な情報は引数として渡す必要がある ◦ 同上

    • スイッチングコストは考慮すべき ◦ Isolateはいわゆる軽量スレッドほど手軽ではない ◦ はっきり止まってしまう場合以外はそこまでうま味なし