O Flutter é uma plataforma de desenvolvimento de aplicativos para dispositivos móveis que permite criar aplicativos nativos para Android e iOS usando uma única base de código. Uma das principais vantagens do Flutter é a possibilidade de consumir APIs de terceiros para exibir informações dinâmicas no aplicativo. Neste tutorial, vamos criar um aplicativo Flutter que consome a API do GitHub e exibe uma lista de repositórios. Vamos aprender a instalar o Flutter, adicionar o pacote http, criar uma classe ApiService para fazer as chamadas à API e exibir os dados em uma página ListView. Vamos começar!
1. Instalar o Flutter e as ferramentas de desenvolvimento
Antes de começar a desenvolver o aplicativo, é necessário instalar o Flutter e as ferramentas de desenvolvimento necessárias em seu computador. A documentação do Flutter fornece instruções detalhadas sobre como fazer isso:
Acesse: https://flutter.dev/docs/get-started/install
2. Criar um novo projeto Flutter
Abra o terminal e execute o comando flutter create seguido pelo nome do projeto para criar um novo projeto Flutter:
flutter create ninelabs_repositoriesIsso vai criar uma pasta com o nome do projeto que contém todos os arquivos necessários para o aplicativo.
3. Adicionar o pacote http
O Flutter possui um pacote chamado http que pode ser usado para fazer chamadas HTTP. Para adicioná-lo ao projeto, basta incluir a seguinte linha no arquivo pubspec.yaml:
dependencies:
flutter:
sdk: flutter
http: ^0.13.54. Criar a classe ‘ApiService’
Na pasta lib, crie um novo arquivo chamado api_service.dart. Neste arquivo, crie uma classe ApiService que será responsável por fazer as chamadas à API do GitHub. Adicione o código abaixo à classe:
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:ninelabs_repositories/repository_model.dart';
class ApiService {
static const baseUrl = 'api.github.com';
static Future<dynamic> getRepositories() async {
var url = Uri.https(baseUrl, '/repositories');
var response = await http.get(url);
var repositories = (json.decode(response.body))
.map((item) => Repository.fromJson(item))
.toList();
// print(repositories);
return repositories;
}
}Essa classe possui um método estático chamado getRepositories que faz uma chamada GET à API do GitHub e retorna uma lista de repositórios.
5. Criar a página que exibe a lista de repositórios
Na pasta lib, crie um novo arquivo chamado repositories_page.dart. Neste arquivo, crie uma classe RepositoriesPage que herda de StatefulWidget e exibe a lista de repositórios em uma lista ListView. Adicione o código abaixo à classe:
import 'package:flutter/material.dart';
import 'package:ninelabs_repositories/api_service.dart';
class RepositoriesPage extends StatefulWidget {
const RepositoriesPage({super.key});
@override
// ignore: library_private_types_in_public_api
_RepositoriesPageState createState() => _RepositoriesPageState();
}
class _RepositoriesPageState extends State<RepositoriesPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Repositórios'),
),
body: _buildBody(),
);
}
Widget _buildBody() {
return FutureBuilder(
future: ApiService.getRepositories(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
var repositories = snapshot.data;
return ListView.separated(
itemCount: repositories.length,
itemBuilder: (context, index) {
var repository = repositories[index];
return ListTile(
dense: true,
title: Text(
repository!.name.toString(),
style: const TextStyle(
fontWeight: FontWeight.bold,
),
),
subtitle: Text(repository!.description.toString()),
leading: CircleAvatar(
radius: 48.0,
backgroundImage: NetworkImage(repository?.avatar),
),
);
},
separatorBuilder: (BuildContext context, int index) {
return const Divider();
},
);
} else {
return const Center(
child: CircularProgressIndicator(),
);
}
},
);
}
}
A classe RepositoriesPage possui um método _buildBody que exibe um FutureBuilder que faz uma chamada à API do GitHub usando o método getRepositories da classe ApiService. Quando a chamada é concluída, o FutureBuilder exibe a lista de repositórios em uma ListView. Cada item da lista é criado pelo método retorna um ListTile contendo as informações do repositorio.
6 – Crie um ‘Model’
Vamos criar um arquivo com o nome repository_model.dart que será nosso model para receber os dados de cada repositório que virá da api do GitHub.
Adicione o seguinte código no arquivo que acabou de criar:
class Repository {
String? name, user, avatar, description;
Repository({
this.name,
this.user,
this.avatar,
this.description,
});
Repository.fromJson(Map<String, dynamic> json) {
name = json['full_name'];
user = json['owner']['login'];
avatar = json['owner']['avatar_url'];
description = json['description'];
}
}
Nesse model adicionarmos os campos name, user, avatar e description do repositório. Sinta-se a vontade para adicionar novos campos. Para você conseguir conferir quais são os dados retornados pela api do Github basta acessar a url: https://api.github.com/repositories.
7. Adicionar a página à rota do aplicativo
Por fim, você precisa adicionar a página RepositoriesPage à rota do aplicativo para que ela possa ser exibida. Para isso, abra o arquivo main.dart e adicione o código abaixo no método build da classe MyApp:
import 'package:flutter/material.dart';
import 'package:ninelabs_repositories/repositories_page.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Repositorios',
theme: ThemeData(
primarySwatch: Colors.deepPurple,
),
home: const RepositoriesPage(),
);
}
}Agora, quando você iniciar o aplicativo, a página RepositoriesPage será exibida e a lista de repositórios será carregada da API do GitHub.
Repositório GitHub
Deixo aqui o link com o repositório do código que fiz nesse tutorial.
Dica de Leitura
Aprofundando em Flutter – Everton Coimbra de Araújo
Espero que isso ajude! Qualquer dúvida, é só perguntar.
