Fetching Data (http)

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

Flutter app တွေမှာ backend API, public API, database service တွေက data ကိုယူရတာများပါတယ်။ http package ကိုသုံးပြီး GET/POST request လုပ်နိုင်ပါတယ်။ UI ဘက်မှာ FutureBuilder ကိုသုံးရင် loading, success, error state များကို condition အလိုက်ပြနိုင်ပါတယ်။

dart

// pubspec.yaml ထဲမှာ dependency ထည့်ပါ
// dependencies:
//   http: ^1.2.0

Future<String> fetchTitle() async {
  final response = await http.get(
    Uri.parse('https://jsonplaceholder.typicode.com/posts/1'),
  );

  if (response.statusCode == 200) {
    final data = jsonDecode(response.body);
    return data['title'];
  }

  throw Exception('Failed to load title');
}

FutureBuilder<String>(
  future: fetchTitle(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const CircularProgressIndicator();
    }

    if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    }

    return Text(snapshot.data ?? 'No title');
  },
)

You should see

စတင်ချိန်မှာ loading spinner ပေါ်ပြီး data ရလာတဲ့အခါ title စာသားပေါ်ပါမယ်။ Error ဖြစ်ရင် error message ပေါ်ပါမယ်။

နောက်တစ်ဆင့်

နောက်ဆုံး Mini Project lesson မှာ Flutter concept အများစုကိုပေါင်းပြီး small app တစ်ခုတည်ဆောက်ကြည့်ပါ။