Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Explicar melhor Future, Json, Builder

Vou listar as dificuldades para ajudar a melhorar

  1. Ficou difícil identificar a pasta assets para fazer download, mas consegui baixando o projeto feito pela professora e copiando a pasta.

  2. Essa é importante!! Na aula 4 - 4, não consegui entender como foi criado o arquivo json com aquelas imagens. Então, como criar um arquivo JSON?

  3. Cheguei a assistir a aula 4 - 4, 2 vezes e ainda sim encontro dificuldade para criar o método builder sozinho!

Gostaria que ajudasse com uma explicação um pouco melhor de future e builder por gentileza, mas além dessa parte o desenvolvimento do curso está sendo muito bom :)

1 resposta
solução!

Olá Rafael, tudo bem com você?

Em relação a primeira, já estarei pedindo para criar um tópico com o link dos assets necessários para continuar o projeto :)

A primeira dica que eu te dou seria seguir a Formação Flutter, todo esse conteúdo que você perguntou vai ser passado de maneira mais calma, em várias seções e em mais cursos, de forma que fique bem claro o que é cada parte, me ajudou bastante quando eu estava aprendendo flutter =D

Em relação a segunda dúvida, você poderia explicar um pouco melhor o que você quis dizer?

Um JSON é apenas um arquivo texto normal composto por chave e valor, que iremos transformar em um objeto de uma classe onde cada chave será um atributo, e teremos um valor associado:

{
    "receita": "Nome Da Receita",
    "ingredientes": "Um texto",
    "foto": "assets/images/receita.jpg"
}

Na verdade, normalmente esse é o retorno de um servidor que estamos buscando dados, para o curso, a instrutora utilizou esse arquivo estático e o truque foi colocar o caminho da imagem baseado no projeto (assets/images) dessa quando executava o método para criar a imagem ele ia na pasta do projeto buscar

Normalmente o que teremos é uma imagem retornada em formato de URL:

"foto": "https://cdn.pixabay.com/photo/2016/08/20/05/36/avatar-1606914_960_720.png"

A única diferença é que no método que criar a imagem ao invés de utilizar: Image.asset(imagem, iriamos utilizar NetworkImage(Imagem

Cheguei a assistir a aula 4 - 4, 2 vezes e ainda sim encontro dificuldade para criar o método builder sozinho!

Vou juntar essa pergunta com a questão do Future que você perguntou, a grande característica dessa ferramenta é que estamos pedindo um valor futuro, e o nosso código seguirá a execução, por exemplo utilizando o Dartpad:

Future buscarAlunos(){
  return Future.delayed(Duration(seconds: 3), () => print(["Jose", "Carlos", "Lucas"]));
}
void main(){
    buscarAlunos();
    print("Alunos buscados, finalizando a execução!");
}

Se olharmos no console teremos:

Alunos buscados finalizando a execução
Jose, Carlos, Lucas

Isso porque o nosso código mandou executar a função que devolve um Future e já foi para a próxima linha, se quiséssemos ter uma execução síncrona teríamos que utilizar uma função do Future chamado then, que indica que iremos tomar aquela ação apenas quando ele terminar, por exemplo:

void main(){
  buscarAlunos().then((data) => print("Alunos buscados, finalizando a execução"));
}

Teremos mais ou menos a mesma coisa com o FutureBuilder, ele precisa de 2 coisas:

  • future: É a função a ser executada que irá nos trazer um valor futuro, no caso do curso foi o loadString
  • builder: É o método que será executado para cada resposta do Future, podemos ter uma pequena relação com o then que mostrei acima, e sempre devolveremos um Widget

Dentro do curso da Formação tem 1 seção para falar sobre todas essas particularidades, mas a grande questão é o future executa a função e vai passar os valores para o builder dentro do parâmetro snapshot, então a lógica é que teremos nossos dados dentro de snapshot.data:

Um exemplo:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
        // future: buscarAlunos(),
        future: unicoValor(),
        builder: (context, snapshot){
          if(snapshot.data != null){
            return Text(snapshot.data, style: TextStyle(fontSize: 50.0, color: Colors.red));
          }
        //   if(snapshot.data != null){
        //   List<String> respostaDaFuncao = snapshot.data;
        //   return ListView.builder(
        //     itemCount: respostaDaFuncao.length,
        //     itemBuilder: (context, index) => Text(respostaDaFuncao[index]));
        // }
        return Text("Carregando...");
        }

      ),
    );
  }

  Future unicoValor(){
    return Future.delayed(Duration(seconds: 2), () => "Olá Mundo!!!");
  }
  // Future buscarAlunos(){
  //   return Future.delayed(Duration(seconds: 3), () => ["Lucas", "Rodrigo", "Rebecca", "Lais"]);
  // }
}

O código comentado é parecido com o feito pela instrutora, temos uma ação futura a ser realizada que nos devolve uma lista, iremos obter ela através do snapshot.data e iremos criar um widget que gera uma Lista

O código não comentado é para mostrar que não precisamos sempre devolver uma lista, estou apenas buscando uma frase, e devolvendo um texto com o FutureBuilder mas a lógica é a mesma :)

Esse if(snapshot.data != null) é porque o builder() é executado mais de uma vez, e enquanto não temos a resposta ele é nulo, para não ter o erro podemos colocar essa verificação :)

Conseguiu Compreender? Abraços e Bons Estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software