0

Não estou conseguindo listar os objetos que estão vindo da minha API back-end num aplicativo flutter. Ele não gerar erros ele simplesmente não carrega. Eu sou novo como desenvolvedor flutter e preciso de ajuda.

Esse é meu endPoint que carrega meu objeto.

localhost:8080/discipulos

Essa é minha lista

{
    "content": [
        {
            "codigo": 1,
            "nome": "Wladimir",
            "logradouro": "Rua das tantas",
            "telefone": "(11)93434-2413",
            "dataNascimento": "2017-02-10",
            "origem": "Convite",
            "tipo_interesse": {
                "codigo": 1,
                "modelo": "NIVEL_A",
                "descricao": "Frequenta a igreja e não há impedimento para ser batizado"
            },
            "tipo_atendimento": {
                "codigo": 1,
                "modelo": "ATENDIMENTO_1",
                "descricao": "Pequeno Grupo"
            },
            "discipulador": {
                "codigo": 1,
                "nome": "Flávia",
                "ocupacao": {
                    "codigo": 1,
                    "nome": "Membro"
                }
            }
        },
        {
            "codigo": 2,
            "nome": "Paulo da cunha",
            "logradouro": "Rua das tantasjdscnsdnjkjdsnkfjnsd",
            "telefone": "(51)93434-2413",
            "dataNascimento": "2017-02-10",
            "origem": "Convite",
            "tipo_interesse": {
                "codigo": 1,
                "modelo": "NIVEL_A",
                "descricao": "Frequenta a igreja e não há impedimento para ser batizado"
            },
            "tipo_atendimento": {
                "codigo": 1,
                "modelo": "ATENDIMENTO_1",
                "descricao": "Pequeno Grupo"
            },
            "discipulador": {
                "codigo": 1,
                "nome": "Flávia",
                "ocupacao": {
                    "codigo": 1,
                    "nome": "Membro"
                }
            }
        },
        {
            "codigo": 3,
            "nome": "Marcelo Das tantas",
            "logradouro": "Rua das tantasjcnsdkjncdskjncsdk",
            "telefone": "(81)93434-2413",
            "dataNascimento": "2017-02-10",
            "origem": "Convite",
            "tipo_interesse": {
                "codigo": 1,
                "modelo": "NIVEL_A",
                "descricao": "Frequenta a igreja e não há impedimento para ser batizado"
            },
            "tipo_atendimento": {
                "codigo": 1,
                "modelo": "ATENDIMENTO_1",
                "descricao": "Pequeno Grupo"
            },
            "discipulador": {
                "codigo": 1,
                "nome": "Flávia",
                "ocupacao": {
                    "codigo": 1,
                    "nome": "Membro"
                }
            }
        }
    ],
    "pageable": {
        "sort": {
            "empty": true,
            "sorted": false,
            "unsorted": true
        },
        "offset": 0,
        "pageSize": 20,
        "pageNumber": 0,
        "paged": true,
        "unpaged": false
    },
    "last": true,
    "totalElements": 3,
    "totalPages": 1,
    "size": 20,
    "number": 0,
    "sort": {
        "empty": true,
        "sorted": false,
        "unsorted": true
    },
    "first": true,
    "numberOfElements": 3,
    "empty": false
}

No meu aplicativo flutter está assim;

import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:interessado/components/DiscipulosWidget.dart';
import 'package:http/http.dart' as http;
import 'package:interessado/models/discipulo.dart';

class DiscipuloOverView extends StatelessWidget {

  final _baseURL = 'localhost:8080/discipulos'; /* >>>> aqui é o EnPoint*/
  
  const DiscipuloOverView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    final List<Discipulo> discipulos = []; /* >>>> aqui iniciando a lista*/

    Future<void> loadDiscipulos() async{ 
      /* >>>> Esse é um método que precisa ser chamado, porém não sei como fazer ele ser chamado*/
      /* >>>> Eu não sei se este método está certo*/
      final response = await http.get(Uri.parse(_baseURL));
      Map<String, dynamic> data = jsonDecode(response.body);
      data.forEach((discipulosId, discipulos) {
        Discipulo(
          codigo: discipulos['codigo'],
          nome: discipulos['nome'],
          dataNascimento: discipulos['dataNascimento'],
          logradouro: discipulos['logradouro'],
          origem: discipulos['origem'],
          telefone: discipulos['telefone'],
        );
      });
    }

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.teal,
        title: Text('Lista de Discipulos'),
      ),
      body: ListView.builder(
        /* >>>> Ele precisa ser carregado aqui*/
        itemCount: discipulos.length,
      itemBuilder: (ctx, i) => DiscipulosWidget(discipulo: discipulos[i]),
      )
    );
  }
}
2

1 Resposta 1

1

Vamos lá, fiz algumas alterações no código e vou te explicar melhor.

Como você precisa construir o widget com informações que vem da API, você pode utilizar o FutureBuilder que vai esperar a future resolver e com o resultado dela montar o widget.

Corrigi alguns pontos no seu código:

  • Você estava fazendo a chamada para a API dentro do builder e isso não é nada interessante pois o builder vai executar toda vez que o flutter identificar que precisa fazer o rebuild do mesmo (seja por um setState ou por algum retorno da sua API. No seu código poderia acontecer do build executar novamente após o a future do http.get resolver);

  • Seu método de chamada estava praticamente pronto, o que faltava era adicionar os discípulos no array e retorná-lo;

  • Como explicado anteriormente, para poder montar o widget com o dado da API, utilizei um FutureBuilder que vai aguardar o retorno da API e, com o dado, montar o widget;

  • Utilizando o !snapshot.hasData eu verifico se há dado, caso não, retorno um loading no centro, mesmo caso do snapshot.hasError. Se houver erro, retorna um text no centro da tela com a mensagem de erro;

  • Com o dado pronto (quando o snapshot.hasData for true), verifica se o array de discípulos não está nulo ou não está vazio (sempre verifico se está nulo pois já tive problemas com isso), retorna um ListView.builder com o dado, caso não, retorna um text no centro avisando que não há discípulos.

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

class Discipulo {
  final String? codigo;
  final String? nome;
  final String? dataNascimento;
  final String? logradouro;
  final String? origem;
  final String? telefone;

  Discipulo(
      {this.codigo,
      this.nome,
      this.dataNascimento,
      this.logradouro,
      this.origem,
      this.telefone});
}

class DiscipuloOverView extends StatelessWidget {
  final _baseURL = 'localhost:8080/discipulos'; /* >>>> aqui é o EnPoint*/

  const DiscipuloOverView({Key? key}) : super(key: key);

  Future<List<Discipulo>> loadDiscipulos() async {
    List<Discipulo> discipulos = []; /* >>>> aqui iniciando a lista*/
    /* >>>> Esse é um método que precisa ser chamado, porém não sei como fazer ele ser chamado*/
    /* >>>> Eu não sei se este método está certo*/
    final response = await http.get(Uri.parse(_baseURL));
    Map<String, dynamic> data = jsonDecode(response.body);
    if (response.statusCode == 200) {
      data.forEach((discipulosId, discipulos) {
        discipulos.add(
          Discipulo(
            codigo: discipulos['codigo'],
            nome: discipulos['nome'],
            dataNascimento: discipulos['dataNascimento'],
            logradouro: discipulos['logradouro'],
            origem: discipulos['origem'],
            telefone: discipulos['telefone'],
          ),
        );
      });

      return discipulos;
    }
    return [];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.teal,
        title: const Text('Lista de Discipulos'),
      ),
      body: Column(
        children: [
          Expanded(
            child: FutureBuilder<List<Discipulo>>(
              future: loadDiscipulos(),
              builder: (context, snapshot) {
                if (snapshot.hasError) {
                  return Center(
                    child: Text(
                      snapshot.error.toString(),
                    ),
                  );
                }

                if (!snapshot.hasData) {
                  return const Center(
                    child: CircularProgressIndicator(),
                  );
                }

                List<Discipulo>? discipulos = snapshot.data;

                return discipulos != null && discipulos.isNotEmpty
                    ? ListView.builder(
                        itemCount: discipulos.length,
                        itemBuilder: (_, i) {
                          return Text(discipulos[i].nome!);
                        },
                      )
                    : const Center(
                        child: Text('Ops, sem discipulos'),
                      );
              },
            ),
          ),
        ],
      ),
    );
  }
}

Você deve fazer log-in para responder a esta pergunta.