{"id":32577,"date":"2024-11-01T09:10:05","date_gmt":"2024-11-01T09:10:05","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=32577"},"modified":"2024-11-01T11:54:44","modified_gmt":"2024-11-01T11:54:44","slug":"flutter-course-4-3-widget-tree","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/32577\/","title":{"rendered":"Flutter Course, 4.3 Widget Tree"},"content":{"rendered":"<p>\n    Flutter is an open-source UI software development kit (SDK) developed by Google that supports writing applications for various platforms such as mobile, web, and desktop. One of the fundamental concepts of Flutter is &#8216;widget&#8217;. In this section, we will take a closer look at widgets and widget trees, and explore how to structure Flutter applications using them.\n<\/p>\n<h2>1. What is a Widget?<\/h2>\n<p>\n    A &#8216;widget&#8217; is the basic building block of the UI in Flutter. Everything in Flutter consists of widgets, which encompass all the elements necessary to create the UI of an application. All UI elements, such as buttons, text, and images, are represented as widgets. Widgets can be categorized into two types:\n<\/p>\n<ul>\n<li><strong>Stateless Widget<\/strong>: This widget does not have any state and is used to draw a UI that does not change. For example, it is used to display simple text or icons.<\/li>\n<li><strong>Stateful Widget<\/strong>: This widget has state and is used when the UI changes based on user interactions. For instance, it applies when the color changes when a button is clicked.<\/li>\n<\/ul>\n<h2>2. Widget Tree<\/h2>\n<p>\n    The widget tree is a tree structure that represents the hierarchy of widgets. Each widget can be a child of another widget, often forming patterns and linear structures. Understanding the widget tree is vital for efficiently designing and debugging Flutter applications.\n<\/p>\n<h3>2.1 Structure of the Widget Tree<\/h3>\n<p>\n    The widget tree starts with the root widget and expands downwards to the connected child widgets. For example, widgets like AppBar and Scaffold usually serve as the root and contain various connected child widgets.<br \/>\n    The <code>build()<\/code> method is used to define and return this widget tree.\n<\/p>\n<h3>2.2 Creating a Widget Tree<\/h3>\n<p>\n    The basic structure of a Flutter app begins with a Stateless Widget called <code>MyApp<\/code>. What this widget returns becomes the root of the widget tree.<br \/>\n    Let&#8217;s look at a simple code example to examine the basic structure of the widget tree:\n<\/p>\n<pre><code>\nvoid main() {\n  runApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      home: Scaffold(\n        appBar: AppBar(\n          title: Text('Widget Tree Example'),\n        ),\n        body: Center(\n          child: Text('Hello, Flutter!'),\n        ),\n      ),\n    );\n  }\n}\n<\/code><\/pre>\n<p>\n    The code above illustrates how various widgets such as <code>MaterialApp<\/code>, <code>Scaffold<\/code>, <code>AppBar<\/code>, <code>Center<\/code>,<br \/>\n    and <code>Text<\/code> are interconnected. Through this structure, Flutter composes the UI and presents it visually to users.\n<\/p>\n<h2>3. Widget Reusability<\/h2>\n<p>\n    Understanding the widget tree can enhance the reusability of widgets. When building complex user interfaces, you can create smaller widgets and combine them to construct larger widgets.<br \/>\n    If you commonly use a widget with specific functionalities, you can create that widget as a separate class or widget for easy reuse.\n<\/p>\n<h2>4. Widget Composition in the Screen<\/h2>\n<p>\n    In Flutter, widgets can be composed in various ways. Here are some widgets that are frequently used when structuring screens:\n<\/p>\n<ul>\n<li><strong>Column<\/strong>: A widget that arranges its children vertically.<\/li>\n<li><strong>Row<\/strong>: A widget that arranges its children horizontally.<\/li>\n<li><strong>Stack<\/strong>: A widget that allows you to stack widgets on top of each other.<\/li>\n<li><strong>ListView<\/strong>: A widget that creates a scrollable list.<\/li>\n<li><strong>GridView<\/strong>: A widget that arranges items in a grid format.<\/li>\n<\/ul>\n<h2>5. State Management of Widgets<\/h2>\n<p>\n    Stateful widgets play a crucial role in managing the state of the user interface. There are various ways to manage state, including the following methods:\n<\/p>\n<ul>\n<li><strong>setState()<\/strong>: The most basic method for state management, which refreshes the UI when the state changes.<\/li>\n<li><strong>InheritedWidget<\/strong>: A widget that can pass state down to child widgets. This method makes it easier to pass data from higher to lower levels in the widget tree.<\/li>\n<li><strong>Provider Package<\/strong>: One of the most commonly used packages for state management.<br \/>\n        This package allows all widgets to easily read and modify the state.<\/li>\n<\/ul>\n<h2>6. Utilizing Various Widgets<\/h2>\n<p>\n    Leveraging the widget tree enables easy implementation of complex and diverse user interfaces.<br \/>\n    For example, the following code creates a complex layout that includes multiple widgets:\n<\/p>\n<pre><code>\n@override\nWidget build(BuildContext context) {\n  return Scaffold(\n    appBar: AppBar(\n      title: Text('Utilizing Various Widgets'),\n    ),\n    body: Column(\n      children: <widget>[\n        Row(\n          mainAxisAlignment: MainAxisAlignment.spaceAround,\n          children: <widget>[\n            Icon(Icons.home),\n            Icon(Icons.favorite),\n            Icon(Icons.settings),\n          ],\n        ),\n        Expanded(\n          child: ListView.builder(\n            itemCount: 100,\n            itemBuilder: (context, index) {\n              return ListTile(\n                title: Text('Item $index'),\n              );\n            },\n          ),\n        ),\n      ],\n    ),\n  );\n}\n<\/widget><\/widget><\/code><\/pre>\n<p>\n    The above code arranges icons in a horizontal row and implements a vertical scrollable list.<br \/>\n    This way of combining widgets to create various layouts is one of the attractive features of Flutter.\n<\/p>\n<h2>7. Performance Optimization and Tips<\/h2>\n<p>\n    When utilizing the widget tree, it&#8217;s also crucial to optimize performance.<br \/>\n    Here are some tips to enhance performance:\n<\/p>\n<ul>\n<li><strong>Optimize State Management<\/strong>: Reduce unnecessary <code>setState()<\/code> calls and ensure that widgets are only re-rendered under specific conditions.<\/li>\n<li><strong>Use the const Keyword<\/strong>: Declaring a widget as <code>const<\/code> prevents unnecessary re-rendering.<\/li>\n<li><strong>Lazy Loading<\/strong>: Set to load items only when necessary in list views, improving performance.<\/li>\n<\/ul>\n<h2>8. Conclusion<\/h2>\n<p>\n    Widgets and the widget tree are core concepts of Flutter applications, and understanding them allows for building applications more effectively and efficiently.<br \/>\n    By utilizing Flutter&#8217;s powerful UI components, you can easily implement complex user interfaces, and through concepts such as widget reusability and state management, you can optimize performance.<br \/>\n    Now you too can understand and utilize Flutter&#8217;s widget trees to develop your desired applications in an even more attractive way.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Flutter is an open-source UI software development kit (SDK) developed by Google that supports writing applications for various platforms such as mobile, web, and desktop. One of the fundamental concepts of Flutter is &#8216;widget&#8217;. In this section, we will take a closer look at widgets and widget trees, and explore how to structure Flutter applications &hellip; <a href=\"https:\/\/atmokpo.com\/w\/32577\/\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;Flutter Course, 4.3 Widget Tree&#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-32577","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, 4.3 Widget Tree - \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\/32577\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flutter Course, 4.3 Widget Tree - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"Flutter is an open-source UI software development kit (SDK) developed by Google that supports writing applications for various platforms such as mobile, web, and desktop. One of the fundamental concepts of Flutter is &#8216;widget&#8217;. In this section, we will take a closer look at widgets and widget trees, and explore how to structure Flutter applications &hellip; \ub354 \ubcf4\uae30 &quot;Flutter Course, 4.3 Widget Tree&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/32577\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:10:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:54:44+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\/32577\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32577\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"Flutter Course, 4.3 Widget Tree\",\"datePublished\":\"2024-11-01T09:10:05+00:00\",\"dateModified\":\"2024-11-01T11:54:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32577\/\"},\"wordCount\":760,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"Flutter course\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/32577\/\",\"url\":\"https:\/\/atmokpo.com\/w\/32577\/\",\"name\":\"Flutter Course, 4.3 Widget Tree - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:10:05+00:00\",\"dateModified\":\"2024-11-01T11:54:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32577\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/32577\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/32577\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flutter Course, 4.3 Widget Tree\"}]},{\"@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, 4.3 Widget Tree - \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\/32577\/","og_locale":"ko_KR","og_type":"article","og_title":"Flutter Course, 4.3 Widget Tree - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"Flutter is an open-source UI software development kit (SDK) developed by Google that supports writing applications for various platforms such as mobile, web, and desktop. One of the fundamental concepts of Flutter is &#8216;widget&#8217;. In this section, we will take a closer look at widgets and widget trees, and explore how to structure Flutter applications &hellip; \ub354 \ubcf4\uae30 \"Flutter Course, 4.3 Widget Tree\"","og_url":"https:\/\/atmokpo.com\/w\/32577\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:10:05+00:00","article_modified_time":"2024-11-01T11:54:44+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\/32577\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/32577\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"Flutter Course, 4.3 Widget Tree","datePublished":"2024-11-01T09:10:05+00:00","dateModified":"2024-11-01T11:54:44+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/32577\/"},"wordCount":760,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["Flutter course"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/32577\/","url":"https:\/\/atmokpo.com\/w\/32577\/","name":"Flutter Course, 4.3 Widget Tree - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:10:05+00:00","dateModified":"2024-11-01T11:54:44+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/32577\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/32577\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/32577\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"Flutter Course, 4.3 Widget Tree"}]},{"@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\/32577","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=32577"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32577\/revisions"}],"predecessor-version":[{"id":32578,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32577\/revisions\/32578"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=32577"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=32577"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=32577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}