Questionário de Flutter: Consumindo Api Json-Serve.
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.
Ana Karolina Souza @anakarolinaMuito obrigada! Vai ajudar demais nesta terceira task!
Em resposta agisellyrock⬆:Karine Barbosa Farias @KarineBFUm ótimo recurso de estudo!!
Em resposta agisellyrock⬆:Ana Paula Gomes Guimarães @anaapggMuito bom esse material, obrigada por compartilhar!



