{"id":32511,"date":"2024-11-01T09:09:38","date_gmt":"2024-11-01T09:09:38","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=32511"},"modified":"2024-11-01T11:55:00","modified_gmt":"2024-11-01T11:55:00","slug":"flutter-course-14-7-stream-and-streambuilder","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/32511\/","title":{"rendered":"Flutter Course: 14.7 Stream and StreamBuilder"},"content":{"rendered":"<p>Flutter is a powerful framework that supports asynchronous programming. Among its features, Stream and StreamBuilder are essential for handling the flow of data. In this article, we will take a deep dive into the concepts of Stream and StreamBuilder, their usage, and real examples.<\/p>\n<h2>1. What is Stream?<\/h2>\n<p>Stream is a concept in reactive programming that allows asynchronous data transmission. It can receive and process data whenever it is generated. For example, Stream can be used to continuously fetch data from a server or to handle user input in real-time.<\/p>\n<h3>1.1 Basic Concept of Stream<\/h3>\n<p>Stream generates a series of asynchronous events, and there are &#8216;listeners&#8217; that consume these events. There are various types of Streams, with the two most common being <strong>Future<\/strong>, which produces a single value, and <strong>Stream<\/strong>, which produces multiple values.<\/p>\n<h3>1.2 Key Features of Stream<\/h3>\n<ul>\n<li>Data flow: Stream transmits data every time it is generated.<\/li>\n<li>Asynchronous processing: Stream processes data asynchronously to keep the UI smoother.<\/li>\n<li>Listeners: Stream requires listeners to consume the data.<\/li>\n<li>Diverse sources: Stream can receive data from multiple sources, such as web sockets, HTTP requests, or user inputs.<\/li>\n<\/ul>\n<h2>2. What is StreamBuilder?<\/h2>\n<p>StreamBuilder is a widget in Flutter that is used to reflect Stream data in the UI. StreamBuilder is connected to a Stream and automatically updates the UI whenever new data is generated.<\/p>\n<h3>2.1 Structure of StreamBuilder<\/h3>\n<p>StreamBuilder is typically used in the following form:<\/p>\n<pre><code>StreamBuilder<t>(\n  stream: yourStream,\n  builder: (BuildContext context, AsyncSnapshot<t> snapshot) {\n    \/\/ Process the data and build the UI.\n  },\n);<\/t><\/t><\/code><\/pre>\n<p>Here, <code>yourStream<\/code> is the location where data is generated, and a listener for this Stream is automatically created. The <code>builder<\/code> parameter is a function that receives the Snapshot and generates the UI.<\/p>\n<h3>2.2 AsyncSnapshot<\/h3>\n<p>The <code>AsyncSnapshot<\/code> object received in the <code>builder<\/code> function of StreamBuilder contains the status and data of the Stream. This allows for easy management of the data loading state, error occurrence, and more.<\/p>\n<h2>3. Examples of Using Stream and StreamBuilder<\/h2>\n<p>Now, let&#8217;s explore how to use Stream and StreamBuilder through actual code. In this example, we will create a simple application that periodically sends the current time as a stream and displays it using StreamBuilder.<\/p>\n<h3>3.1 Creating a Stream<\/h3>\n<p>First, let&#8217;s create a Stream that periodically sends the current time.<\/p>\n<pre><code>Stream&lt;DateTime&gt; getTimeStream() async* {\n  while (true) {\n    yield DateTime.now();\n    await Future.delayed(Duration(seconds: 1));\n  }\n}<\/code><\/pre>\n<p>The above code returns a Stream that generates <code>DateTime<\/code> objects every second. It defines an asynchronous function using the <code>async*<\/code> keyword and triggers the value using <code>yield<\/code>.<\/p>\n<h3>3.2 Building UI with StreamBuilder<\/h3>\n<p>Now, let&#8217;s use StreamBuilder to display the Stream we created above in the UI.<\/p>\n<pre><code>class TimeDisplay extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return StreamBuilder&lt;DateTime&gt;(\n      stream: getTimeStream(),\n      builder: (context, snapshot) {\n        if (snapshot.connectionState == ConnectionState.waiting) {\n          return Text('Loading...');\n        } else if (snapshot.hasError) {\n          return Text('Error: ${snapshot.error}');\n        } else {\n          return Text('Current time: ${snapshot.data}');\n        }\n      },\n    );\n  }\n}<\/code><\/pre>\n<p>The above code is an example of using StreamBuilder to display the time. When loading, it shows &#8216;Loading&#8230;&#8217;, when an error occurs, it displays the error message, and when the data is successfully received, it shows the current time.<\/p>\n<h2>4. Use Cases of Stream and StreamBuilder<\/h2>\n<p>Stream and StreamBuilder can be utilized in various contexts. Here are a few examples where they can be applied:<\/p>\n<h3>4.1 Real-time Data Communication<\/h3>\n<p>In a chat application, for instance, it must receive messages sent by users in real-time. In this case, Stream can be used to receive new messages, and StreamBuilder can be used to update the UI.<\/p>\n<h3>4.2 Periodic Data Updates<\/h3>\n<p>When fetching periodically updated data, such as stock prices or weather information, Stream can be used. This allows users to always receive the latest information.<\/p>\n<h3>4.3 User Event Handling<\/h3>\n<p>Apps that provide real-time feedback by detecting user inputs or actions can also utilize Stream. For example, while a user is filling out a form, it can perform real-time validation for each field and provide feedback.<\/p>\n<h2>5. Pros and Cons of Stream and StreamBuilder<\/h2>\n<h3>5.1 Advantages<\/h3>\n<ul>\n<li><strong>Asynchronous Processing:<\/strong> Increases the responsiveness of the UI by processing data asynchronously.<\/li>\n<li><strong>Real-time Updates:<\/strong> Automatically updates the UI every time the data changes.<\/li>\n<li><strong>Complex Data Flow Management:<\/strong> Easily manages multiple data sources and complex data flows.<\/li>\n<\/ul>\n<h3>5.2 Disadvantages<\/h3>\n<ul>\n<li><strong>Complexity:<\/strong> Asynchronous programming can feel complex for beginners.<\/li>\n<li><strong>Resource Consumption:<\/strong> Maintaining unnecessary Streams can waste system resources.<\/li>\n<li><strong>Error Handling:<\/strong> Consistent handling of errors that can occur in asynchronous operations is necessary.<\/li>\n<\/ul>\n<h2>6. Conclusion<\/h2>\n<p>In this article, we explored Stream and StreamBuilder in Flutter in detail. Stream is a powerful tool for transmitting data asynchronously, and StreamBuilder is a widget that helps easily apply this to the UI. I hope this article has helped you understand these two concepts through real examples. Asynchronous programming can be somewhat challenging at first, but you will become more familiar with it through various use cases. Actively use these two concepts in developing fun and useful applications with Flutter!<\/p>\n<h2>7. References<\/h2>\n<ul>\n<li><a href=\"https:\/\/flutter.dev\/docs\" target=\"_blank\" rel=\"noopener\">Flutter Official Documentation<\/a><\/li>\n<li><a href=\"https:\/\/dart.dev\/codelabs\" target=\"_blank\" rel=\"noopener\">Dart Codelabs for Practicing Code<\/a><\/li>\n<li><a href=\"https:\/\/medium.com\/flutter\" target=\"_blank\" rel=\"noopener\">Medium Articles Related to Flutter<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Flutter is a powerful framework that supports asynchronous programming. Among its features, Stream and StreamBuilder are essential for handling the flow of data. In this article, we will take a deep dive into the concepts of Stream and StreamBuilder, their usage, and real examples. 1. What is Stream? Stream is a concept in reactive programming &hellip; <a href=\"https:\/\/atmokpo.com\/w\/32511\/\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;Flutter Course: 14.7 Stream and StreamBuilder&#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-32511","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: 14.7 Stream and StreamBuilder - \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\/32511\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flutter Course: 14.7 Stream and StreamBuilder - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"Flutter is a powerful framework that supports asynchronous programming. Among its features, Stream and StreamBuilder are essential for handling the flow of data. In this article, we will take a deep dive into the concepts of Stream and StreamBuilder, their usage, and real examples. 1. What is Stream? Stream is a concept in reactive programming &hellip; \ub354 \ubcf4\uae30 &quot;Flutter Course: 14.7 Stream and StreamBuilder&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/32511\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:09:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:55:00+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=\"4\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/atmokpo.com\/w\/32511\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32511\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"Flutter Course: 14.7 Stream and StreamBuilder\",\"datePublished\":\"2024-11-01T09:09:38+00:00\",\"dateModified\":\"2024-11-01T11:55:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32511\/\"},\"wordCount\":736,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"Flutter course\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/32511\/\",\"url\":\"https:\/\/atmokpo.com\/w\/32511\/\",\"name\":\"Flutter Course: 14.7 Stream and StreamBuilder - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:09:38+00:00\",\"dateModified\":\"2024-11-01T11:55:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32511\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/32511\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/32511\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flutter Course: 14.7 Stream and StreamBuilder\"}]},{\"@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: 14.7 Stream and StreamBuilder - \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\/32511\/","og_locale":"ko_KR","og_type":"article","og_title":"Flutter Course: 14.7 Stream and StreamBuilder - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"Flutter is a powerful framework that supports asynchronous programming. Among its features, Stream and StreamBuilder are essential for handling the flow of data. In this article, we will take a deep dive into the concepts of Stream and StreamBuilder, their usage, and real examples. 1. What is Stream? Stream is a concept in reactive programming &hellip; \ub354 \ubcf4\uae30 \"Flutter Course: 14.7 Stream and StreamBuilder\"","og_url":"https:\/\/atmokpo.com\/w\/32511\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:09:38+00:00","article_modified_time":"2024-11-01T11:55:00+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":"4\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/atmokpo.com\/w\/32511\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/32511\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"Flutter Course: 14.7 Stream and StreamBuilder","datePublished":"2024-11-01T09:09:38+00:00","dateModified":"2024-11-01T11:55:00+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/32511\/"},"wordCount":736,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["Flutter course"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/32511\/","url":"https:\/\/atmokpo.com\/w\/32511\/","name":"Flutter Course: 14.7 Stream and StreamBuilder - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:09:38+00:00","dateModified":"2024-11-01T11:55:00+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/32511\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/32511\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/32511\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"Flutter Course: 14.7 Stream and StreamBuilder"}]},{"@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\/32511","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=32511"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32511\/revisions"}],"predecessor-version":[{"id":32512,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32511\/revisions\/32512"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=32511"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=32511"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=32511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}