非同期!「基本 → 実践 → Flutter UI と組み合わせ」

Flutter(Dart)の非同期関数(async / await)まとめ

Flutter(Dart)の非同期関数(async / await)

・「基本 → 実践 → Flutter UI と組み合わせ」まで、流れで理解できるようにまとめています。


1. 非同期関数とは?

Dart では async / await / Future を使って、時間のかかる処理(ネットワーク、DB、ファイル読み込みなど)を扱います。

・非同期関数の基本文法

async_basic.dart
Future<String> fetchData() async {
  await Future.delayed(Duration(seconds: 1)); // 擬似的に1秒待つ
  return "データ取得完了";
}

・ポイント

  • async を付けると「その関数は非同期関数」になる
  • await で「その処理が終わるまで待つ」ことができる
  • Future<T> は「T 型の値を、あとで返す約束(Promise)」という意味

・非同期関数の呼び出し

main.dart
void main() async {
  String result = await fetchData();
  print(result); // データ取得完了
}
・main 関数自体にも async を付けることで、await が使えるようになります。

2. 実践例(API / SharedPreferences / DB)

2-1. API 呼び出しの例

api_example.dart
Future<String> loadUserName() async {
  final response = await http.get(
    Uri.parse("https://example.com/user"),
  );
  return response.body;
}
  • HTTP 通信は時間がかかるため、必ず Future として扱われる
  • UI スレッドを止めずに、結果が返ってきたら処理を続けることができる

2-2. SharedPreferences の例

shared_prefs_example.dart
Future<int> getCounter() async {
  final prefs = await SharedPreferences.getInstance();
  return prefs.getInt('counter') ?? 0;
}
  • インスタンス取得も非同期(getInstance が Future)
  • 保存された値がなければ 0 を返すようにしている

2-3. sqflite での DB 読み込み例

db_example.dart
Future<List<Map<String, dynamic>>> fetchUsers() async {
  final db = await DBHelper().database;
  return await db.query('users');
}
  • DB 接続の準備もクエリもどちらも非同期
  • 結果は「Map の List」として返ってくる

3. Flutter UI と非同期処理(FutureBuilder)

・UI の中で非同期処理を使う時は、FutureBuilder が便利です。

3-1. まずは非同期でテキストを読み込む関数

load_text.dart
Future<String> loadText() async {
  await Future.delayed(Duration(seconds: 2));
  return "読み込み完了";
}

3-2. UI 側で FutureBuilder を使う

widget_example.dart
@override
Widget build(BuildContext context) {
  return FutureBuilder<String>(
    future: loadText(),
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        // 読み込み中
        return CircularProgressIndicator();
      }

      if (snapshot.hasError) {
        // エラー時
        return Text("エラーが発生しました");
      }

      // 成功時
      return Text(snapshot.data ?? "");
    },
  );
}

・FutureBuilder を使う理由

  • 非同期処理の状態(待機中 / 完了 / エラー)に応じて UI を切り替えやすい
  • setState を自分で何度も呼ばなくてもよい
  • API、DB、ファイル読み込みなどあらゆる非同期処理に応用できる

4. 非同期処理のまとめ・ポイント

  • 同期コードのように書ける:async / await で見通しの良いコードになる
  • UI が止まらない:Flutter は基本1スレッドなので、時間のかかる処理は必ず非同期にする
  • FutureBuilder で UI と連携しやすい:状態に応じてウィジェットを切り替えられる
  • DB / API / ファイル操作に必須:実用的なアプリでは非同期処理は避けて通れない

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です