{"id":32519,"date":"2024-11-01T09:09:42","date_gmt":"2024-11-01T09:09:42","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=32519"},"modified":"2024-11-01T11:54:58","modified_gmt":"2024-11-01T11:54:58","slug":"flutter-course-15-2-using-openweathermap","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/32519\/","title":{"rendered":"Flutter Course, 15.2 Using OpenWeatherMap"},"content":{"rendered":"

In this section, we will learn how to integrate the OpenWeatherMap API<\/strong> into a Flutter application. OpenWeatherMap provides various useful weather information, including real-time weather data, temperature, humidity, and wind speed. This API offers both free and paid plans, and today we will explain based on the free plan.<\/p>\n

1. Sign up for OpenWeatherMap API and get the API key<\/h2>\n

The first step is to sign up on the OpenWeatherMap website to obtain an API key. Please follow the steps below:<\/p>\n

    \n
  1. Go to the OpenWeatherMap website<\/a>.<\/li>\n
  2. Click “Sign Up” in the top menu to create an account.<\/li>\n
  3. Enter your email address and password, then complete the registration process.<\/li>\n
  4. After logging in, navigate to the “API keys” menu to check your automatically generated default API key.<\/li>\n
  5. You can create a new API key if needed.<\/li>\n<\/ol>\n

    2. Setting up the Flutter project<\/h2>\n

    Now let’s set up the Flutter project. You can either create a new Flutter application or use an existing project.<\/p>\n

    flutter create weather_app<\/code><\/pre>\n
    Navigate to the project directory:<\/p>\n
    cd weather_app<\/code><\/pre>\n
    Next, add the required package to the pubspec.yaml file to send HTTP requests:<\/p>\n
    dependencies:\n  flutter:\n    sdk: flutter\n  http: ^0.13.3\n<\/code><\/pre>\n
    Run the following command to install all dependencies:<\/p>\n
    flutter pub get<\/code><\/pre>\n
    3. Creating the weather data model<\/h2>\n
    Create a Dart model class to learn the JSON data received from the OpenWeatherMap API. For example, let’s create a class for weather data.<\/p>\n
    class Weather {\n  final String city;\n  final double temperature;\n  final String description;\n\n  Weather({required this.city, required this.temperature, required this.description});\n\n  factory Weather.fromJson(Map json) {\n    return Weather(\n      city: json['name'],\n      temperature: json['main']['temp'] - 273.15, \/\/ Convert Kelvin to Celsius\n      description: json['weather'][0]['description'],\n    );\n  }\n}\n<\/code><\/pre>\n
    4. Fetching weather data with HTTP requests<\/h2>\n
    Now it’s time to write the HTTP request to fetch weather information. We will send a GET request to the OpenWeatherMap API using the http<\/strong> package.<\/p>\n
    Here\u2019s an example of writing a function to fetch weather information:<\/p>\n
    import 'dart:convert';\nimport 'package:http\/http.dart' as http;\n\nFuture fetchWeather(String city) async {\n  final apiKey = 'YOUR_API_KEY_HERE'; \/\/ Enter your API key here\n  final response = await http.get(Uri.parse('https:\/\/api.openweathermap.org\/data\/2.5\/weather?q=$city&appid=$apiKey'));\n\n  if (response.statusCode == 200) {\n    return Weather.fromJson(json.decode(response.body));\n  } else {\n    throw Exception('Failed to load weather data');\n  }\n}\n<\/code><\/pre>\n
    5. Creating the user interface<\/h2>\n
    Now let’s create a simple user interface to display the weather information. We will use Flutter components to show weather information based on the city name entered by the user.<\/p>\n
    Here\u2019s a basic UI code example:<\/p>\n
    import 'package:flutter\/material.dart';\n\nclass WeatherApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'Weather App',\n      home: Scaffold(\n        appBar: AppBar(\n          title: Text('Weather Information'),\n        ),\n        body: WeatherInfo(),\n      ),\n    );\n  }\n}\n\nclass WeatherInfo extends StatefulWidget {\n  @override\n  _WeatherInfoState createState() => _WeatherInfoState();\n}\n\nclass _WeatherInfoState extends State {\n  String city = '';\n  Weather? weather;\n\n  final TextEditingController controller = TextEditingController();\n\n  @override\n  Widget build(BuildContext context) {\n    return Column(\n      children: [\n        Padding(\n          padding: const EdgeInsets.all(16.0),\n          child: TextField(\n            controller: controller,\n            decoration: InputDecoration(labelText: 'Enter City Name'),\n          ),\n        ),\n        ElevatedButton(\n          onPressed: () {\n            setState(() {\n              city = controller.text.trim();\n            });\n            fetchWeather(city).then((value) {\n              setState(() {\n                weather = value;\n              });\n            }).catchError((error) {\n              showDialog(\n                context: context,\n                builder: (_) => AlertDialog(\n                  title: Text('Error'),\n                  content: Text(error.toString()),\n                  actions: [\n                    TextButton(\n                      onPressed: () {\n                        Navigator.of(context).pop();\n                      },\n                      child: Text('OK'),\n                    ),\n                  ],\n                ),\n              );\n            });\n          },\n          child: Text('Get Weather'),\n        ),\n        if (weather != null)\n          Padding(\n            padding: const EdgeInsets.all(16.0),\n            child: Text(\n              'City: ${weather!.city}\\nTemperature: ${weather!.temperature.toStringAsFixed(1)}\u00b0C\\nCondition: ${weather!.description}',\n              style: TextStyle(fontSize: 20),\n            ),\n          ),\n      ],\n    );\n  }\n}\n\nvoid main() {\n  runApp(WeatherApp());\n}\n<\/code><\/pre>\n
    6. Run the app and check the results<\/h2>\n
    You can run the code written above on a device or emulator to check the results. Now, when you enter a city name in the input field and press the “Get Weather” button, it will display the weather information fetched through the API request on the screen.<\/p>\n
    7. Error handling and improvements<\/h2>\n
    The currently implemented example provides only basic functionality, so there are various improvements that can be added. For example:<\/p>\n