Android Studio data from API - json

Question

Basically im using an API where i can take a numberplate and show information on a vehicle. I managed to get everything working but can't seem to figure out how to display all the information.
Future<Album> fetchAlbum() async {
final response = await http
.get(Uri.parse('https://v1.motorapi.dk/vehicles/CZ33849'),
headers: {"X-AUTH-TOKEN": "rfrzsucnc7eo3m5hcmq6ljdzda1lz793",
"Content-Type": "application/json",
"Accept": "application/json",
});
if (response.statusCode == 200) {
// If the server did return a 200 OK response,
// then parse the JSON.
return Album.fromJson(jsonDecode(response.body));
} else {
// If the server did not return a 200 OK response,
// then throw an exception.
throw Exception('Failed to load album');
}
}
//headers: {"X-AUTH-TOKEN": "rfrzsucnc7eo3m5hcmq6ljdzda1lz793"}
class Album {
final String? registration_number;
final String? status;
final String? type;
final String? use;
final String? first_registration;
final String? vin;
final int? doors;
final String? make;
final String? model;
final String? variant;
final String? model_type;
final String? color;
final String? chasis_type;
final int? engine_power;
final String? fuel_type;
final String? RegistreringssynToldsyn;
final String? date;
final String? result;
Album({
this.registration_number,
this.status,
this.type,
this.use,
this.first_registration,
this.vin,
this.doors,
this.make,
this.model,
this.variant,
this.model_type,
this.color,
this.chasis_type,
this.engine_power,
this.fuel_type,
this.RegistreringssynToldsyn,
this.date,
this.result,
});
factory Album.fromJson(Map<String, dynamic> json) {
return Album(
registration_number: json['registration_number'],
status: json['status'],
type: json['type'],
use: json['use'],
first_registration: json['first_registration'],
vin: json['vin'],
doors: json['doors'],
make: json['make'],
model: json['model'],
variant: json['variant'],
model_type: json['model_type'],
color: json['color'],
chasis_type: json['chasis_type'],
engine_power: json['engine_power'],
fuel_type: json['fuel_type'],
RegistreringssynToldsyn: json['RegistreringssynToldsyn'],
date: json['date'],
result: json['result'],
);
}
}
void main() => runApp(const MyApp());
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
late Future<Album> futureAlbum;
#override
void initState() {
super.initState();
futureAlbum = fetchAlbum();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Fetch Data Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: const Text('Fetch Data Example'),
),
body: Center(
child: FutureBuilder<Album>(
future: futureAlbum,
builder: (context, snapshot) {
if (snapshot.hasData) {
return Text("${snapshot.data!.use}");
} else if (snapshot.hasError) {
return Text('${snapshot.error}');
}
// By default, show a loading spinner.
return const CircularProgressIndicator();
},
),
),
),
);
}
}
When i edit this line: return Text("${snapshot.data!.use}");, i can replace use with other variables from Album class, but i can't seem to figure out how to display it all at once.

Answer 1

How you want to display? It is depend on your UI. If you want to put it all in a single Text widget, you can do like that
class User {
String name;
String address;
toString() {
return "name: " + name + ", address: " + address;
}
}
Or You can use Column/Row Widget to show per Text Widget.