Flutter如何與后端API交互

在Flutter中，與后端API交互通常是通過HTTP請求來實現的。你可以使用Dart語言提供的http庫來發送HTTP請求和處理響應。以下是一個簡單的例子，展示了如何使用http庫從一個假設的后端API獲取數據：

首先，你需要在你的pubspec.yaml文件中添加http包的依賴：

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3 # 請檢查是否有更新的版本

然后，你可以創建一個函數來發送GET請求：

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<Map<String, dynamic>> fetchData() async {
  // 替換為你的API URL
  final url = 'https://your-backend-api.com/data';

  try {
    // 發送GET請求
    final response = await http.get(Uri.parse(url));

    // 如果服務器返回了200 OK響應，則處理響應體
    if (response.statusCode == 200) {
      // 將JSON響應轉換為Dart Map
      return json.decode(response.body);
    } else {
      // 如果服務器沒有返回200 OK響應，則拋出異常
      throw Exception('Failed to load data');
    }
  } catch (e) {
    // 處理網絡請求或解析過程中的錯誤
    throw Exception('Failed to fetch data: $e');
  }
}

在上面的代碼中，我們定義了一個fetchData函數，它使用http.get方法發送一個GET請求到指定的URL。如果請求成功并且服務器返回了200 OK狀態碼，我們就將響應體從JSON格式轉換為Dart的Map對象。如果請求失敗或者服務器返回了錯誤的狀態碼，我們就拋出一個異常。

你可以在你的Flutter應用中的任何地方調用這個函數來獲取數據。例如，你可以在一個FutureBuilder中使用它來構建UI：

import 'package:flutter/material.dart';
import 'fetch_data.dart'; // 假設fetchData函數在另一個文件中定義

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<Map<String, dynamic>>(
      future: fetchData(),
      builder: (BuildContext context, AsyncSnapshot<Map<String, dynamic>> snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}');
        } else {
          // 使用獲取到的數據構建UI
          Map<String, dynamic> data = snapshot.data!;
          return Text('Data: ${data['someKey']}');
        }
      },
    );
  }
}

在上面的例子中，FutureBuilder會等待fetchData函數的結果，并根據結果的狀態來構建UI。如果數據還在加載中，它會顯示一個進度指示器。如果加載過程中發生了錯誤，它會顯示錯誤信息。一旦數據加載完成，它就會使用這些數據來構建UI。

這只是一個基本的例子，實際應用中可能需要處理更復雜的情況，比如發送POST請求、上傳文件、處理認證和授權等。但是基本的流程是相似的：使用http庫發送請求，然后根據響應來更新UI。