Flutter - Consumindo API

Afluentes: Dispositivos Móveis; Usabilidade, desenvolvimento web, mobile e jogos

Pré-requisitos

Primeiro vamos criar nosso projeto e incluir alguns pacotes, então digite na pasta do projeto:

flutter create movies
cd movies
flutter pub add url_launcher
flutter pub add flutter_linkify
flutter pub add http

Código

O Aplicativo faz uma requisição de filmes em uma API. Tal como fizemos no Consumindo API com React.js, só que agora em Flutter.

O arquivo main.dart é simples e ele só inicia a página principal.

main.dart

 1import 'package:flutter/material.dart';
 2import 'movies.dart';
 3
 4void main() => runApp(const App());
 5
 6class App extends StatelessWidget {
 7  const App({super.key});
 8
 9  @override
10  build(context) {
11    return const MaterialApp(
12      title: 'Filmes',
13      home: MoviesListView(),
14    );
15  }
16}

api.dart

O arquivo api.dart faz referência à API TVMaze e gerencia o objeto de transferência de um filme.

 1import 'package:http/http.dart' as http;
 2
 3// A URL da API
 4const baseUrl = "https://api.tvmaze.com/search/shows?q=";
 5
 6// Criamos a classe da nossa API. O nome você que escolhe. Fazemos aqui
 7// uma requisição get (como fizemos no react) e passamos a URL, mas usamos
 8// um Uri.parse pra transformar a string em uma URI.
 9class API {
10  static Future getMovie(search) async {
11    var url = baseUrl + search;
12    return await http.get(Uri.parse(url));
13  }
14}
15
16// Criamos uma classe para representar os objetos que vão conter os filmes
17// e colocamos só os campos que vamos usar.
18class Movie {
19  int id;
20  String name;
21  String link;
22  String image;
23
24  Movie(this.id, this.name, this.link, this.image);
25
26  Movie.fromJson(Map json)
27      : id = json['show']['id'],
28        name = json['show']['name'],
29        link = json['show']['url'],
30        image = json['show']['image']['medium'];
31}

movies.dart

O arquivo movie.dart conteém a lista de filmes no formato JSON que ele vai trazer da API e cria uma LIST com objetos do tipo Movie criado no arquivo api.dart.

 1import 'package:flutter/material.dart';
 2import 'dart:convert';
 3import 'api.dart';
 4import 'detail.dart';
 5
 6// Vamos precisar de uma aplicação com estado
 7class MoviesListView extends StatefulWidget {
 8  const MoviesListView({super.key});
 9
10  @override
11  State<MoviesListView> createState() => _MoviesListViewState();
12}
13
14class _MoviesListViewState extends State<MoviesListView> {
15  List<Movie> movies = List<Movie>.empty(); // Lista dos filmes
16  String search = "star%20trek"; // Plavra chave da pesquisa
17
18  // Construtor, atualiza com setState a lista de filmes.
19  _MoviesListViewState() {
20    API.getMovie(search).then((response) {
21      setState(() {
22        Iterable lista = json.decode(response.body); // Usamos um iterator
23        movies = lista.map((model) => Movie.fromJson(model)).toList();
24      });
25    });
26  }
27
28  // Método build sobrecarregado que vai construir nossa página
29  @override
30  Widget build(BuildContext context) {
31    return Scaffold(
32      appBar: AppBar(
33        title: const Text("Lista de Filmes"),
34      ),
35      // Aqui vem nossa lista
36      body: ListView.builder(
37        itemCount: movies.length, // quantidade de elementos
38        // Os elementos da lista
39        itemBuilder: (context, index) {
40          // Vai ser um item de lista tipo ListTile
41          return ListTile(
42            // Uma imagem de avatar redondinho com a imagem do filme
43            leading: CircleAvatar(
44              backgroundImage: NetworkImage(
45                movies[index].image,
46              ),
47            ),
48            // No título é o nome do filme
49            title: Text(
50              movies[index].name,
51              style: const TextStyle(
52                fontSize: 20.0,
53                color: Colors.black,
54              ),
55            ),
56            // No subtítulo colocamos o link
57            subtitle: Text(movies[index].link),
58            // Ação de clicar
59            onTap: () {
60              // Abrimos uma nova página, outra classe, que está no arquivo
61              // detail.dart. Veja que é um MaterialPageRote, tipo o
62              // MaterialApp, só que é só uma página nova.
63              Navigator.push(
64                context,
65                MaterialPageRoute(
66                  builder: (context) => DetailPage(movies[index]),
67                ),
68              );
69            },
70          );
71        },
72      ),
73    );
74  }
75}

details.dart

Esse arquivo contém a página que é chamada para mostrar detalhes de um filme depois que você clicar nele na lista de filmes de movies.dart.

 1import 'package:flutter/material.dart';
 2import 'package:movies/details.dart';
 3import 'dart:convert';
 4import 'api.dart';
 5
 6// Uma página para mostrar os detalhes de cada filme. Passamos o objeto
 7// do filme como parâmetro no constructor
 8class MoviesListView extends StatefulWidget {
 9  const MoviesListView({super.key});
10
11  @override
12  State<StatefulWidget> createState() => _MoviesListViewState();
13}
14
15class _MoviesListViewState extends State<MoviesListView> {
16  List<Movie> movies = List<Movie>.empty();
17  String search = "attack on titan";
18
19  _MoviesListViewState() {
20    API.getMovie(search).then((response) {
21      setState(() {
22        Iterable list = json.decode(response.body);
23        movies = list.map((model) => Movie.fromJson(model)).toList();
24      });
25    });
26  }
27
28  @override
29  Widget build(BuildContext context) {
30    return Scaffold(
31      appBar: AppBar(
32        title: const Text('Lista de Filmes'),
33      ),
34      body: ListView.builder(
35        itemCount: movies.length,
36        itemBuilder: (context, index) {
37          return ListTile(
38            leading: CircleAvatar(
39              backgroundImage: NetworkImage(
40                movies[index].image,
41              ),
42            ),
43            title: Text(
44              movies[index].name,
45              style: const TextStyle(
46                fontSize: 20.0,
47                color: Colors.black,
48              ),
49            ),
50            subtitle: Text(movies[index].url),
51            onTap: () {
52              Navigator.push(
53                context,
54                MaterialPageRoute(
55                  builder: (context) => DetailPage(movies[index]),
56                ),
57              );
58            },
59          );
60        },
61      ),
62    );
63  }
64}

Atividades

Desafio 1

1. Implemente o exemplo anterior em seu computador.
2. Adicione um campo texto e um botão "Procurar". Quando clicar no botão procurar, atualiza a lista de filmes conforme a string do campo texto.

Desafio 2

Implemente uma aplicação que consuma alguma outra API de sua escolha. Se você já estiver trabalhando com criação de microsserviços web na disciplina de Sistemas Distribuídos, você pode criar uma API pra consumir no flutter.