6.7. Widgets em Flutter: Requisições HTTP

Os Widgets em Flutter são a base fundamental para a criação de qualquer aplicativo utilizando essa tecnologia. Eles são os elementos básicos de construção da interface do usuário em um aplicativo Flutter. Um widget pode definir um elemento estrutural, como um botão ou um menu, um aspecto estilístico, como uma fonte ou uma cor, ou até mesmo um layout, como o padding ou o alignment.

Além disso, é importante ressaltar que em Flutter, quase tudo é um widget. Isso inclui não apenas elementos visuais, mas também elementos como ações (como navegação) e atributos (como margens, padding e alinhamento).

Um dos aspectos mais importantes do desenvolvimento de aplicativos é a capacidade de interagir com APIs da web e fazer requisições HTTP. Isso permite que seu aplicativo acesse e manipule dados de uma variedade de fontes da web. No Flutter, isso é alcançado usando a biblioteca http.

Requisições HTTP em Flutter

Para fazer requisições HTTP em Flutter, você precisa adicionar a dependência http no arquivo pubspec.yaml. A biblioteca http fornece a mais simples maneira de buscar dados da web.

dependencies:
  flutter:
    sdk: flutter

  http: ^0.13.3

Depois de adicionar a dependência, você pode importá-la em seu arquivo Dart.

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

Agora, você pode usar a biblioteca http para fazer requisições HTTP. A função get() da biblioteca http é usada para fazer uma requisição GET. Você precisa passar a URL como parâmetro para a função get().

var response = await http.get('https://api.example.com/data');

A resposta da requisição HTTP é armazenada na variável response. Você pode usar a propriedade body da variável response para obter o corpo da resposta.

print('Response body: ${response.body}');

Além disso, você pode verificar o status da resposta usando a propriedade statusCode da variável response.

if (response.statusCode == 200) {
  print('Request successful');
} else {
  print('Request failed with status: ${response.statusCode}.');
}

Utilizando Widgets para exibir dados de uma requisição HTTP

Depois de fazer uma requisição HTTP e obter os dados, você pode usar widgets para exibir esses dados na interface do usuário do seu aplicativo. Por exemplo, você pode usar um widget ListView para exibir uma lista de dados.

Primeiro, você precisa criar uma função que faz a requisição HTTP e retorna os dados. Esta função pode ser chamada no método initState() do seu widget.

List data;

@override
void initState() {
  super.initState();
  fetchData();
}

fetchData() async {
  var response = await http.get('https://api.example.com/data');
  if (response.statusCode == 200) {
    setState(() {
      data = json.decode(response.body);
    });
  }
}

Depois de obter os dados, você pode usar um widget ListView.builder para exibir os dados na interface do usuário. O ListView.builder requer duas propriedades: itemCount e itemBuilder. A propriedade itemCount define o número de itens na lista e a propriedade itemBuilder constrói cada item da lista.

ListView.builder(
  itemCount: data.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(data[index]['title']),
      subtitle: Text(data[index]['body']),
    );
  },
)

Com isso, você pode fazer requisições HTTP em Flutter e usar widgets para exibir os dados obtidos. Este é um aspecto fundamental do desenvolvimento de aplicativos e é uma habilidade essencial para qualquer desenvolvedor Flutter.

Próxima página do Ebook Gratuito:

80Widgets em Flutter: Persistência de dados

3 minutos