Como obter dados da internet no Flutter usando HTTP

Ver planos

import 'package:http/http.dart' as http;
Future<void> getFilmes() async {
 final response = await http.get(Uri.parse(
      'https://raw.githubusercontent.com/alura-cursos/obtendo_dados_com_flutter_http/main/filmes.json'));
print(response.body);
}

[
  {
    "nome": "A Viagem de Chihiro",
    "imagem": "HTTPs://br.web.img3.acsta.net/pictures/210/527/21052756_20131024195513383.jpg"
  },
  {
    "nome": "Ponyo",
    "imagem": "HTTPs://m.media-amazon.com/images/I/61ry7KsRfIS._AC_SL1000_.jpg"
  },  
  {
    "nome": "Meu Amigo Totoro",
    "imagem": "HTTPs://i0.wp.com/studioghibli.com.br/wp-content/uploads/2020/04/meu-amigo-totoro-dvd-vers%C3%A1til.jpg"
  },  
  {
    "nome": "Princesa Mononoke",
    "imagem": "HTTPs://i0.wp.com/studioghibli.com.br/wp-content/uploads/2020/04/Princesa-Mononoke-DVD-capa-vers%C3%A1til.jpg"
  },  
  {
    "nome": "Castelo Animado",
    "imagem": "HTTPs://capas.nyc3.cdn.digitaloceanspaces.com/650-5000245618508.jpg"
  },  
  {
    "nome": "A Viagem de Chihiro",
    "imagem": "HTTPs://br.web.img3.acsta.net/pictures/210/527/21052756_20131024195513383.jpg"
  },
  {
    "nome": "As Memórias de Marnie",
    "imagem": "HTTPs://www.itaucinemas.com.br/_img/_filmes/1859_capa.jpg"
  }
]

class Filme {
  String nome;
  String imagem;
  Filme({
    required this.nome,
    required this.imagem,
  });
  Filme.fromJson(Map<String, dynamic> json)
      : nome = json['nome'].toString(),
        imagem = json['imagem'].toString();
}

import 'package:http/http.dart' as http;
import 'dart:convert';
import '../models/filme.dart';
Future<List<Filme>> getFilmes() async {
  final response = await http.get(Uri.parse(
    'https://raw.githubusercontent.com/alura-cursos/obtendo_dados_com_flutter_http/main/filmes.json'));
  final json = jsonDecode(response.body);
  return List<Filme>.from(json.map((elemento) {
      return Filme.fromJson(elemento);
  })); 
}

import 'package:http/http.dart' as http;
import 'dart:convert';
import '../models/filme.dart';
Future<List<Filme>> getFilmes() async {
  final response = await http.get(Uri.parse(
      'https://raw.githubusercontent.com/alura-cursos/obtendo_dados_com_flutter_http/main/filmes.json'));
  if (response.statusCode == 200) {
    final json = jsonDecode(response.body);
    return List<Filme>.from(json.map((elemento) {
      return Filme.fromJson(elemento);
    }));
  } else {
    return Future.error("Ops! Um erro ocorreu.");
  }
}

FutureBuilder(
        future: futureFilmes,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            final filmes = snapshot.data as List<Filme>;
            return ListaFilmes(filmes: filmes);
          } else if (snapshot.hasError) {
            return Center(
              child: Text(
                snapshot.error.toString(),
                style: const TextStyle(
                  fontSize: 16,
                ),
              ),
            );
          }
          return const Center(
            child: CircularProgressIndicator(),
          );
        },
      ),

import 'package:flutter/material.dart';
import '../components/lista_filmes.dart';
import '../models/filme.dart';
import '../repositories/repository.dart';
class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);
  @override
  State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
  Future<List<Filme>>? futureFilmes;
  @override
  void initState() {
    futureFilmes = getFilmes();
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Filmes Studio Ghibli"),
        centerTitle: true,
      ),
      body: FutureBuilder(
        future: futureFilmes,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            final filmes = snapshot.data as List<Filme>;
            return ListaFilmes(filmes: filmes);
          } else if (snapshot.hasError) {
            return Center(
              child: Text(
                snapshot.error.toString(),
                style: const TextStyle(
                  fontSize: 16,
                ),
              ),
            );
          }
          return const Center(
            child: CircularProgressIndicator(),
          );
        },
      ),
    );
  }
}

import 'package:flutter/material.dart';
import '../models/filme.dart';
import 'card_filme.dart';
class ListaFilmes extends StatelessWidget {
  const ListaFilmes({
    Key? key,
    required this.filmes,
  }) : super(key: key);
  final List<Filme> filmes;
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      padding: const EdgeInsets.all(16),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 12,
        mainAxisSpacing: 10,
        childAspectRatio: 3 / 4,
      ),
      itemCount: filmes.length,
      itemBuilder: ((context, index) {
        final filme = filmes[index];
        return CardFilme(
          nome: filme.nome,
          imagem: filme.imagem,
        );
      }),
    );
  }
}

import 'package:flutter/material.dart';
class CardFilme extends StatelessWidget {
  final String nome;
  final String imagem;
  const CardFilme({
    Key? key,
    required this.nome,
    required this.imagem,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                image: DecorationImage(
                  fit: BoxFit.cover,
                  image: NetworkImage(imagem),
                ),
                boxShadow: const [
                  BoxShadow(
                    color: Colors.blueGrey,
                    blurRadius: 4,
                    offset: Offset(0, 2),
                  )
                ]),
          ),
        ),
        const SizedBox(height: 8.0),
        Text(
          nome,
          style: const TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.w500,
          ),
        ),
      ],
    );
  }
}

├── lib
│   ├── components
│   │     └── card_filme.dart
│   │      └── lista_filmes.dart
│   ├── models
│   │   └── filme.dart
│   ├── repositories
│   │   └──repository.dart
│   ├── screens
│   │   └──home.dart
│   └── main.dart

Como obter dados da internet no Flutter usando HTTP | Alura Cursos Online

Carreiras

Área de Interesse

Aulas ao Vivo - Skills & Go

Senioridade

Eventos Alura

Conteúdos

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Carreiras

Área de Interesse

Aulas ao Vivo - Skills & Go

Senioridade

Eventos Alura

Conteúdos

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Como obter dados da internet no Flutter usando HTTP

Jhoisnáyra Vitória Rodrigues de Almeida

Explore por tópico

Conhecimentos prévios

Entendendo nosso projeto: O aplicativo Filmes Studio Ghibli

Conhecendo o pacote `HTTP`

Passo 1: Instalando o pacote

Passo 2: Obtendo dados da Web com GET

Entendendo os dados que recebemos

Passo 3: Convertendo dados em objetos

Aplicando o model que criamos

Tratando exceções na aplicação

Passo 4: Exibindo resultados na tela

Estrutura do projeto e Widgets criados

Conclusão

Carreiras

Área de Interesse

Aulas ao Vivo - Skills & Go

Senioridade

Eventos Alura

Conteúdos

Carreiras

Área de Interesse

Aulas ao Vivo - Skills & Go

Senioridade

Eventos Alura

Conteúdos

Jhoisnáyra Vitória Rodrigues de Almeida

Inscreva-se em nossa Newsletter

Explore por tópico

Conhecimentos prévios

Entendendo nosso projeto: O aplicativo Filmes Studio Ghibli

Conhecendo o pacote HTTP

Passo 1: Instalando o pacote

Passo 2: Obtendo dados da Web com GET

Entendendo os dados que recebemos

Passo 3: Convertendo dados em objetos

Aplicando o model que criamos

Tratando exceções na aplicação

Passo 4: Exibindo resultados na tela

Estrutura do projeto e Widgets criados

Conclusão

Leia também

Conhecendo o pacote `HTTP`