Fetching Data (http)

Flutter apps often need to pull data from backend APIs, public APIs, or database services. You can use the http package to make GET/POST requests. On the UI side, FutureBuilder lets you display loading, success, and error states based on conditions.

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

A loading spinner appears at first, and once the data arrives, the title text is shown. If an error occurs, an error message appears instead.

Next Steps

In the final Mini Project lesson, bring most of these Flutter concepts together to build a small app.