11.10. Trabalhando com formulários em Flutter: Integração com APIs externas

Formulários são uma parte essencial de quase todos os aplicativos. Eles são usados para coletar informações do usuário, seja para criar uma conta, fazer login, fazer uma reserva, etc. No Flutter, existem várias maneiras de criar formulários, mas neste artigo, vamos nos concentrar em uma abordagem específica: a integração com APIs externas.

Antes de começar, é importante entender o que é uma API. API, ou Interface de Programação de Aplicações, é um conjunto de regras e protocolos que permitem que diferentes programas de software se comuniquem entre si. Em outras palavras, uma API permite que um aplicativo acesse recursos ou funcionalidades de outro aplicativo, servidor ou serviço.

Quando falamos de integração de formulários com APIs externas, estamos falando sobre o processo de enviar os dados coletados através do formulário para um servidor ou serviço externo usando sua API. Isso pode ser feito de várias maneiras, mas a mais comum é o uso de requisições HTTP.

No Flutter, podemos usar a biblioteca http para fazer requisições HTTP. Para começar, precisamos adicioná-la ao nosso arquivo pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

Depois de adicionar a biblioteca, podemos importá-la em nosso arquivo:

import 'package:http/http.dart' as http;

Agora, podemos começar a trabalhar com nosso formulário. Vamos supor que temos um formulário de login simples com dois campos: email e senha. No Flutter, podemos usar o widget TextFormField para criar esses campos:

TextFormField(
  decoration: InputDecoration(labelText: 'Email'),
  onSaved: (value) {
    // salvar o valor do campo
  },
),
TextFormField(
  decoration: InputDecoration(labelText: 'Senha'),
  obscureText: true,
  onSaved: (value) {
    // salvar o valor do campo
  },
),

Quando o usuário pressiona o botão de enviar, queremos coletar os valores desses campos e enviá-los para a API. Para fazer isso, precisamos envolver nossos campos de formulário em um widget Form e usar um GlobalKey para acessar o estado do formulário:

final _formKey = GlobalKey();

Form(
  key: _formKey,
  child: Column(
    children: [
      // campos de formulário aqui
    ],
  ),
)

Agora, podemos usar o método _formKey.currentState.save() para salvar os valores dos campos e _formKey.currentState.validate() para validar os campos antes de enviar os dados.

onPressed: () {
  if (_formKey.currentState.validate()) {
    _formKey.currentState.save();
    // enviar os dados
  }
},

Para enviar os dados, podemos usar a função http.post(), que aceita a URL da API e os dados do formulário como parâmetros. Os dados do formulário devem ser convertidos em um mapa de strings antes de serem enviados:

http.post(
  'https://api.exemplo.com/login',
  body: {'email': email, 'password': senha},
)

Finalmente, a função http.post() retorna uma Future que resolve com uma Response. Podemos usar a Response para verificar se a requisição foi bem-sucedida e para obter os dados de resposta:

http.post(
  'https://api.exemplo.com/login',
  body: {'email': email, 'password': senha},
).then((response) {
  if (response.statusCode == 200) {
    // requisição bem-sucedida
  } else {
    // requisição falhou
  }
});

Em resumo, trabalhar com formulários e APIs externas no Flutter envolve coletar os dados do formulário, validar esses dados, enviá-los para a API usando uma requisição HTTP e, finalmente, lidar com a resposta. Este é um processo bastante comum em desenvolvimento de aplicativos e, com a ajuda do Flutter e da biblioteca http, podemos realizá-lo de maneira eficiente e eficaz.