1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Flutter】UXの向上に向けて知っておいたら得すること

Last updated at Posted at 2024-06-17

初めに

同期処理でプログラムが実行されるFlutterでは、非同期処理やUIのフレーム管理が非常に難しいし、UXを向上させるポイントにもなってきます。
そこで、今回はFuture.microtaskとWidgetsBinding.instance.addPostFrameCallbackの違いについて説明していきます。
これらのメソッドを適切に使用することで、より効率的で応答性の高いアプリケーションを構築できます。
本記事では、これらのメソッドの詳細な解説と、その使用例について説明します。

Future.microtask

  1. Future.microtaskとは?
    Future.microtaskは、すぐに実行するべきタスクをスケジュールするためのメソッドです。Dartのイベントループ内で最も高い優先度を持つため、できるだけ早く実行されます。これは、非同期処理の中で短時間で完了するタスクを実行するのに適しています。

  2. 基本的な使い方
    Future.microtaskは、以下のように使用されます。

Future.microtask(() {
  // ここに実行するタスクを記述
  print('This is a microtask');
});
  1. 実行タイミング
    Future.microtaskでスケジュールされたタスクは、現在のタスクが完了した後、すぐに実行されます。これにより、緊急のタスクを迅速に処理することができます。

  2. 使用例
    例えば、UIスレッドをブロックせずに迅速にデータを処理する場合に使用できます。

void main() {
  Future.microtask(() {
    print('Microtask executed');
  });

  print('Main task executed');
}

// 出力:
// Main task executed
// Microtask executed

上記の例では、Main task executedが最初に出力され、その後にMicrotask executedが出力されます。これは、Future.microtaskが現在のタスクの完了後に実行されるためです。

WidgetsBinding.instance.addPostFrameCallback

  1. addPostFrameCallbackとは?
    WidgetsBinding.instance.addPostFrameCallbackは、Flutterのウィジェットツリーが描画された後に特定のコールバックを実行するためのメソッドです。これにより、ビルドプロセスが完了し、画面に表示された後に実行される処理をスケジュールできます。

  2. 基本的な使い方
    addPostFrameCallbackは、以下のように使用されます。

WidgetsBinding.instance.addPostFrameCallback((_) {
  // ここに実行するタスクを記述
  print('This is a post frame callback');
});
  1. 実行タイミング
    このコールバックは、フレームの描画が完了した後に実行されます。そのため、ビルドコンテキストが完全にセットアップされた後に行いたい処理に適しています。

  2. 使用例
    例えば、画面にウィジェットが描画された後にアニメーションを開始する場合に使用できます。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      // ここに初期化処理を記述
      print('Widget tree has been rendered');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Post Frame Callback Example'),
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
    );
  }
}

この例では、ウィジェットツリーが描画された後にWidget tree has been renderedが出力されます。これにより、ビルド完了後の初期化処理を確実に行うことができます。

Future.microtaskとaddPostFrameCallbackの違いと使い分け

  1. 実行タイミングの違い
    Future.microtaskは、現在のタスクが完了した直後に実行されます。これにより、非常に高い優先度でタスクを処理できます。
    WidgetsBinding.instance.addPostFrameCallbackは、フレームの描画が完了した後に実行されます。これにより、ウィジェットツリーが完全にセットアップされた後の処理が可能です。
  2. 使い分け

Future.microtask:

短時間で完了するタスクを迅速に実行する必要がある場合。
UIスレッドをブロックせずにデータ処理を行いたい場合。

WidgetsBinding.instance.addPostFrameCallback:

ビルドプロセスが完了し、画面が描画された後に行いたい処理がある場合。
ウィジェットツリーがセットアップされた後に初期化処理を行いたい場合。

まとめ

Future.microtaskとWidgetsBinding.instance.addPostFrameCallbackは、Flutterにおいて非同期処理やUIのフレーム管理を効率的に行うための強力なツールです。
これらを適切に使い分けることで、アプリケーションのパフォーマンスやユーザー体験を向上させることができます。各メソッドの特性と使用例を理解し、適切な状況で活用してください!

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?