{"id":32603,"date":"2024-11-01T09:10:16","date_gmt":"2024-11-01T09:10:16","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=32603"},"modified":"2024-11-01T11:54:38","modified_gmt":"2024-11-01T11:54:38","slug":"flutter-course-understanding-the-structure-of-basic-widgets-and-layouts","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/32603\/","title":{"rendered":"Flutter Course: Understanding the Structure of Basic Widgets and Layouts"},"content":{"rendered":"<p>Flutter is an open-source UI toolkit developed by Google that allows for the creation of native applications across various platforms such as mobile, web, and desktop. One of the main advantages of Flutter is its fast development speed and excellent performance. In this course, we will delve into the structure of basic widgets and layouts used in Flutter. This will help in further constructing complex UIs.<\/p>\n<h2>1. Concept of Widgets<\/h2>\n<p>Everything in Flutter is represented as a widget. Widgets are the building blocks of the UI, dealing with everything displayed on the screen. Text, buttons, images, layouts, and all other elements are constructed as widgets. Moreover, widgets are immutable and operate by updating the UI based on their state.<\/p>\n<h3>1.1 Types of Widgets<\/h3>\n<p>Flutter widgets can be broadly divided into two types:<\/p>\n<ul>\n<li><strong>Stateless Widget<\/strong>: A widget without state that displays the UI based on the data at the time of its creation. Since the state does not change, there is no need for re-rendering.<\/li>\n<li><strong>Stateful Widget<\/strong>: A widget with state that updates the UI when its internal state values change. It can dynamically change based on user inputs or specific events.<\/li>\n<\/ul>\n<h2>2. Widget Tree and Layout<\/h2>\n<p>The UI in Flutter is structured as a hierarchical structure known as the widget tree. Each widget has a parent widget and child widgets, thereby forming the overall layout of the screen.<\/p>\n<h3>2.1 Understanding Widget Tree Structure<\/h3>\n<p>The widget tree is structured as follows:<\/p>\n<ul>\n<li><strong>Root Widget<\/strong>: It sits at the top of all widgets and serves as the starting point of the application. Typically, <code>MaterialApp<\/code> or <code>CupertinoApp<\/code> is used as the root widget.<\/li>\n<li><strong>Container Widget<\/strong>: A basic widget capable of holding other widgets. Widgets such as <code>Container<\/code>, <code>Column<\/code>, and <code>Row<\/code> fall under this category.<\/li>\n<li><strong>Reference Widget<\/strong>: A widget that displays UI elements, including <code>Text<\/code>, <code>Icon<\/code>, and <code>Image<\/code>.<\/li>\n<\/ul>\n<h2>3. Exploring Basic Widgets<\/h2>\n<p>Let&#8217;s look at the most frequently used basic widgets in Flutter.<\/p>\n<h3>3.1 Text Widget<\/h3>\n<p>The <code>Text<\/code> widget is the most basic element for displaying text on the screen. It supports various style properties.<\/p>\n<pre><code>Text(\n  'Hello, Flutter!',\n  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),\n)<\/code><\/pre>\n<h3>3.2 Container Widget<\/h3>\n<p>The <code>Container<\/code> widget is a box-shaped widget that can have child widgets, allowing for settings like position, size, padding, and margin.<\/p>\n<pre><code>Container(\n  width: 100,\n  height: 100,\n  color: Colors.blue,\n  child: Text('Flutter'),\n)<\/code><\/pre>\n<h3>3.3 Row and Column Widgets<\/h3>\n<p>The <code>Row<\/code> and <code>Column<\/code> are layout widgets used for positioning child widgets horizontally and vertically, respectively.<\/p>\n<pre><code>Row(\n  children: <widget>[\n    Text('Left'),\n    Text('Center'),\n    Text('Right'),\n  ],\n)<\/widget><\/code><\/pre>\n<pre><code>Column(\n  children: <widget>[\n    Text('Top'),\n    Text('Center'),\n    Text('Bottom'),\n  ],\n)<\/widget><\/code><\/pre>\n<h3>3.4 Stack Widget<\/h3>\n<p>The <code>Stack<\/code> widget allows you to arrange child widgets on top of each other.<\/p>\n<pre><code>Stack(\n  children: <widget>[\n    Container(color: Colors.red, width: 100, height: 100),\n    Container(color: Colors.green, width: 80, height: 80),\n  ],\n)<\/widget><\/code><\/pre>\n<h3>3.5 ListView Widget<\/h3>\n<p>The <code>ListView<\/code> widget is used to create a scrollable list. It provides functionality for dynamically displaying data.<\/p>\n<pre><code>ListView(\n  children: <widget>[\n    ListTile(title: Text('Item 1')),\n    ListTile(title: Text('Item 2')),\n    ListTile(title: Text('Item 3')),\n  ],\n)<\/widget><\/code><\/pre>\n<h2>4. Constructing Layouts<\/h2>\n<p>Let&#8217;s explore how to create complex layouts by combining widgets. Layouts are fundamentally structured so that the parent widget determines the position and size of the child widgets.<\/p>\n<h3>4.1 Combining Layout Widgets<\/h3>\n<p>You can create new layouts by combining various widgets.<\/p>\n<pre><code>Scaffold(\n  appBar: AppBar(title: Text('Flutter Layout')),\n  body: Column(\n    children: <widget>[\n      Container(color: Colors.blue, height: 100),\n      Row(\n        children: <widget>[\n          Expanded(child: Container(color: Colors.red, height: 50)),\n          Expanded(child: Container(color: Colors.green, height: 50)),\n        ],\n      ),\n      ListView(\n        shrinkWrap: true,\n        children: <widget>[\n          ListTile(title: Text('Item 1')),\n          ListTile(title: Text('Item 2')),\n          ListTile(title: Text('Item 3')),\n        ],\n      ),\n    ],\n  ),\n)<\/widget><\/widget><\/widget><\/code><\/pre>\n<h2>5. The Importance of State Management<\/h2>\n<p>Stateful widgets play an important role in state management. The <code>setState()<\/code> method is used to handle state changes within the widget to re-render the UI.<\/p>\n<pre><code>class CounterWidget extends StatefulWidget {\n  @override\n  _CounterWidgetState createState() =&gt; _CounterWidgetState();\n}\n\nclass _CounterWidgetState extends State<CounterWidget> {\n  int _counter = 0;\n\n  void _incrementCounter() {\n    setState(() {\n      _counter++;\n    });\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Column(\n      children: <widget>[\n        Text('State change on button press: $_counter'),\n        ElevatedButton(\n          onPressed: _incrementCounter,\n          child: Text('Increase'),\n        ),\n      ],\n    );\n  }\n}<\/widget><\/CounterWidget><\/code><\/pre>\n<h2>6. Various Layout Patterns<\/h2>\n<p>Flutter offers various layout patterns, each designed to meet specific UI requirements.<\/p>\n<h3>6.1 GridView<\/h3>\n<p>The <code>GridView<\/code> widget provides a grid layout, often used for image galleries.<\/p>\n<pre><code>GridView.count(\n  crossAxisCount: 2,\n  children: <widget>[\n    Container(color: Colors.red),\n    Container(color: Colors.green),\n    Container(color: Colors.blue),\n    Container(color: Colors.yellow),\n  ],\n)<\/widget><\/code><\/pre>\n<h3>6.2 Wrap<\/h3>\n<p>The <code>Wrap<\/code> widget provides a flexible layout that wraps child widgets onto the next line when space is insufficient.<\/p>\n<pre><code>Wrap(\n  children: <widget>[\n    Chip(label: Text('Chip 1')),\n    Chip(label: Text('Chip 2')),\n    Chip(label: Text('Chip 3')),\n  ],\n)<\/widget><\/code><\/pre>\n<h2>7. Conclusion<\/h2>\n<p>In this course, we reviewed the basic widgets and layout structures in Flutter. Understanding widgets is the foundational step in creating UIs with Flutter, enabling the implementation of more complex UIs and state management. Utilize various widgets and layouts in real projects to create amazing applications. In the next session, we will conduct hands-on practice to build a real application.<\/p>\n<p>For more resources on Flutter, refer to the official documentation and community resources for deeper learning.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Flutter is an open-source UI toolkit developed by Google that allows for the creation of native applications across various platforms such as mobile, web, and desktop. One of the main advantages of Flutter is its fast development speed and excellent performance. In this course, we will delve into the structure of basic widgets and layouts &hellip; <a href=\"https:\/\/atmokpo.com\/w\/32603\/\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;Flutter Course: Understanding the Structure of Basic Widgets and Layouts&#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-32603","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: Understanding the Structure of Basic Widgets and Layouts - \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\/32603\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flutter Course: Understanding the Structure of Basic Widgets and Layouts - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"Flutter is an open-source UI toolkit developed by Google that allows for the creation of native applications across various platforms such as mobile, web, and desktop. One of the main advantages of Flutter is its fast development speed and excellent performance. In this course, we will delve into the structure of basic widgets and layouts &hellip; \ub354 \ubcf4\uae30 &quot;Flutter Course: Understanding the Structure of Basic Widgets and Layouts&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/32603\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:10:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:54:38+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\/32603\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32603\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"Flutter Course: Understanding the Structure of Basic Widgets and Layouts\",\"datePublished\":\"2024-11-01T09:10:16+00:00\",\"dateModified\":\"2024-11-01T11:54:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32603\/\"},\"wordCount\":604,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"Flutter course\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/32603\/\",\"url\":\"https:\/\/atmokpo.com\/w\/32603\/\",\"name\":\"Flutter Course: Understanding the Structure of Basic Widgets and Layouts - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:10:16+00:00\",\"dateModified\":\"2024-11-01T11:54:38+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32603\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/32603\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/32603\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flutter Course: Understanding the Structure of Basic Widgets and Layouts\"}]},{\"@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: Understanding the Structure of Basic Widgets and Layouts - \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\/32603\/","og_locale":"ko_KR","og_type":"article","og_title":"Flutter Course: Understanding the Structure of Basic Widgets and Layouts - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"Flutter is an open-source UI toolkit developed by Google that allows for the creation of native applications across various platforms such as mobile, web, and desktop. One of the main advantages of Flutter is its fast development speed and excellent performance. In this course, we will delve into the structure of basic widgets and layouts &hellip; \ub354 \ubcf4\uae30 \"Flutter Course: Understanding the Structure of Basic Widgets and Layouts\"","og_url":"https:\/\/atmokpo.com\/w\/32603\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:10:16+00:00","article_modified_time":"2024-11-01T11:54:38+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\/32603\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/32603\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"Flutter Course: Understanding the Structure of Basic Widgets and Layouts","datePublished":"2024-11-01T09:10:16+00:00","dateModified":"2024-11-01T11:54:38+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/32603\/"},"wordCount":604,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["Flutter course"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/32603\/","url":"https:\/\/atmokpo.com\/w\/32603\/","name":"Flutter Course: Understanding the Structure of Basic Widgets and Layouts - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:10:16+00:00","dateModified":"2024-11-01T11:54:38+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/32603\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/32603\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/32603\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"Flutter Course: Understanding the Structure of Basic Widgets and Layouts"}]},{"@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\/32603","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=32603"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32603\/revisions"}],"predecessor-version":[{"id":32604,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32603\/revisions\/32604"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=32603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=32603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=32603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}