No internet connection
  1. Home
  2. Dúvidas Gerais

Questionário de Flutter: Consumindo Api Json-Serve.

Por Giselly Rock @gisellyrock
    2023-09-28 13:18:13.871Z2023-09-30 18:46:10.252Z

    No intuito de ajudar a todas nessa terceira task, fiz o questionário da sétima aula de Flutter. Espero que gostem! =)

    Qual biblioteca é importada com a linha import 'package:http/http.dart' as http no código fornecido?
    a) http
    b) dart:convert
    c) MaterialApp

    Resposta: a) http

    Qual é o objetivo da biblioteca importada com import 'dart:convert';?
    a) Realizar solicitações HTTP.
    b) Fornecer funções para codificar e decodificar dados em formato JSON.
    c) Definir temas para aplicativos Flutter.

    Resposta: b) Fornecer funções para codificar e decodificar dados em formato JSON.

    O que a função main() faz no código fornecido?
    a) Define a interface do usuário do aplicativo.
    b) Faz solicitações HTTP para uma API externa.
    c) Serve como o ponto de entrada do aplicativo Flutter.

    Resposta: c) Serve como o ponto de entrada do aplicativo Flutter.

    Qual é o propósito da classe MyApp no código fornecido?
    a) Definir temas para o aplicativo.
    b) Representar a tela principal do aplicativo.
    c) Fornecer funções para codificar dados JSON.

    Resposta: a) Definir temas para o aplicativo.

    Qual método é obrigatório em widgets StatelessWidget?
    a) build()
    b) createState()
    c) initState()

    Resposta: a) build()

    Qual é o propósito do método createState em widgets StatefulWidget?
    a) Criar o estado do widget.
    b) Criar a interface do usuário.
    c) Inicializar o aplicativo.

    Resposta: a) Criar o estado do widget.

    Qual é o propósito do FutureBuilder no código?
    a) Construir interfaces de usuário com base em um futuro.
    b) Fazer solicitações HTTP para a API.
    c) Definir temas para o aplicativo.

    Resposta: a) Construir interfaces de usuário com base em um futuro.

    Qual widget é usado para criar uma lista rolável de postagens?
    a) Card
    b) ListView.builder
    c) Scaffold

    Resposta: b) ListView.builder

    Qual classe é usada para representar uma postagem obtida da API?
    a) ConteudoPagina
    b) MyApp
    c) Post

    Resposta: c) Post

    Analise o código:
    Future<List> obterPostagens() async {
    String url = "https://jsonplaceholder.typicode.com/posts";

    O que a função obterPostagens faz no código?
    a) Define temas para o aplicativo.
    b) Faz uma solicitação HTTP para a URL da API.
    c) Cria uma instância de MyApp.

    Resposta: b) Faz uma solicitação HTTP para a URL da API.

    Qual é a URL da API usada em obterPostagens?
    a) "https://api.example.com"
    b) "https://jsonplaceholder.typicode.com/posts"
    c) "http://localhost:3000/posts"

    Resposta: b) "https://jsonplaceholder.typicode.com/posts"

    O que a função json.decode faz no código?
    a) Codifica dados em formato JSON.
    b) Decodifica dados em formato JSON.
    c) Define temas para o aplicativo.

    Resposta: b) Decodifica dados em formato JSON.

    Qual é o objetivo da lista postagens em obterPostagens?
    a) Armazenar widgets de interface do usuário.
    b) Armazenar as postagens obtidas da API.
    c) Armazenar temas de cores para o aplicativo.

    Resposta: b) Armazenar as postagens obtidas da API.

    postagens.add(p) => O que a função postagens.add(p) faz em obterPostagens?
    a) Adiciona um novo widget à interface do usuário.
    b) Adiciona uma postagem à lista de postagens.
    c) Remove uma postagem da lista de postagens.

    Resposta: b) Adiciona uma postagem à lista de postagens.

    O que é retornado pela função obterPostagens?
    a) Um widget Scaffold.
    b) Uma lista de postagens obtidas da API.
    c) Um tema de cores para o aplicativo.

    Resposta: b) Uma lista de postagens obtidas da API.

    Qual é o objetivo da linha int? userId; na classe Post?
    a) Definir o título da postagem.
    b) Armazenar o ID do usuário da postagem.
    c) Representar um tema de cores.

    Resposta: b) Armazenar o ID do usuário da postagem.

    Qual é o propósito da linha child: Text("Id: ${snapshot.data![index].id}"), na construção dos widgets Card?
    a) Definir o título da postagem.
    b) Exibir o ID da postagem.
    c) Adicionar uma imagem à postagem.

    Resposta: b) Exibir o ID da postagem.

    Essa estava fácil, né? Espero que tenham gabaritado.
    =)

    Segue abaixo uma revisão de todo o código passado na aula do dia 30.08.
    import 'package:http/http.dart' as http;
    Esta linha está importando a biblioteca http para fazer solicitações HTTP. Ela é renomeada como http para evitar conflitos de nome com outros pacotes que podem ter classes com o mesmo nome.

    import 'dart:convert';
    Esta linha está importando a biblioteca dart:convert, que fornece funções para codificar e decodificar dados em formato JSON.

    void main() {
    runApp(const MyApp());
    }

    Esta é a função main, que é o ponto de entrada do seu aplicativo Flutter. Ela chama runApp, passando uma instância da classe MyApp como argumento. Isso inicia a execução do seu aplicativo.

    class MyApp extends StatelessWidget {
    const MyApp({super.key});

    Aqui, você está criando a classe MyApp, que é um widget StatelessWidget. MyApp é o widget raiz do seu aplicativo e define o tema do aplicativo.

    @override
    Widget build(BuildContext context) {
    return MaterialApp(
    theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.purpleAccent,
    ),
    ),
    home: const Pagina(),
    );
    }
    }

    O método build é obrigatório em widgets StatelessWidget. Ele cria a interface do usuário do aplicativo. Neste caso, você está retornando um widget MaterialApp, que define o tema do aplicativo como roxo (purpleAccent) e define Pagina como a tela inicial do aplicativo.
    class Pagina extends StatefulWidget {
    const Pagina({super.key});
    Aqui, você está criando a classe Pagina, que é um widget StatefulWidget. Pagina é a tela principal do seu aplicativo e é onde você exibirá as postagens após obtê-las da API.

    **
    @override
    State createState() {
    return ConteudoPagina();
    }
    }**
    O método createState é obrigatório em widgets StatefulWidget. Ele cria e retorna uma instância de ConteudoPagina, que será o estado da tela Pagina.

    class ConteudoPagina extends State {
    @override
    Widget build(BuildContext context) {

    Aqui, você está criando a classe ConteudoPagina, que estende State. É aqui que você define a interface do usuário da tela Pagina.

    return Scaffold(
    appBar: AppBar(
    title: const Text("7 aula de Flutter"),
    ),

    Você está retornando um widget Scaffold, que é uma estrutura básica para criar interfaces de aplicativo com barras de aplicativo, gavetas de navegação, entre outros. Aqui, você está definindo uma barra de aplicativo com um título.

    body: FutureBuilder(
    future: obterPostagens(),
    builder: (context, snapshot) {

    Você está usando um FutureBuilder, que é um widget que permite construir uma interface do usuário com base no resultado de um futuro. O futuro que você está passando é o resultado da função obterPostagens(), que fará uma solicitação à API.

    return ListView.builder(
    itemCount: snapshot.data!.length,
    itemBuilder: (context, index) {
    return Card(
    child: Text("Id: ${snapshot.data![index].id}"),
    );
    },
    );

    Aqui, você está construindo uma lista de postagens com base nos dados obtidos do snapshot do FutureBuilder. Você está usando ListView.builder para criar uma lista rolável de postagens, onde cada postagem é exibida em um Card com seu ID.

    class Post {
    int? userId;
    int? id;
    String? title;
    String? body;
    }

    Você está definindo a classe Post, que representa uma postagem obtida da API. Ela possui propriedades para userId, id, title e body.

    Future<List> obterPostagens() async {
    String url = "https://jsonplaceholder.typicode.com/posts";

    Você está definindo uma função assíncrona obterPostagens() que será usada para fazer uma solicitação HTTP para a URL da API.

    **
    var requisicao = await http.get(Uri.parse(url));**

    Você está fazendo uma solicitação GET assíncrona à URL da API usando o pacote http.

    var dados = json.decode(requisicao.body);

    Você está decodificando os dados da resposta da API, que estão em formato JSON, usando json.decode e armazenando-os na variável dados.

    List postagens = [];

    Você está criando uma lista vazia de Post, onde você armazenará as postagens obtidas da API.
    for (var objeto in dados) {

    Post p = Post();
    Você está percorrendo os dados obtidos da API e, para cada objeto, criando uma instância de Post chamada p.

    p.userId = objeto["userId"];
    p.id = objeto["id"];
    p.title = objeto["title"];
    p.body = objeto["body"];

    Você está atribuindo os valores do objeto JSON às propriedades da instância de Post criada.

    **
    postagens.add(p);**
    Você está adicionando a instância de Post à lista de postagens.

    return postagens;
    Finalmente, você retorna a lista de postagens obtidas da API como resultado da função obterPostagens().
    Isso deve explicar cada linha do seu código em detalhes. O código faz uma solicitação à API, obtém os dados JSON, os decodifica e os exibe em uma lista de cartões na tela Pagina.

    • 9 respostas
    1. Ana Karolina Souza @anakarolina
        2023-09-28 13:31:00.301Z

        Muito obrigada! Vai ajudar demais nesta terceira task!

        1. Em resposta agisellyrock:
          @Grasiele
            2023-09-28 21:45:54.426Z

            Oh amiga você é sensacional, obrigada!!

            1. Em resposta agisellyrock:
              Polyanna Santana @Polyanna
                2023-09-28 22:07:31.195Z

                Muito bom como sempre!

                1. Em resposta agisellyrock:
                  Karine Barbosa Farias @KarineBF
                    2023-09-29 12:52:07.988Z

                    Um ótimo recurso de estudo!!

                    1. Em resposta agisellyrock:
                      Ana Paula Gomes Guimarães @anaapgg
                        2023-09-29 23:35:51.492Z

                        Muito bom esse material, obrigada por compartilhar!

                        1. T
                          Em resposta agisellyrock:
                          Tahene Carvalho @tahene
                            2023-10-05 03:23:33.637Z

                            Ótimas informações!

                            1. Em resposta agisellyrock:
                              Renata Rodrigues @Usarname
                                2023-10-09 17:13:17.982Z

                                Muito bom, adorei!!!

                                1. Em resposta agisellyrock:
                                  Débora Barbosa @deborabarbosa
                                    2023-10-09 17:25:35.403Z

                                    Muito obrigada!

                                    1. Em resposta agisellyrock:
                                      Polyanna Santana @Polyanna
                                        2023-10-10 18:41:27.519Z

                                        muito bom. obrigada!