Here’s an example of how to fetch data from an API and display it in a Flutter ListView:
Add the http package to your pubspec.yaml file:
dependencies:
http: ^0.12.2
Import the http and dart:convert libraries in your Dart file:
import 'package:http/http.dart' as http;
import 'dart:convert';
Define a Future function to fetch the data from the API:
Future<List<dynamic>> fetchData() async {
final response = await http.get('https://your-api-endpoint.com/data');
if (response.statusCode == 200) {
// If the API call was successful, parse the JSON response
return json.decode(response.body);
} else {
// If the API call was unsuccessful, throw an error
throw Exception('Failed to load data');
}
}
In your StatefulWidget‘s build method, use a FutureBuilder to build the ListView:
@override
Widget build(BuildContext context) {
return FutureBuilder<List<dynamic>>(
future: fetchData(),
builder: (context, snapshot) {
if (snapshot.hasData) {
// If the API call was successful, build the ListView
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(snapshot.data[index]['title']),
subtitle: Text(snapshot.data[index]['subtitle']),
);
},
);
} else if (snapshot.hasError) {
// If the API call was unsuccessful, display an error message
return Center(
child: Text('${snapshot.error}'),
);
}
// If the data is still being loaded, show a loading indicator
return Center(
child: CircularProgressIndicator(),
);
},
);
}
In this example, the fetchData function uses the http.get method to make an HTTP GET request to the API endpoint. If the API call is successful, the response is parsed into a list of Dart objects using the json.decode method. If the API call is unsuccessful, an error is thrown.
The FutureBuilder widget takes the fetchData Future as an argument and listens for its completion. Depending on the state of the Future, it either displays the ListView, an error message, or a loading indicator. The ListView.builder method is used to build the list, with each item being represented by a ListTile.
