Home / Questions / 549572
Accepted
mauricio
Asked: 2022-08-02 16:24:52 +0800 CST 2022-08-02 16:24:52 +0800 CST

Why am I not getting the images from a screen query?

  • 772

I am relying on the flutter documentation for this api call. but I am not rendering the images from the url on the screen, it keeps loading infinitely. enter image description here

 import 'package:apidog/models/dogdata.dart';
import 'package:flutter/material.dart';
// ignore: unused_import
import 'package:http/http.dart' as http;
import 'dart:convert';

class Api extends StatefulWidget {
  //se convierte en un objeto dart
  Future<Dogdata> fetchDogdata() async {
    final response =
        await http.get(Uri.parse('https://dog.ceo/api/breed/hound/images'));

    if (response.statusCode == 200) {
      // If the server did return a 200 OK response,
      // then parse the JSON.
      return Dogdata.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');
    }
  }

  //Api({Key? key}) : super(key: key);

  @override
  State<Api> createState() => _ApiState();
}

class _ApiState extends State<Api> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FutureBuilder(
          future: widget.fetchDogdata(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.hasData) {
              final lista = (snapshot.data["message"] as List);
              return ListView.builder(
                itemCount: lista.length,
                itemBuilder: (BuildContext context, int index) {
                  return Image.network(lista[index]);
                },
              );
            } else {
              return CircularProgressIndicator();
            }
          },
        ),
      ),
    );
  }
}

here the external code of the model.

class Dogdata {
  final String imagen;

  const Dogdata({
    required this.imagen,
  });

//crea un archivo json
  factory Dogdata.fromJson(Map<String, dynamic> json) {
    return Dogdata(
      imagen: json['message'],
    );
  }
}
flutter

1 Answers

  1. Best Answer

    I see some errors:

    • first the asynchronous loading method should be in the State, not in the StatefulWidget.
    • the DogData class should only handle the properties of each object, that is, only the image, not the list (although it could be changed).
    • you need to return a list of DogData for the Future.
    • specifies the data type of the future.
    • json data decoding failed.

    It would be like this:

    class Api extends StatefulWidget {
  //Api({Key? key}) : super(key: key);

  @override
  State<Api> createState() => _ApiState();
}

class _ApiState extends State<Api> {
  //se convierte en un objeto dart
  Future<List<Dogdata>> fetchDogdata() async {
    final response =
        await http.get(Uri.parse('https://dog.ceo/api/breed/hound/images'));

    if (response.statusCode == 200) {
      // If the server did return a 200 OK response,
      // then parse the JSON.
      final data = jsonDecode(response.body);
      // este es un array de Strings
      final list = data['message'] as List;
      // pasando la data a objetos DogData, recorriendo los strings y transformandolos a objeto
      return list.map((e) => Dogdata(imagen: e)).toList();
    } else {
      // If the server did not return a 200 OK response,
      // then throw an exception.
      throw Exception('Failed to load album');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FutureBuilder<List<Dogdata>>(
          future: fetchDogdata(),
          builder:
              (BuildContext context, AsyncSnapshot<List<Dogdata>> snapshot) {
            if (snapshot.hasData) {
              final lista = snapshot.data!;
              return ListView.builder(
                itemCount: lista.length,
                itemBuilder: (BuildContext context, int index) {
                  return Image.network(lista[index].imagen);
                },
              );
            } else {
              return const CircularProgressIndicator();
            }
          },
        ),
      ),
    );
  }
}

class Dogdata {
  final String imagen;

  const Dogdata({
    required this.imagen,
  });
}

    Result:

    enter image description here

    • 2