In this tutorial, we learned how to create a weather app using Flutter. We used the OpenWeatherMap API to get weather data for a specific location and displayed the weather description on the screen.
We started by creating a new Flutter project and adding the necessary dependencies. We then created a new Weather widget and a _WeatherState class that extends State.
Inside the _WeatherState class, we created a Future method getWeather that makes an HTTP request to the OpenWeatherMap API to retrieve weather data for a specific location. We used the jsonDecode method to parse the JSON data returned by the API.
We then added a Column widget to the build method of the Weather widget that contains a Text widget to display the weather description.
Finally, we added a TextField widget and an ElevatedButton widget to allow the user to input a city name and trigger the getWeather method when pressed, passing the city name entered by the user as an argument.
This tutorial provides a basic example of how to create a weather app using Flutter, but there are many additional features you could add, such as displaying additional weather information or adding location services to automatically get the user’s location.
First, let’s modify the getWeather method to return more data about the weather, such as the temperature and humidity:
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');
}
}Now that we have more data, let’s display it on the screen. Here’s an updated build method for the Weather widget:
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: _cityController,
decoration: InputDecoration(
hintText: 'Enter city',
border: OutlineInputBorder(),
),
),
SizedBox(height: 20.0),
ElevatedButton(
onPressed: () {
String city = _cityController.text;
getWeather(city).then((weatherData) {
setState(() {
_weatherData = weatherData;
});
});
},
child: Text('Search'),
),
SizedBox(height: 20.0),
_weatherData == null
? Container()
: Column(
children: [
Text(
_weatherData['weather'][0]['description'],
style: TextStyle(fontSize: 24),
),
SizedBox(height: 10.0),
Text(
'Temperature: ${_weatherData['main']['temp']}°C',
style: TextStyle(fontSize: 18),
),
SizedBox(height: 10.0),
Text(
'Humidity: ${_weatherData['main']['humidity']}%',
style: TextStyle(fontSize: 18),
),
],
),
],
),
),
);
}We’ve added two Text widgets to display the temperature and humidity. We've also increased the font size of the weather description to make it more prominent.
That’s it! You can now run the app and see the additional weather information displayed when you search for a city. Feel free to customize the layout and add more weather data as desired.
GitHub Link: https://github.com/Shentia/weatherappchatgpt