API_example

Working with APIs in Flutter involves making HTTP requests to communicate with servers and retrieve data. Flutter offers various packages to simplify this process, such as http, dio, retrofit, and others. Here's a basic guide on how to work with APIs in Flutter using the http package as an example:

Step 1: Add the http package to pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.14.0

Run flutter pub get in the terminal to install the package.

Step 2: Make HTTP requests:

Here's an example of making a GET request to an API endpoint:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // Function to fetch data from the API
  Future<List<dynamic>> fetchData() async {
    final response = await http.get(Uri.parse('https://api.example.com/data'));

    if (response.statusCode == 200) {
      // If the call to the server was successful, parse the JSON response
      return json.decode(response.body);
    } else {
      // If the call to the server was unsuccessful, throw an error
      throw Exception('Failed to load data');
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('API Demo'),
        ),
        body: Center(
          child: FutureBuilder<List<dynamic>>(
            future: fetchData(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                // Display the fetched data
                return ListView.builder(
                  itemCount: snapshot.data!.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text(snapshot.data![index]['title']),
                      subtitle: Text(snapshot.data![index]['description']),
                    );
                  },
                );
              } else if (snapshot.hasError) {
                // Show error message if request fails
                return Text('Error: ${snapshot.error}');
              }
              // By default, show a loading spinner
              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

Important Points:

  • http.get() is used for making a GET request. Similar methods are available for POST, PUT, DELETE requests.

  • Use json.decode(response.body) to parse the JSON response received from the API.

  • Utilize FutureBuilder to handle asynchronous data and update the UI accordingly based on the API response.

  • Handle error cases with proper error messages for better user experience.

Remember, working with APIs involves handling various scenarios like error handling, authentication, pagination, etc. The code provided here is a basic example to get started. Tailor it according to your specific API requirements.

Before making API requests, ensure that your app has the necessary permissions (if required) and handle cases where the network might not be available.

Last updated