{"id":123,"date":"2025-07-16T15:04:50","date_gmt":"2025-07-16T06:04:50","guid":{"rendered":"http:\/\/34.64.61.65\/?p=123"},"modified":"2025-07-16T15:06:31","modified_gmt":"2025-07-16T06:06:31","slug":"flutter%ec%8b%a4%ec%a0%84_%ea%b0%9c%eb%85%90","status":"publish","type":"post","link":"https:\/\/hed-g.me\/?p=123","title":{"rendered":"[Flutter]\uc2e4\uc804_\uac1c\ub150"},"content":{"rendered":"\n<h2 class=\"wp-block-heading is-style-text-subtitle is-style-text-subtitle--1\">Flutter \uac1c\ubc1c \uc785\ubb38: \uc704\uc82f, \ub808\uc774\uc544\uc6c3, \uadf8\ub9ac\uace0 \ud575\uc2ec \uac1c\ub150 \ud83d\ude80<\/h2>\n\n\n\n<p>Flutter\ub294 \ud06c\ub85c\uc2a4 \ud50c\ub7ab\ud3fc \uc571 \uac1c\ubc1c\uc5d0 \ub9ce\uc774 \uc0ac\uc6a9\ub418\ub294 \ud504\ub808\uc784\uc6cc\ud06c\uc784.<br>\nFlutter \uac1c\ubc1c\uc744 \uc2dc\uc791\ud560 \ub54c \uc54c\uc544\uc57c \ud560 \uae30\ubcf8\uc801\uc778 \ub0b4\uc6a9\ub4e4\uc744 \uc815\ub9ac\ud588\uc74c.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udcda 1. Flutter \uc704\uc82f\uc758 \uc885\ub958<\/h3>\n\n\n\n<p>Flutter\ub294 \ubaa8\ub4e0 \uac83\uc744 \uc704\uc82f\uc73c\ub85c \ub2e4\ub8f8. \uc704\uc82f\uc740 \ud654\uba74\uc5d0 \ubcf4\uc774\ub294 UI \uc694\uc18c\ubfd0\ub9cc \uc544\ub2c8\ub77c \ub808\uc774\uc544\uc6c3, \uc0c1\ud638\uc791\uc6a9 \ub4f1 \ubaa8\ub4e0 \uac83\uc744 \ud3ec\ud568\ud568.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><p><strong><code>StatefulWidget<\/code><\/strong>: \uac12\uc774 \ubc14\ub00c\uba74 \ub2e4\uc2dc \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\ub294 \uc704\uc82f\uc784. <code>setState<\/code> \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc704\uc82f\uc758 \uc0c1\ud0dc\ub97c \ubcc0\uacbd\ud558\uace0 UI\ub97c \uc5c5\ub370\uc774\ud2b8\ud560 \uc218 \uc788\uc74c.<\/p><br><pre>class MyStatefulWidget extends StatefulWidget {<br>@override<br>_MyStatefulWidgetState createState() => _MyStatefulWidgetState();<br>}<br><br>class _MyStatefulWidgetState extends State&lt;MyStatefulWidget> {<br>int _counter = 0;<br><br>void _incrementCounter() {<br>  setState(() {<br>    _counter++;<br>  });<br>}<br><br>@override<br>Widget build(BuildContext context) {<br>  return Column(<br>    children: &lt;Widget>[<br>      Text('Counter: $_counter'),<br>      ElevatedButton(<br>        onPressed: _incrementCounter,<br>        child: Text('Increment'),<br>      ),<br>    ],<br>  );<br>}<br>}<\/pre><br><\/li>\n\n\n\n<li><p><strong><code>StatelessWidget<\/code><\/strong>: \ucc98\uc74c \ud55c \ubc88\ub9cc \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\ub294 \uc704\uc82f\uc784. \ud55c \ubc88 \uadf8\ub824\uc9c0\uba74 UI\uac00 \ubcc0\uacbd\ub418\uc9c0 \uc54a\uc74c.<\/p><br><pre><code class=\"language-dart\">class MyStatelessWidget extends StatelessWidget {<br>final String title;<br><br>MyStatelessWidget({required this.title});<br><br>@override<br>Widget build(BuildContext context) {<br>  return Text(title);<br>}<br>}<\/code><\/pre><br><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83c\udfa8 2. \uc704\uc82f \ubc30\uce58 \ubc0f \uc815\ub82c<\/h3>\n\n\n\n<p>Flutter\uc5d0\uc11c \uc704\uc82f\uc744 \ubc30\uce58\ud558\uace0 \uc815\ub82c\ud558\ub294 \ub370 \uc0ac\uc6a9\ub418\ub294 \uc8fc\uc694 \uac1c\ub150\ub4e4\uc784.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>child<\/code><\/strong>: \ud558\uc704 \uc704\uc82f\uc774 <strong>\ud55c \uac1c<\/strong>\uc77c \ub54c \uc0ac\uc6a9\ud568.<br><pre><code class=\"language-dart\">Container(<br>child: Text('Hello World'),<br>)<\/code><\/pre><br><\/li>\n\n\n\n<li><strong><code>children<\/code><\/strong>: \ud558\uc704 \uc704\uc82f\uc774 <strong>\uc5ec\ub7ec \uac1c<\/strong>\uc77c \ub54c \uc0ac\uc6a9\ud568.<br><pre><code class=\"language-dart\">Column(<br>children: [<br>  Text('First item'),<br>  Text('Second item'),<br>],<br>)<\/code><\/pre><br><\/li>\n\n\n\n<li><strong><code>AspectRatio<\/code><\/strong>: \uc774\ubbf8\uc9c0 \ub4f1\uc758 \ube44\uc728\uc744 \ub9de\ucd9c \ub54c \uc0ac\uc6a9\ud568.<br><pre><code class=\"language-dart\">AspectRatio(<br>aspectRatio: 16 \/ 9, \/\/ 16:9 \ube44\uc728<br>child: Image.network('https:\/\/example.com\/image.jpg'),<br>)<\/code><\/pre><br><\/li>\n\n\n\n<li><strong><code>Stack<\/code><\/strong>: \uc704\uc82f\uc774 \uc704\ub85c \uacb9\uccd0\uc11c \uc313\uc774\ub294 \ubc29\uc2dd\uc784.<br><pre><code class=\"language-dart\">Stack(<br>children: &lt;Widget>[<br>  Container(color: Colors.red, width: 100, height: 100),<br>  Container(color: Colors.blue, width: 80, height: 80),<br>],<br>)<\/code><\/pre><br><\/li>\n\n\n\n<li><strong><code>Positioned<\/code><\/strong>: <code>Stack<\/code> \uc704\uc82f \uc548\uc5d0\uc11c \uc313\uc778 \uc704\uc82f\uc758 \uc704\uce58\ub97c \uc870\uc815\ud560 \ub54c \uc0ac\uc6a9\ud568.<br><pre><code class=\"language-dart\">Stack(<br>children: &lt;Widget>[<br>  Container(color: Colors.red, width: 200, height: 200),<br>  Positioned(<br>    top: 20,<br>    left: 20,<br>    child: Container(color: Colors.blue, width: 100, height: 100),<br>  ),<br>],<br>)<\/code><\/pre><br><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udccf 3. <code>EdgeInsets<\/code> \uc774\ud574\ud558\uae30: \ub9c8\uc9c4\uacfc \ud328\ub529<\/h3>\n\n\n\n<p>Flutter\uc5d0\uc11c\ub294 CSS\ub098 JavaScript\uc640 \ub2e4\ub974\uac8c <strong><code>EdgeInsets<\/code><\/strong> \ud074\ub798\uc2a4\ub97c \uc0ac\uc6a9\ud558\uc5ec <code>margin<\/code>\uacfc <code>padding<\/code>\uc744 \uc9c0\uc815\ud568.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>EdgeInsets.all(5)<\/code><\/strong>: \ubaa8\ub4e0 \ubc29\ud5a5(\uc0c1\ud558\uc88c\uc6b0)\uc5d0 5\ub9cc\ud07c\uc758 \uc5ec\ubc31\uc744 \uc90c.<br><pre><code class=\"language-dart\">Padding(<br>padding: EdgeInsets.all(5.0),<br>child: Text('All padding'),<br>)<\/code><\/pre><br><\/li>\n\n\n\n<li><strong><code>EdgeInsets.only(top: 5)<\/code><\/strong>: \ud2b9\uc815 \uc601\uc5ed, \uc608\ub97c \ub4e4\uc5b4 <code>top<\/code>\uc5d0\ub9cc 5\ub9cc\ud07c\uc758 \uc5ec\ubc31\uc744 \uc90c.<br><pre><code class=\"language-dart\">Padding(<br>padding: EdgeInsets.only(top: 5.0),<br>child: Text('Top padding only'),<br>)<\/code><\/pre><br><\/li>\n\n\n\n<li><strong><code>EdgeInsets.fromLTRB(5, 10, 0, 0)<\/code><\/strong>: \uac01\uac01 \uc67c\ucabd(Left), \uc704(Top), \uc624\ub978\ucabd(Right), \uc544\ub798(Bottom) \uc21c\uc11c\ub85c \uc5ec\ubc31\uc744 \uc9c0\uc815\ud568 (\uc608: \uc67c\ucabd 5, \uc704 10).<br><pre><code class=\"language-dart\">Padding(<br>padding: EdgeInsets.fromLTRB(5.0, 10.0, 0.0, 0.0),<br>child: Text('LTRB padding'),<br>)<\/code><\/pre><br><\/li>\n\n\n\n<li><strong><code>EdgeInsets.symmetric(horizontal: 5, vertical: 10)<\/code><\/strong>: \uac00\ub85c(\uc67c\ucabd, \uc624\ub978\ucabd)\ub85c 5, \uc138\ub85c(\uc704, \uc544\ub798)\ub85c 10\ub9cc\ud07c\uc758 \uc5ec\ubc31\uc744 \uc90c.<br><pre><code class=\"language-dart\">Padding(<br>padding: EdgeInsets.symmetric(horizontal: 5.0, vertical: 10.0),<br>child: Text('Symmetric padding'),<br>)<\/code><\/pre><br><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u2699\ufe0f 4. \uc704\uc82f \uc815\ub82c \ubc0f \ud06c\uae30 \uc870\uc808<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>mainAxisAlignment<\/code><\/strong>: \uc8fc \ucd95(main axis)\uc744 \ub530\ub77c \uc704\uc82f\ub4e4\uc744 \uc815\ub82c\ud568. (\uc608: <code>Row<\/code>\uc5d0\uc11c\ub294 \uac00\ub85c, <code>Column<\/code>\uc5d0\uc11c\ub294 \uc138\ub85c)<br><pre><code class=\"language-dart\">Row(<br>mainAxisAlignment: MainAxisAlignment.center, \/\/ \uac00\ub85c \uc911\uc559 \uc815\ub82c<br>children: [Text('A'), Text('B')],<br>)<\/code><\/pre><br><\/li>\n\n\n\n<li><strong><code>crossAxisAlignment<\/code><\/strong>: \uad50\ucc28 \ucd95(cross axis)\uc744 \ub530\ub77c \uc704\uc82f\ub4e4\uc744 \uc815\ub82c\ud568. (\uc608: <code>Row<\/code>\uc5d0\uc11c\ub294 \uc138\ub85c, <code>Column<\/code>\uc5d0\uc11c\ub294 \uac00\ub85c)<br><pre><code class=\"language-dart\">Column(<br>crossAxisAlignment: CrossAxisAlignment.start, \/\/ \uc138\ub85c \uc2dc\uc791\uc810 \uc815\ub82c<br>children: [Text('A'), Text('B')],<br>)<\/code><\/pre><br><\/li>\n\n\n\n<li><strong><code>mainAxisSize<\/code><\/strong>: \uc8fc \ucd95\uc758 \ud06c\uae30\ub97c \uc870\uc808\ud568.<br><pre><code class=\"language-dart\">Row(<br>mainAxisSize: MainAxisSize.min, \/\/ \ud544\uc694\ud55c \ucd5c\uc18c\ud55c\uc758 \uacf5\uac04\ub9cc \ucc28\uc9c0<br>children: [Text('A'), Text('B')],<br>)<\/code><\/pre><br><\/li>\n\n\n\n<li><strong><code>Expanded<\/code><\/strong>: \uc790\uc2dd \uc704\uc82f\uc774 \ubd80\ubaa8 \uc704\uc82f\uc758 \ub0a8\uc740 \uacf5\uac04\uc744 \ud655\uc7a5\ud558\uc5ec \ucc44\uc6b0\ub3c4\ub85d \ud568.<br><pre><code class=\"language-dart\">Row(<br>children: [<br>  Text('Fixed Width'),<br>  Expanded(<br>    child: Text('Expanded Text that takes remaining space'),<br>  ),<br>],<br>)<\/code><\/pre><br><\/li>\n\n\n\n<li><strong><code>Flexible<\/code><\/strong>: \uc790\uc2dd \uc704\uc82f\uc774 \ubd80\ubaa8 \uc704\uc82f\uc758 \ub0a8\uc740 \uacf5\uac04\uc744 \uc720\uc5f0\ud558\uac8c \ucc44\uc6b0\ub3c4\ub85d \ud558\uc9c0\ub9cc, \ud544\uc694\ud55c \uacf5\uac04\ub9cc\ud07c\ub9cc \ucc28\uc9c0\ud560 \uc218 \uc788\ub3c4\ub85d \ud568.<br><pre><code class=\"language-dart\">Row(<br>children: [<br>  Text('Fixed Width'),<br>  Flexible(<br>    child: Text('Flexible Text that takes available space'),<br>  ),<br>],<br>)<\/code><\/pre><br><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Flutter \uac1c\ubc1c \uc785\ubb38: \uc704\uc82f, \ub808\uc774\uc544\uc6c3, \uadf8\ub9ac\uace0 \ud575\uc2ec \uac1c\ub150 \ud83d\ude80 Flutter\ub294 \ud06c\ub85c\uc2a4 \ud50c\ub7ab\ud3fc \uc571 \uac1c\ubc1c\uc5d0 \ub9ce\uc774 \uc0ac\uc6a9\ub418\ub294 \ud504\ub808\uc784\uc6cc\ud06c\uc784. Flutter \uac1c\ubc1c\uc744 \uc2dc\uc791\ud560 \ub54c \uc54c\uc544\uc57c \ud560 \uae30\ubcf8\uc801\uc778 \ub0b4\uc6a9\ub4e4\uc744 \uc815\ub9ac\ud588\uc74c. \ud83d\udcda 1. Flutter \uc704\uc82f\uc758 \uc885\ub958 Flutter\ub294 \ubaa8\ub4e0 \uac83\uc744 \uc704\uc82f\uc73c\ub85c \ub2e4\ub8f8. \uc704\uc82f\uc740 \ud654\uba74\uc5d0 \ubcf4\uc774\ub294 UI \uc694\uc18c\ubfd0\ub9cc \uc544\ub2c8\ub77c \ub808\uc774\uc544\uc6c3, \uc0c1\ud638\uc791\uc6a9 \ub4f1 \ubaa8\ub4e0 \uac83\uc744 \ud3ec\ud568\ud568. \ud83c\udfa8 2. \uc704\uc82f \ubc30\uce58 \ubc0f \uc815\ub82c Flutter\uc5d0\uc11c [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[43],"tags":[114,113,111,112,106],"class_list":["post-123","post","type-post","status-publish","format-standard","hentry","category-flutter","tag-android","tag-ios","tag-111","tag-112","tag-106"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=123"}],"version-history":[{"count":3,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/123\/revisions"}],"predecessor-version":[{"id":138,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/123\/revisions\/138"}],"wp:attachment":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}