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.


Solution 1: Wai Han Ko

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.