{"id":32531,"date":"2024-11-01T09:09:47","date_gmt":"2024-11-01T09:09:47","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=32531"},"modified":"2024-11-01T11:54:55","modified_gmt":"2024-11-01T11:54:55","slug":"flutter-course-15-8-fetching-real-time-weather-data","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/32531\/","title":{"rendered":"Flutter Course: 15.8 Fetching Real-Time Weather Data"},"content":{"rendered":"<p>In today&#8217;s lecture, we will discuss how to fetch real-time weather data using Flutter. Weather applications are one of the projects that many developers create as their first project, providing an interesting experience of easily fetching weather data via an API and displaying it in the UI. In this lecture, we will learn about various topics such as API calls, JSON data parsing, and utilizing StatefulWidget.<\/p>\n<h2>Minimum Requirements<\/h2>\n<ul>\n<li>You should have Flutter SDK and development environment installed.<\/li>\n<li>A basic understanding of the Dart language and Flutter framework is required.<\/li>\n<li>We will use Pub.dev to utilize external libraries.<\/li>\n<\/ul>\n<h2>1. Project Setup<\/h2>\n<p>To create a new Flutter project, execute the following command:<\/p>\n<pre><code>flutter create weather_app<\/code><\/pre>\n<p>After navigating into the created project folder, open the <code>lib\/main.dart<\/code> file.<\/p>\n<h2>2. Installing Required Packages<\/h2>\n<p>We will use the HTTP package to fetch weather data. Add the following dependency to the <code>pubspec.yaml<\/code> file:<\/p>\n<pre><code>dependencies:\n  http: ^0.13.3\n<\/code><\/pre>\n<p>After saving the changes, install the package with the following command:<\/p>\n<pre><code>flutter pub get<\/code><\/pre>\n<h2>3. Selecting API and Obtaining Key<\/h2>\n<p>In this lecture, we will use the OpenWeatherMap API to fetch real-time weather data. Follow these steps to use the API.<\/p>\n<ol>\n<li>Go to the <a href=\"https:\/\/openweathermap.org\/api\" target=\"_blank\" rel=\"noopener\">OpenWeatherMap<\/a> website and create an account.<\/li>\n<li>Generate an API key and make a note of it.<\/li>\n<\/ol>\n<h2>4. Creating Weather Data Model<\/h2>\n<p>It is necessary to understand the structure of the weather data returned by the API and convert it to a Dart model. Here is a simple model to represent weather data:<\/p>\n<pre><code>class Weather {\n  final String description;\n  final double temperature;\n\n  Weather({required this.description, required this.temperature});\n\n  factory Weather.fromJson(Map<String, dynamic> json) {\n    return Weather(\n      description: json['weather'][0]['description'],\n      temperature: json['main']['temp'],\n    );\n  }\n}\n<\/code><\/pre>\n<h2>5. Fetching Data: HTTP GET Request<\/h2>\n<p>Now, let&#8217;s create an HTTP GET request to fetch weather data from the API. Add the following function to the main file:<\/p>\n<pre><code>import 'dart:convert';\nimport 'package:http\/http.dart' as http;\n\nFuture<Weather> fetchWeather(String city) async {\n  final String apiKey = 'YOUR_API_KEY'; \/\/ Change to your API key\n  final response = await http.get(Uri.parse('https:\/\/api.openweathermap.org\/data\/2.5\/weather?q=$city&appid=$apiKey&units=metric'));\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<h2>6. Building the UI<\/h2>\n<p>Now, let&#8217;s create the user interface. Build a simple UI that takes user input for the city name and displays weather information:<\/p>\n<pre><code>import 'package:flutter\/material.dart';\n\nvoid main() {\n  runApp(WeatherApp());\n}\n\nclass WeatherApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'Weather App',\n      home: WeatherHomePage(),\n    );\n  }\n}\n\nclass WeatherHomePage extends StatefulWidget {\n  @override\n  _WeatherHomePageState createState() => _WeatherHomePageState();\n}\n\nclass _WeatherHomePageState extends State<WeatherHomePage> {\n  final TextEditingController _controller = TextEditingController();\n  Weather? _weather;\n  String? _errorMessage;\n\n  void _getWeather() async {\n    try {\n      final weather = await fetchWeather(_controller.text);\n      setState(() {\n        _weather = weather;\n        _errorMessage = null;\n      });\n    } catch (e) {\n      setState(() {\n        _errorMessage = e.toString();\n      });\n    }\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text('Weather App'),\n      ),\n      body: Padding(\n        padding: const EdgeInsets.all(16.0),\n        child: Column(\n          children: <Widget>[\n            TextField(\n              controller: _controller,\n              decoration: InputDecoration(labelText: 'Enter city name'),\n            ),\n            SizedBox(height: 10),\n            ElevatedButton(\n              onPressed: _getWeather,\n              child: Text('Get Weather'),\n            ),\n            SizedBox(height: 20),\n            if (_errorMessage != null)\n              Text(\n                _errorMessage!,\n                style: TextStyle(color: Colors.red),\n              ),\n            if (_weather != null) ...[\n              Text('Temperature: ${_weather!.temperature}\u00b0C'),\n              Text('Description: ${_weather!.description}'),\n            ],\n          ],\n        ),\n      ),\n    );\n  }\n}\n<\/code><\/pre>\n<h2>7. Running the App<\/h2>\n<p>Once all the code is written, run the app to check if it works. You can start the app using the following command in the terminal:<\/p>\n<pre><code>flutter run<\/code><\/pre>\n<p>Enter the city name and click the &#8216;Get Weather&#8217; button to display the real-time weather information for that city.<\/p>\n<h2>8. Future Improvements<\/h2>\n<p>This application provides only basic weather information. Consider the following improvements:<\/p>\n<ul>\n<li>Add GPS functionality to get weather for the current location<\/li>\n<li>Display more weather information (humidity, pressure, etc.)<\/li>\n<li>Enhance the UI for a better user experience<\/li>\n<li>Support offline mode<\/li>\n<\/ul>\n<h2>Conclusion<\/h2>\n<p>In this lecture, we created a simple application to fetch real-time weather data using Flutter. We learned how to use the weather API and how to obtain data from it. We hope you lay the foundation to progress to more complex applications.<\/p>\n<p>If you have any questions or comments, feel free to leave them in the comments!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In today&#8217;s lecture, we will discuss how to fetch real-time weather data using Flutter. Weather applications are one of the projects that many developers create as their first project, providing an interesting experience of easily fetching weather data via an API and displaying it in the UI. In this lecture, we will learn about various &hellip; <a href=\"https:\/\/atmokpo.com\/w\/32531\/\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;Flutter Course: 15.8 Fetching Real-Time Weather Data&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[151],"tags":[],"class_list":["post-32531","post","type-post","status-publish","format-standard","hentry","category-flutter-course"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Flutter Course: 15.8 Fetching Real-Time Weather Data - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/atmokpo.com\/w\/32531\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flutter Course: 15.8 Fetching Real-Time Weather Data - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"In today&#8217;s lecture, we will discuss how to fetch real-time weather data using Flutter. Weather applications are one of the projects that many developers create as their first project, providing an interesting experience of easily fetching weather data via an API and displaying it in the UI. In this lecture, we will learn about various &hellip; \ub354 \ubcf4\uae30 &quot;Flutter Course: 15.8 Fetching Real-Time Weather Data&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/32531\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:09:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:54:55+00:00\" \/>\n<meta name=\"author\" content=\"root\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:site\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:label1\" content=\"\uae00\uc4f4\uc774\" \/>\n\t<meta name=\"twitter:data1\" content=\"root\" \/>\n\t<meta name=\"twitter:label2\" content=\"\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04\" \/>\n\t<meta name=\"twitter:data2\" content=\"3\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/atmokpo.com\/w\/32531\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32531\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"Flutter Course: 15.8 Fetching Real-Time Weather Data\",\"datePublished\":\"2024-11-01T09:09:47+00:00\",\"dateModified\":\"2024-11-01T11:54:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32531\/\"},\"wordCount\":439,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"Flutter course\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/32531\/\",\"url\":\"https:\/\/atmokpo.com\/w\/32531\/\",\"name\":\"Flutter Course: 15.8 Fetching Real-Time Weather Data - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:09:47+00:00\",\"dateModified\":\"2024-11-01T11:54:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32531\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/32531\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/32531\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flutter Course: 15.8 Fetching Real-Time Weather Data\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/atmokpo.com\/w\/#website\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/atmokpo.com\/w\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"contentUrl\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"width\":400,\"height\":400,\"caption\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\"},\"image\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/bebubo4\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\",\"name\":\"root\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"caption\":\"root\"},\"sameAs\":[\"http:\/\/atmokpo.com\/w\"],\"url\":\"https:\/\/atmokpo.com\/w\/author\/root\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Flutter Course: 15.8 Fetching Real-Time Weather Data - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/atmokpo.com\/w\/32531\/","og_locale":"ko_KR","og_type":"article","og_title":"Flutter Course: 15.8 Fetching Real-Time Weather Data - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"In today&#8217;s lecture, we will discuss how to fetch real-time weather data using Flutter. Weather applications are one of the projects that many developers create as their first project, providing an interesting experience of easily fetching weather data via an API and displaying it in the UI. In this lecture, we will learn about various &hellip; \ub354 \ubcf4\uae30 \"Flutter Course: 15.8 Fetching Real-Time Weather Data\"","og_url":"https:\/\/atmokpo.com\/w\/32531\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:09:47+00:00","article_modified_time":"2024-11-01T11:54:55+00:00","author":"root","twitter_card":"summary_large_image","twitter_creator":"@bebubo4","twitter_site":"@bebubo4","twitter_misc":{"\uae00\uc4f4\uc774":"root","\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04":"3\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/atmokpo.com\/w\/32531\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/32531\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"Flutter Course: 15.8 Fetching Real-Time Weather Data","datePublished":"2024-11-01T09:09:47+00:00","dateModified":"2024-11-01T11:54:55+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/32531\/"},"wordCount":439,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["Flutter course"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/32531\/","url":"https:\/\/atmokpo.com\/w\/32531\/","name":"Flutter Course: 15.8 Fetching Real-Time Weather Data - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:09:47+00:00","dateModified":"2024-11-01T11:54:55+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/32531\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/32531\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/32531\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"Flutter Course: 15.8 Fetching Real-Time Weather Data"}]},{"@type":"WebSite","@id":"https:\/\/atmokpo.com\/w\/#website","url":"https:\/\/atmokpo.com\/w\/","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","description":"","publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/atmokpo.com\/w\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ko-KR"},{"@type":"Organization","@id":"https:\/\/atmokpo.com\/w\/#organization","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","url":"https:\/\/atmokpo.com\/w\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/","url":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","contentUrl":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","width":400,"height":400,"caption":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8"},"image":{"@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/bebubo4"]},{"@type":"Person","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7","name":"root","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","caption":"root"},"sameAs":["http:\/\/atmokpo.com\/w"],"url":"https:\/\/atmokpo.com\/w\/author\/root\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32531","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/comments?post=32531"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32531\/revisions"}],"predecessor-version":[{"id":32532,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32531\/revisions\/32532"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=32531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=32531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=32531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}