Criar um aplicativo Weather no Flutter

Neste tutorial, aprendemos a criar um aplicativo de clima usando o Flutter. Usamos a API OpenWeatherMap para obter dados meteorológicos de um local específico e exibimos a descrição do clima na tela.

Começamos criando um novo projeto do Flutter e adicionando as dependências necessárias. Em seguida, criamos um novo widget Weather e uma classe _WeatherState que estende o State.

Dentro da classe _WeatherState, criamos um método Future getWeather que faz uma solicitação HTTP à API OpenWeatherMap para recuperar dados meteorológicos de um local específico. Usamos o método jsonDecode para analisar os dados JSON retornados pela API.

Em seguida, adicionamos um widget Column ao método build do widget Weather que contém um widget Text para exibir a descrição do clima.

Por fim, adicionamos um widget TextField e um widget ElevatedButton para permitir que o usuário insira o nome de uma cidade e acione o método getWeather quando pressionado, passando o nome da cidade inserido pelo usuário como argumento.

Este tutorial fornece um exemplo básico de como criar um aplicativo de clima usando o Flutter, mas há muitos recursos adicionais que você pode acrescentar, como exibir informações adicionais sobre o clima ou adicionar serviços de localização para obter automaticamente a localização do usuário.

Primeiro, vamos modificar o método getWeather para retornar mais dados sobre o clima, como a temperatura e a umidade:

Future<dynamic> getWeather(String city) async {
  String apiKey = 'YOUR_API_KEY';
  String url =
      'https://api.openweathermap.org/data/2.5/weather?q=$city&appid=$apiKey&units=metric';
  http.Response response = await http.get(Uri.parse(url));
  if (response.statusCode == 200) {
    return jsonDecode(response.body);
  } else {
    throw Exception('Failed to load weather data');
  }
}

Agora que temos mais dados, vamos exibi-los na tela. Aqui está um método de compilação atualizado para o widget Weather:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "How is the weather in ...?",
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const SizedBox(height: 20.0),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20.0),
              child: TextField(
                controller: _cityController,
                decoration: InputDecoration(
                  hintText: 'Enter city',
                  border: OutlineInputBorder(
                    borderSide: const BorderSide(
                      color: Colors.blue,
                    ),
                    borderRadius: BorderRadius.circular(14),
                  ),
                ),
              ),
            ),
            const SizedBox(height: 20.0),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.blue,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12),
                  side: BorderSide.none,
                ),
                padding:
                    const EdgeInsets.symmetric(horizontal: 35, vertical: 18),
                textStyle: const TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              ),
              onPressed: () {
                String city = _cityController.text;
                getWeather(city).then((weatherData) {
                  setState(() {
                    _weatherData = weatherData;
                    _icon = weatherData['weather'][0]['icon'];
                  });
                });
              },
              child: const Text(
                'Search',
                style: TextStyle(color: Colors.white),
              ),
            ),
            const SizedBox(height: 20.0),
            if (_weatherData != null)
              Column(
                children: [
                  Text(
                    'Temperature: ${_weatherData['main']['temp']}°C',
                    style: Theme.of(context).textTheme.titleLarge,
                  ),
                  const SizedBox(height: 10.0),
                  Image.network(
                    'https://openweathermap.org/img/w/$_icon.png',
                    width: 100,
                    height: 100,
                  ),
                  Text('Location: ${_weatherData['name']}'),
                  const SizedBox(height: 15.0),
                  Text('Country: ${_weatherData['sys']['country']}'),
                  const SizedBox(height: 15.0),
                  Text('Wind Speed: ${_weatherData['wind']['speed']}'),
                ],
              ),
          ],
        ),
      ),
    );
  }

Adicionamos dois widgets de Text para exibir a temperatura e a umidade. Também aumentamos o tamanho da fonte da descrição do clima para torná-la mais proeminente.

É isso aí! Agora você pode executar o aplicativo e ver as informações meteorológicas adicionais exibidas ao pesquisar uma cidade. Sinta-se à vontade para personalizar o layout e adicionar mais dados meteorológicos conforme desejar.