{"id":929,"date":"2020-09-14T09:00:04","date_gmt":"2020-09-14T00:00:04","guid":{"rendered":"http:\/\/mobilelab.khu.ac.kr\/?p=929"},"modified":"2020-04-05T19:10:00","modified_gmt":"2020-04-05T10:10:00","slug":"be-dart-programmer-35","status":"publish","type":"post","link":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/2020\/09\/14\/be-dart-programmer-35\/","title":{"rendered":"Dart Programmer \ub418\uae30 [35]"},"content":{"rendered":"\n<h4>&lt; Flutter \ud65c\uc6a9\ud558\uae30 &#8211; Skeleton Program for Future Usage &gt;<\/h4>\n\n\n\n<p>Flutter\uac00 \uac15\ub825\ud558\ub2e4\uace0 \ub290\ub080\ub2e4\uba74 \ub2e4\ud589\uc774\uc9c0\ub9cc, \ucc98\uc74c \ubaa8\ubc14\uc77c \ud504\ub85c\uadf8\ub798\ubc0d\uc744 cross-platform\uc73c\ub85c \uc2dc\ub3c4\ud55c\ub2e4\uba74, \ubb50\uac00 \uc88b\uc740\uac74\uac00 \uc2f6\uc744 \uac83 \uc785\ub2c8\ub2e4. \uc544\ub9c8\ub3c4 &#8220;\uc65c \uc774\ub807\uac8c \ubcf5\uc7a1\ud55c\uac70\uc57c?&#8221;\ud558\uace0 \uc758\ubb38\uc744 \uac00\uc9c8\uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. \uac1c\uc778\uc801\uc73c\ub85c JavaScript \uae30\ubc18\uc758 corss-platform\uc778 Cordova\uacfc PhoneGap\uc744 \ub2e4\ub904\ubcf8 \uc785\uc7a5\uc5d0\uc11c, JavsScript \uae30\ubc18\uc758 \uc811\uadfc\uc740 \uc9c4\uc785 \uc7a5\ubcbd\uc774 \uc758\uc678\ub85c \ub192\uc558\ub2e4\uace0 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. JavaScript, HTML, CSS \ub4f1\uc758 \uc5b8\uc5b4\uc5d0 \ub300\ud55c \uc774\ud574\ub3c4 \ud544\uc694\ud558\uc9c0\ub9cc, \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uc774 \uae30\uc220\ub4e4\ub85c \ub9cc\ub4dc\ub294 \uc791\uc5c5\uc740 \ub9e4\uc6b0 \uace0\ub418\uba70, \ub514\ubc14\uc774\uc2a4\uc5d0 \ub9de\ucdb0\uc11c \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uc870\uc815\ud55c\ub2e4\ub294 \uac83\ub3c4 \ub9cc\uc871\uc2a4\ub7ec\uc6b4 \ud488\uc9c8\uc744 \uc5bb\uae30 \uc5b4\ub835\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\uc774\ubc88 \uae00\uc774 Flutter\uc758 \ub9c8\uc9c0\ub9c9\uc5d0 \ud574\ub2f9\ud558\ub294 \uae00\uc774\uae30\uc5d0, \ud5a5\ud6c4\ub97c \ub300\ube44\ud558\uc5ec \ub098\ub984 \ub450\uace0 \ub450\uace0 \uc7ac\ud65c\uc6a9 \ud560 \uc218 \uc788\ub294 \ud615\ud0dc\uc758 \ud504\ub85c\uadf8\ub7a8\uc744 \ub9cc\ub4e4\uace0\uc790 \ud569\ub2c8\ub2e4. \uc774\ub97c \ud1a0\ub300\ub85c \ubcf8\uc778\uc774 \uc6d0\ud558\ub294 \uae30\ub2a5\uc744 \ucc44\uc6b0\uace0, \uae30\ub2a5\uc5d0 \uc801\ud569\ud55c \ud615\ud0dc\uc758 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub85c \uac1c\uc120\ud558\ub294 \uc791\uc5c5\uc744 \ud560 \uc218 \uc788\uc744 \uac81\ub2c8\ub2e4. <\/p>\n\n\n\n<h4>Step.1 Select Widgets<\/h4>\n\n\n\n<p>&#8220;Widget is Everything&#8221; \uc774\ub77c\ub294 \ud45c\ud604\uc774 \uc5ec\ub7ec\ubc88 \ub4f1\uc7a5 \ud55c \uac83\ucc98\ub7fc, Widget\ub4e4\uc758 \uc874\uc7ac\ub97c \uc54c\uace0, \uc774\ud574\ud55c \ud6c4, \uc774\ub4e4\uc744 \uc5ee\ub294 \uae30\uc220\uc740 Flutter\ub97c \uc0ac\uc6a9\ud568\uc5d0 \ub9e4\uc6b0 \uc911\uc694\ud55c \uae30\uc220 \uc785\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574\uc11c, \ub2e4\uc74c\uc758 \ub2e8\uacc4\ub97c \uad8c\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\uccab\ubc88\uc9f8\ub85c Flutter\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 Widget \ub4e4\uc774 \ub108\ubb34 \ub9ce\uae30\uc5d0, \uc5b4\ub5a4 Widget\uc774 \uc788\ub294\uc9c0 \uc54c\uace0, \uc4f8\ub9cc\ud55c Widget\uc744 \uc120\ud0dd\ud558\ub294 \ubc29\ubc95\uc774 \ud544\uc694 \ud569\ub2c8\ub2e4. \uc544\ub798\ub294 \uadf8\ub9bc\uacfc \uae00\uc744 \ud1b5\ud574\uc11c Flutter\uc758 Widget\ub4e4\uc744 \ucc3e\uc544\ubcfc \uc218 \uc788\ub294 \uc0ac\uc774\ud2b8 \uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<ul><li>https:\/\/flutter.dev\/docs\/reference\/widgets<\/li><li>https:\/\/flutter.dev\/docs\/development\/ui\/widgets<\/li><\/ul>\n\n\n\n<p>\uc2dc\uac04\uc774 \uc788\ub2e4\uba74, \uc2e4\uc81c\ub85c \ub3d9\uc791\ud558\ub294 \ud654\uba74\uacfc \uac04\ub2e8\ud55c \uc124\uba85\uc744 \ubcfc \uc218 \uc788\ub294 YouTube\ub97c \ucd94\ucc9c\ud569\ub2c8\ub2e4. Dart\/Flutter\ub294 \uc544\ub798\uc640 \uac19\uc774 \uacf5\uc2dd YouTube\ub97c \ud1b5\ud574\uc11c \uac01\uc885 \ud589\uc0ac\uc640 \uae30\uc220 \ubc1c\ud45c\uc5d0 \ub300\ud55c \uc0ac\ud56d\uc744 \ub3d9\uc601\uc0c1\uc73c\ub85c \ubc30\ud3ec\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. <\/p>\n\n\n\n<ul><li>https:\/\/www.youtube.com\/channel\/UCwXdFgeE9KYzlDdR7TG9cMw<\/li><\/ul>\n\n\n\n<p>\ud2b9\ud788, \uc774 YouTube\uc5d0\uc11c\ub294 &#8220;Flutter Widget of the Week&#8221; \ubaa8\ud1a0 \uc544\ub798 \ub9e4\uc8fc Flutter Widget \uc911 \ud558\ub098\ub97c \uc9e7\uc740 \ub3d9\uc601\uc0c1\uc73c\ub85c \uc18c\uac1c\ud558\uc5ec, \ub3d9\uc791 \ud654\uba74\uacfc \ud575\uc2ec \ucf54\ub4dc\ub97c \uc774\ud574\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\uace0 \uc788\uc73c\ub2c8, \ud544\uc694\ud560\ub54c \uc0b4\ud3b4\ubcf4\ub2e4\uac00 \ub9c8\uc74c\uc5d0 \ub4dc\ub294 Widget\uc744 \uc810 \ucc0d\uc5b4 \ub450\uba74 \uc694\uae34\ud558\uac8c \uc4f8 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<ul><li>https:\/\/www.youtube.com\/watch?v=b_sQ9bMltGU&amp;list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG<\/li><\/ul>\n\n\n\n<p>\ub450\ubc88\uc9f8\ub85c \uc120\ud0dd\ud55c Widget\uc5d0 \ub300\ud574\uc11c \uc790\uc138\ud788 \uc54c\uc544\uc57c \ud569\ub2c8\ub2e4. \uc774\ub97c \uc704\ud558\uc5ec, Flutter\uc758 \uacf5\uc2dd \ud648\ud398\uc774\uc9c0\uc5d0\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 Widget\ub4e4\uc744 \ub9ac\uc2a4\ud2b8\ub85c \ub098\uc5f4\ud558\uace0, \uac01\uac01\uc758 Widget\uc5d0 \ub300\ud574\uc11c \ud544\uc694\uc2dc \uc0c1\uc138\ud558\uac8c \uc774\ud574\ud560 \uc218 \uc788\ub294 \ub2e4\uc74c\uc758 \uc0ac\uc774\ud2b8\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<ul><li>https:\/\/api.flutter.dev\/flutter\/widgets\/widgets-library.html <\/li><\/ul>\n\n\n\n<p>\ubcf8 \uae00\uc5d0\uc11c \uc124\uba85\ud560 darttutorial-35-01.dart \ud504\ub85c\uadf8\ub7a8\uc5d0\uc11c\ub3c4 \ub2e4\uc591\ud55c Widget \ub4e4\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uc774\ub4e4\uc5d0 \ub300\ud574\uc11c \uc790\uc138\ud558\uac8c \uc774\ud574\ud558\uace0 \uc2f6\uc740 \uacbd\uc6b0\ub294 \uc544\ub798\uc5d0\uc11c \ud574\ub2f9 Widget\uc5d0 \ub300\ud55c \uc0c1\uc138\ud55c \uc815\ubcf4\ub97c \uc77d\uace0, \uc2e4\uc81c \ud504\ub85c\uadf8\ub7a8\uc5d0\uc11c \uc0ac\uc6a9\ud558\uc600\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<ul><li>https:\/\/api.flutter.dev\/flutter\/material\/Scaffold-class.html<\/li><li>https:\/\/api.flutter.dev\/flutter\/material\/OutlineButton-class.html<\/li><li>https:\/\/api.flutter.dev\/flutter\/material\/Icons-class.html<\/li><li>https:\/\/api.flutter.dev\/flutter\/material\/SliverAppBar-class.html<\/li><li>https:\/\/api.flutter.dev\/flutter\/material\/ListTile-class.html<\/li><li>https:\/\/api.flutter.dev\/flutter\/material\/Drawer-class.html<\/li><li>https:\/\/api.flutter.dev\/flutter\/widgets\/Text-class.html<\/li><li>https:\/\/api.flutter.dev\/flutter\/widgets\/PageController-class.html<\/li><li>https:\/\/api.flutter.dev\/flutter\/painting\/TextStyle-class.<\/li><\/ul>\n\n\n\n<p>\uc138\ubc88\uc9f8\ub85c \uc704\uc758 Widget \uc124\uba85\ub4e4\uc744 \ubcf4\ub2e4\ubcf4\uba74, \ubcf8\uc778\uc774 \ub9cc\ub4e4\uace0\uc790 \ud558\ub294 \ud504\ub85c\uadf8\ub7a8\uc5d0 \uc601\uac10\uc744 \uc8fc\ub294 \uc720\uc6a9\ud55c sample\ub4e4\uc744 \ubc1c\uacac\ud558\ub294 \uacbd\uc6b0\ub4e4\uc774 \uc788\uc2b5\ub2c8\ub2e4. darttutorial-35-01.dart \uacbd\uc6b0\ub294 \uc560\uc2dc\ub2f9\ucd08 \ud1b5\uc2e0 \uad00\ub828 \ud504\ub85c\uadf8\ub7a8\uc744 \uc791\uc131\ud558\uae30 \uc704\ud55c \uc77c\ud658\uc73c\ub85c Widget\ub4e4\uc744 \uc0b4\ud3b4\ubcf4\ub358 \uc911, \ub098\ub984 \uc798 \ub9de\uc544 \ubcf4\uc774\ub294 \ub2e4\uc74c\uc758 \uc608\uc81c \ud504\ub85c\uadf8\ub7a8\uc744 \ud1a0\ub300\ub85c \ub9cc\ub4e4\uc5b4 \ubcf4\uc558\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<ul><li>https:\/\/flutter.dev\/docs\/catalog\/samples\/basic-app-bar<\/li><li>https:\/\/androidmonks.com\/sliverappbar-flutter\/<\/li><\/ul>\n\n\n\n<h4>Step.2 GUI Design<\/h4>\n\n\n\n<p>\uc774 \ud504\ub85c\uadf8\ub7a8\uc740 \ucd1d4\uac1c\uc758 \ud398\uc774\uc9c0\ub85c \uad6c\uc131\ub418\uba70, \uccab\ubc88\uc9f8 \ud398\uc774\uc9c0\ub294 [\uadf8\ub9bc 1]\uc774\uba70, \ud504\ub85c\uadf8\ub7a8\uc774 \ucd5c\ucd08\ub85c \uc2e4\ud589\ud558\uba74 \ub098\ud0c0\ub098\ub294 \ud398\uc774\uc9c0 \uc785\ub2c8\ub2e4. \ubcc4\ub3c4\uc758 \uae30\ub2a5\uc740 \uc5c6\uc73c\uba70, \ub2e8\uc21c\ud558\uac8c \ud504\ub85c\uadf8\ub7a8\uc758 \uc774\ub984\uc744 \ubcf4\uc5ec\uc8fc\ub294 \uc6a9\ub3c4\uc77c \ubfd0\uc785\ub2c8\ub2e4. \uc774 \ud398\uc774\uc9c0\ub97c \uc624\ub978\ucabd\uc5d0\uc11c \uc67c\ucabd\uc73c\ub85c \ubc00\uba74 \ub2e4\uc74c \ud398\uc774\uc9c0\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/1-473x1024.png\" alt=\"\" class=\"wp-image-935\" width=\"237\" height=\"512\" srcset=\"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/1-473x1024.png 473w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/1-139x300.png 139w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/1-768x1662.png 768w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/1-480x1039.png 480w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/1.png 1242w\" sizes=\"(max-width: 237px) 100vw, 237px\" \/><figcaption>[\uadf8\ub9bc 1] \uba54\uc778 \ud398\uc774\uc9c0<\/figcaption><\/figure><\/div>\n\n\n\n<p>\uc8fc \uc791\uc5c5\uc744 \uc9c4\ud589\ud558\ub294 \ud398\uc774\uc9c0\uac00 [\uadf8\ub9bc 2] \uc785\ub2c8\ub2e4. \uc138 \ubd80\ubd84\uc73c\ub85c \ub098\ub204\uc5b4\uc838 \uc788\uc73c\uba70, \uc717\ucabd\uc758 \ub450\ubd80\ubd84\uc740 \uac19\uc740 \uc0c9\uc778 \ud30c\ub780\uc0c9\uc73c\ub85c \ucc44\uc6cc\uc838 \uc788\uc2b5\ub2c8\ub2e4. \ud558\ub098\ub85c \ubcf4\uc774\uc9c0\ub9cc, [\uadf8\ub9bc 3]\ucc98\ub7fc \ud30c\ub791\uc0c9 \ubc11\uc758 \ubd80\ubd84\uc744 \uc2a4\ud06c\ub864 \uc5c5 \ud558\uba74, \uccab\ubc88\uc9f8 \ubd80\ubd84\uc740 \uadf8\ub300\ub85c \uace0\uc815\ub418\uc5b4 \uc788\uc9c0\ub9cc, \ub450\ubc88\uc9f8 \ud574\ub2f9\ud558\ub294 \ubd80\ubd84\uc740 \uc2a4\ud06c\ub864\uc774 \ub418\uc5b4 \ud654\uba74\uc5d0\uc11c \uc0ac\ub77c\uc9c0\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. <\/p>\n\n\n\n<p>\uccab\ubc88\uc9f8 \uc601\uc5ed\uc740 \uc67c\ucabd\uc5d0 \ud0c0\uc774\ud2c0\ub85c \ud544\uc694\ud55c \uc774\ub984\uc744 \ub098\ud0c0\ub0b4\uace0 \uc788\uace0, \uc624\ub978\ucabd\uc5d0 \uc138\uac1c\uc758 \ubc84\ud2bc\uc774 \uc788\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc138\uac1c\uc758 \ubc84\ud2bc\uc5d0 \ub300\ud574\uc11c\ub294 \ucd94\ud6c4 \uc124\uba85\ud569\ub2c8\ub2e4. \ub450\ubc88\uc9f8 \uc601\uc5ed\uc5d0\ub294 \uc0ac\uc6a9\uc790\uc5d0\uac8c \uc54c\ub824\uc8fc\uace0 \uc2f6\uc740 \uc815\ubcf4\ub97c \ubb38\uc790\uc5f4\ub85c \ub098\ud0c0\ub0b4\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \uc138\ubc88\ub54c \uc601\uc5ed\uc5d0\ub294 \ud130\uce58\ud558\uc5ec \uc120\ud0dd\uc774 \uac00\ub2a5\ud55c \uba54\ub274\ub4e4\uc774 \ub9ac\uc2a4\ud2b8\ub85c \ub098\ud0c0\ub098 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/2-473x1024.png\" alt=\"\" class=\"wp-image-937\" width=\"237\" height=\"512\" srcset=\"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/2-473x1024.png 473w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/2-139x300.png 139w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/2-768x1662.png 768w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/2-480x1039.png 480w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/2.png 1242w\" sizes=\"(max-width: 237px) 100vw, 237px\" \/><figcaption>[\uadf8\ub9bc 2] \uc8fc \uc791\uc5c5 \ud398\uc774\uc9c0<\/figcaption><\/figure><\/div>\n\n\n\n<p>\uc55e\uc11c \uc5b8\uae09 \ud55c \uac83\ucc98\ub7fc, \ub9e8 \uc717 \ubd80\ubd84\uc740 \uadf8\ub300\ub85c \uc720\uc9c0\ub418\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc, \ub450\ubc88\uc9f8 \uc601\uc5ed\uc740 \ub9ac\uc2a4\ud2b8\ub4e4\uacfc \ud568\uaed8 \uc704\ub85c \uc62c\ub77c\uac00\uc11c \uc0ac\ub77c\uc9c4 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/3-473x1024.png\" alt=\"\" class=\"wp-image-938\" width=\"237\" height=\"512\" srcset=\"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/3-473x1024.png 473w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/3-139x300.png 139w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/3-768x1662.png 768w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/3-480x1039.png 480w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/3.png 1242w\" sizes=\"(max-width: 237px) 100vw, 237px\" \/><figcaption>[\uadf8\ub9bc 3] \uc8fc \uc791\uc5c5 \ud398\uc774\uc9c0\uc758 \uc2a4\ud06c\ub864 \ud654\uba74<\/figcaption><\/figure><\/div>\n\n\n\n<p>\ub9e8 \uc717 \ubd80\ubd84\uc758 \uc138\uac1c \ubc84\ud2bc \uc911 \uc67c\ucabd\uc5d0\uc11c \uccab\ubc88\uc9f8 \ubc84\ud2bc\uc744 \ud130\uce58\ud558\uba74, [\uadf8\ub9bc 4]\uc640 \uac19\uc774 AlertDialog \ubc15\uc2a4\uac00 \ub098\ud0c0\ub098\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc77c\ubc18\uc801\uc778 \ub2e4\uc774\uc5bc\ub85c\uadf8\uc758 \ud615\ud0dc\ub85c\uc11c, &#8220;OK&#8221; \ud639\uc740 &#8220;Cancel&#8221; \uc911 \ud558\ub098\ub97c \uc120\ud0dd\ud558\ub3c4\ub85d \ud569\ub2c8\ub2e4. \ub450 \ubc84\ud2bc \uc911 \ud558\ub098\ub97c \ub204\ub974\uba74, \ud654\uba74 \uc544\ub798\uc5d0 \uba87\ucd08\uac04 \ud30c\ub780 \ud654\uba74\uc774 \uc0dd\uae34 \ud6c4, OK \ud639\uc740 Calcel \uc774\ub77c\ub294 \uae00\uc790\uac00 \ub098\ud0c0\ub098\ub294\ub370, \uc774\ub294 SnackBar\ub77c\uace0 \ubd80\ub974\ub294 Widget\uc73c\ub85c \uad6c\ud604\ud55c \uac83 \uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/4-473x1024.png\" alt=\"\" class=\"wp-image-939\" width=\"237\" height=\"512\" srcset=\"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/4-473x1024.png 473w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/4-139x300.png 139w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/4-768x1662.png 768w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/4-480x1039.png 480w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/4.png 1242w\" sizes=\"(max-width: 237px) 100vw, 237px\" \/><figcaption>[\uadf8\ub9bc 4] \ub2e4\uc774\uc5bc\ub85c\uadf8 \ubc15\uc2a4 \ud65c\uc131\ud654 \ud654\uba74 <br>(\uc8fc \uc791\uc5c5 \ud398\uc774\uc9c0)<\/figcaption><\/figure><\/div>\n\n\n\n<p>\uac00\uc6b4\ub370 \ubc84\ud2bc\uc5d0\ub294 \uc544\ubb34\ub7f0 \ub3d9\uc791\uc744 \uc5f0\uacb0\ud558\uc9c0 \uc54a\uc558\uae30\uc5d0 \ud130\uce58\ub97c \ud574\ub3c4 \ubc18\uc751\uc744 \ud558\uc9c0 \uc54a\uc744 \uac81\ub2c8\ub2e4. \ub9e8 \uc624\ub974\ucabd\uc758 \ubc84\ud2bc\uc740 \ud31d\uc5c5 \uba54\ub274\ub97c \ub098\ud0c0\ub0c5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \uba54\ub274\ub294 \ucd1d4\uac1c\ub85c \ub098\ud0c0\ub098 \uc788\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc0ac\uc9c4\uc5d0\ub294 \ub098\ud0c0\ub098\uc9c0 \uc54a\uc9c0\ub9cc, \ub9e8\uc704\uc758 \uc138\uac1c \ubc84\ud2bc \uc911 \uc67c\ucabd\/\uac00\uc6b4\ub370 \ubc84\ud2bc\uacfc \ud31d\uc5c5 \uba54\ub274 \uc911 \ub124\uac1c \uba54\ub274\ub294, \uba54\ub274\uac00 \ub20c\ub824\uc84c\uc744\ub54c \ud558\ub2e8\uc758 \ub9ac\uc2a4\ud2b8\uc548\uc758 \ubb38\uc790\uc5f4\uc774 \ubc14\ub00c\uba70([\uadf8\ub9bc 5]\uc758 \uacbd\uc6b0, &#8220;Rotate Left&#8221;\ub85c \uba85\uc2dc\ud55c \ubd80\ubd84), \ubb38\uc7a5\uc758 &#8220;0 times&#8221;\uc758 \uc22b\uc790\uac00 \ud558\ub098\uc529 \uc99d\uac00\ud558\ub3c4\ub85d \ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \ub530\ub77c\uc11c, \ub2e8\ucd94\ub97c \ud130\uce58\ud558\ub294 \uc77c\uc774 \ub9ac\uc2a4\ud2b8 \ub0b4\ubd80\uc5d0 \ub300\ud55c \ubcc0\ud654\ub97c \ub9cc\ub4e4\ub3c4\ub85d \ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \ud31d\uc5c5 \uba54\ub274\ub294 \uba54\ub274 \uc774\uc678\uc758 \ud654\uba74 \uc601\uc5ed\uc744 \ud130\uce58\ud558\uba74 \uc0ac\ub77c\uc9d1\ub2c8\ub2e4. [\uadf8\ub9bc 10]\uc5d0 \uc774\ub97c \ub098\ud0c0\ub0b4\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/5-473x1024.png\" alt=\"\" class=\"wp-image-941\" width=\"237\" height=\"512\" srcset=\"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/5-473x1024.png 473w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/5-139x300.png 139w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/5-768x1662.png 768w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/5-480x1039.png 480w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/5.png 1242w\" sizes=\"(max-width: 237px) 100vw, 237px\" \/><figcaption>[\uadf8\ub9bc 5] \ud31d\uc5c5 \uba54\ub274 \ubc84\ud2bc \ud65c\uc131\ud654 \ud654\uba74 <br>(\uc8fc \uc791\uc5c5 \ud398\uc774\uc9c0)<\/figcaption><\/figure><\/div>\n\n\n\n<p>\ubcf8 \ud398\uc774\uc9c0\uc5d0\uc11c \ud654\uba74\uc744 \uc624\ub978\ucabd\uc5d0\uc11c \uc67c\ucabd\uc73c\ub85c \uc2a4\ud06c\ub864\ud558\uba74 [\uadf8\ub9bc 6]\uc73c\ub85c \uc774\ub3d9\ud558\uace0, \uc67c\ucabd\uc5d0\uc11c \uc624\ub978\ucabd\uc73c\ub85c \uc2a4\ud06c\ub864\ud558\uba74 [\uadf8\ub9bc 1]\ub85c \uc774\ub3d9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \ub9ac\uc2a4\ud2b8\uc758 \ud56d\ubaa9 \uc911 [Item#0]\ub77c\uace0 \uc4f0\uc5ec\uc9c4 \uccab\ubc88\uc9f8 \ud56d\ubaa9\uc744 \uc120\ud0dd\ud558\uba74, [\uadf8\ub9bc 6]\uc758 \ud398\uc774\uc9c0\ub85c \uc774\ub3d9\ud558\uace0, \ub2e4\ub978 \ud56d\ubaa9\uc744 \uc120\ud0dd\ud558\uba74 [\uadf8\ub9bc 9]\uc758 \ud398\uc774\uc9c0\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4. [\uadf8\ub9bc 6]\uc740 \uc544\ub798\uc5d0 3\uac1c\uc758 \ud130\uce58 \ubc84\ud2bc\uc774 \uc788\uc2b5\ub2c8\ub2e4. \uccab\ubc88\uc9f8 home \ubc84\ud2bc\uc744 \ub204\ub974\uba74, \ud654\uba74\uc740 \uc8fc \uc791\uc5c5 \ud398\uc774\uc9c0\uc778 [\uadf8\ub9bc 2]\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/6-473x1024.png\" alt=\"\" class=\"wp-image-942\" width=\"237\" height=\"512\" srcset=\"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/6-473x1024.png 473w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/6-139x300.png 139w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/6-768x1662.png 768w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/6-480x1039.png 480w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/6.png 1242w\" sizes=\"(max-width: 237px) 100vw, 237px\" \/><figcaption>[\uadf8\ub9bc 6] \uc11c\ube0c \uc791\uc5c5 \ud398\uc774\uc9c0 #2\uc758 Home \uc601\uc5ed<\/figcaption><\/figure><\/div>\n\n\n\n<p>[\uadf8\ub9bc 6]\uc5d0\uc11c \uac00\uc6b4\ub370 Cloud \ubc84\ud2bc\uc744 \ub204\ub974\uba74, Cloud \ubc84\ud2bc\uc758 \uc0c9\uc774 \ud558\uc580\uc0c9\uc73c\ub85c \ubc14\ub00c\uba74\uc11c, \uac00\uc6b4\ub370 \uae00\uc790\uac00 [\uadf8\ub9bc 7]\uacfc \uac19\uc774 \ubc14\ub01d\ub2c8\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/7-473x1024.png\" alt=\"\" class=\"wp-image-943\" width=\"237\" height=\"512\" srcset=\"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/7-473x1024.png 473w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/7-139x300.png 139w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/7-768x1662.png 768w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/7-480x1039.png 480w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/7.png 1242w\" sizes=\"(max-width: 237px) 100vw, 237px\" \/><figcaption>[\uadf8\ub9bc 7] \uc11c\ube0c \uc791\uc5c5 \ud398\uc774\uc9c0 #2\uc758 Cloud \uc601\uc5ed<\/figcaption><\/figure><\/div>\n\n\n\n<p>[\uadf8\ub9bc 6]\uc5d0\uc11c \uc138\ubc88\uc9f8 Star \ubc84\ud2bc\uc744 \ub204\ub974\uba74, Star \ubc84\ud2bc\uc758 \uc0c9\uc774 \ud558\uc580\uc0c9\uc73c\ub85c \ubc14\ub00c\uba74\uc11c, \uac00\uc6b4\ub370 \uae00\uc790\uac00 [\uadf8\ub9bc 8]\uacfc \uac19\uc774 \ubc14\ub01d\ub2c8\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/8-473x1024.png\" alt=\"\" class=\"wp-image-944\" width=\"237\" height=\"512\" srcset=\"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/8-473x1024.png 473w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/8-139x300.png 139w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/8-768x1662.png 768w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/8-480x1039.png 480w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/8.png 1242w\" sizes=\"(max-width: 237px) 100vw, 237px\" \/><figcaption>[\uadf8\ub9bc 8] \uc11c\ube0c \uc791\uc5c5 \ud398\uc774\uc9c0 #2\uc758 Star \uc601\uc5ed<\/figcaption><\/figure><\/div>\n\n\n\n<p>[\uadf8\ub9bc 9]\ub294 \ud654\uba74\uc744 \uc2a4\ud06c\ub864\ud574\uc11c \uac00\uac70\ub098, \uc8fc \uc791\uc5c5 \ud398\uc774\uc9c0\uc5d0\uc11c \uccab\ubc88\uc9f8 \ub9ac\uc2a4\ud2b8\ub97c \ud130\uce58\ud558\uc5ec \uc774\ub3d9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uac00\uc6b4\ub370\uc5d0 \ud074\ub9ad\ud558\uba74 \uc8fc \uc791\uc5c5 \ud398\uc774\uc9c0\ub85c \uc774\ub3d9\ud560 \uc218 \uc788\ub294 RaisedButton\uc774 \uc788\ub294 \uac83\uc744 \uc81c\uc678\ud558\uba74, \ub2e4\ub978 \uc5ed\ud560\uc740 \uc5c6\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/9-473x1024.png\" alt=\"\" class=\"wp-image-945\" width=\"237\" height=\"512\" srcset=\"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/9-473x1024.png 473w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/9-139x300.png 139w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/9-768x1662.png 768w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/9-480x1039.png 480w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/9.png 1242w\" sizes=\"(max-width: 237px) 100vw, 237px\" \/><figcaption>[\uadf8\ub9bc 9] \uc11c\ube0c \uc791\uc5c5 \ud398\uc774\uc9c0 #3<\/figcaption><\/figure><\/div>\n\n\n\n<p>[\uadf8\ub9bc 10]\uc758 SnackBar\ub294 \uc55e\uc11c \uc124\uba85\ud55c \uac83\ucc98\ub7fc, \uc0ac\uc6a9\uc790\uc758 \uc785\ub825\uc5d0 \ubc18\uc751\ud574\uc11c, \uc784\uc2dc\uc801\uc73c\ub85c \uacb0\uacfc\ub97c \ubcf4\uc5ec\uc900 \ud6c4 \ub2e4\uc2dc \uc0ac\ub77c\uc9c0\ub294 \uc6a9\ub3c4\ub85c \ud65c\uc6a9\ud569\ub2c8\ub2e4. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/Simulator-Screen-Shot-iPhone-11-Pro-Max-2020-04-05-at-17.58.36-473x1024.png\" alt=\"\" class=\"wp-image-948\" width=\"237\" height=\"512\" srcset=\"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/Simulator-Screen-Shot-iPhone-11-Pro-Max-2020-04-05-at-17.58.36-473x1024.png 473w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/Simulator-Screen-Shot-iPhone-11-Pro-Max-2020-04-05-at-17.58.36-139x300.png 139w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/Simulator-Screen-Shot-iPhone-11-Pro-Max-2020-04-05-at-17.58.36-768x1662.png 768w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/Simulator-Screen-Shot-iPhone-11-Pro-Max-2020-04-05-at-17.58.36-480x1039.png 480w, http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/04\/Simulator-Screen-Shot-iPhone-11-Pro-Max-2020-04-05-at-17.58.36.png 1242w\" sizes=\"(max-width: 237px) 100vw, 237px\" \/><figcaption>[\uadf8\ub9bc 10] SnackBar \ud654\uba74<\/figcaption><\/figure><\/div>\n\n\n\n<p>\uc774 \uc815\ub3c4\uc758 \uae30\ub2a5\uc774\ub77c\uba74 \uc660\ub9cc\ud55c \uae30\ub2a5\uc758 \uc571\uc744 \ub9cc\ub4e4\uae30\uc5d0\ub294 \ucda9\ubd84\ud788 \ud6a8\uacfc\uc801\uc778 \uae30\ubcf8 \ubc14\ud0d5\uc774 \ub420 \uac83 \uc785\ub2c8\ub2e4. \uadf8\ub9ac\uace0, \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\uac00 \ub2e4\uc18c \ubcf5\uc7a1\ud574 \ubcf4\uc774\uc9c0\ub9cc, \uae30\ubcf8\uc774 \ub418\ub294 \uac04\ub2e8\ud55c Widget\ub4e4\uc744 \uc5ee\uc5b4\uc11c \uace0\ub3c4\ud654\ub41c \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uad6c\ud604\ud558\ub294 \uac83\uc774 \uac00\ub2a5\ud558\ub2e4\ub294 \uac83\uc744 \uc54c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h4>Step.3 Completes the Functions<\/h4>\n\n\n\n<p>Step.2\uc640 \uac19\uc740 GUI\ub97c \uad6c\ud604\ud558\ub294 Dart\/Flutter \uc18c\uc2a4\ucf54\ub4dc\ub294 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4. \uac00\uc7a5 \ubcf5\uc7a1\ud558\uc9c0\ub9cc, \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\uc5d0 \uc9c1\uacb0\ub418\ub294 \ubd80\ubd84\uc740 State&lt;&gt; class\ub97c \ud655\uc7a5\ud55c MyStatefulWidgetState\uc758 build() \uc785\ub2c8\ub2e4. \uc55e\uc11c \uc124\uba85\ud55c 4\uac1c\uc758 \ud398\uc774\uc9c0\uc5d0 \ub300\ud55c \ucf54\ub4dc\ub97c \uac01\uac01 PageView #0 ~ #3\uc73c\ub85c \uba85\uc2dc \ud558\uc600\uc2b5\ub2c8\ub2e4.  4\uac1c\uc758 \ud398\uc774\uc9c0\uac00 \uac01\uac01 [\uadf8\ub9bc 1], [\uadf8\ub9bc 2], [\uadf8\ub9bc 6] \uadf8\ub9ac\uace0 [\uadf8\ub9bc 9]\uc5d0 \ub300\uc751\ud558\ub294 \ucf54\ub4dc\ub4e4 \uc785\ub2c8\ub2e4. \uc608\uc0c1 \ud558\uaca0\uc9c0\ub9cc, \ub450\ubc88\uc9f8 \ud398\uc774\uc9c0\uac00 \uac00\uc7a5 \ub9ce\uc740 \ubd84\ub7c9\uc73c\ub85c \uc5ec\ub7ec Widget\ub4e4\ub85c \ub9cc\ub4e4\uc5b4\uc838 \uc788\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\uc0ac\uc2e4 \uc774 \ud504\ub85c\uadf8\ub7a8\uc5d0\uc11c \uc800\uc7a5\ud558\uace0 \uad00\ub9ac\ud558\ub294 \uc815\ubcf4\ub294 3\uac00\uc9c0 \ubfd0\uc785\ub2c8\ub2e4. \ud558\ub098\ub294 \uc8fc \uc791\uc5c5 \ud398\uc774\uc9c0\uc5d0\uc11c \ub9ac\uc2a4\ud2b8\ub97c \uc120\ud0dd\ud560 \ub54c \ub9c8\ub2e4 \uc99d\uac00\ud558\ub294 count \uac12\uc774\uace0, \ub450\ubc88\uc9f8\ub294 \ub9ac\uc2a4\ud2b8\uc5d0 \ub098\ud0c0\ub098\ub294 \ubb38\uc790\uc5f4 \uc815\ubcf4\ub85c\uc11c, \uc774\ub294 \uc8fc \uc791\uc5c5 \uba54\ub274\uc5d0\uc11c \uc0c1\ub2e8\ubd80\uc758 \ubc84\ud2bc\ub4e4\uc5d0 \uc758\ud574\uc11c \uc815\ud574 \uc9d1\ub2c8\ub2e4. \uc138\ubc88\uc9f8\ub294 [\uadf8\ub9bc 6]\uc758 \uc11c\ube0c \ud398\uc774\uc9c0\uc5d0\uc11c \ud558\ub2e8 \ubd80\uc758 \uc138\uac00\uc9c0 \ubc84\ud2bc \uc911 \uc5b4\ub290 \uac83\uc774 \uc120\ud0dd\ub418\uc5b4 \uc788\ub294\uc9c0\uc5d0 \ub300\ud55c \uc815\ubcf4\uc785\ub2c8\ub2e4. State&lt;&gt; class\ub97c \ud655\uc7a5\ud55c MyStatefulWidgetState class\uc5d0 \uc800\uc7a5\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\ud504\ub85c\uadf8\ub7a8 \uc18c\uc2a4 \ucf54\ub4dc\uc5d0 \ub300\ud55c \uad6c\uccb4\uc801\uc778 \uc774\ud574\ub294 \ub3c5\uc790\uc758 \ubaab\uc73c\ub85c \ub0a8\uaca8 \ub193\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4. 344 \ub77c\uc778 \uc815\ub3c4\uc758 \ud504\ub85c\uadf8\ub7a8\uc774\ubbc0\ub85c, \ud398\uc774\uc9c0\ubcc4\ub85c \ub04a\uc5b4\uc11c \uc55e\uc11c\uc758 \ub77c\uc774\ube0c\ub7ec\ub9ac \ub4f1\uc744 \ucc3e\uc544\uac00\uba70 \uc774\ud574\ud55c\ub2e4\uba74, \ucd94\ud6c4 \ud544\uc694\ud55c \ud615\ud0dc\ub85c \ubcc0\ud615\ud558\uace0 \uae30\ub2a5\uc744 \ucc44\uc6b0\ub294\ub370 \ubb38\uc81c\uac00 \uc5c6\uc744 \uac81\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ darttutorial-35-01.dart\n\nimport 'package:flutter\/material.dart';\n\nvoid main() =&gt; runApp(MyApp());\n\nclass MyApp extends StatelessWidget {\n  static const String _title = 'Flutter Code Sample';\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: _title,\n      home: MyStatefulWidget(),\n    );\n  }\n}\n\nclass MyStatefulWidget extends StatefulWidget {\n  MyStatefulWidget({Key key}) : super(key: key);\n\n  @override\n  _MyStatefulWidgetState createState() =&gt; _MyStatefulWidgetState();\n}\n\nclass _MyStatefulWidgetState extends State&lt;MyStatefulWidget&gt; {\n  int _count = 0;\n  Choice _selectedChoice = choices[0]; \/\/ The app's \"state\".\n  int _selectedIndex = 0;\n\n  final scaffoldKey = GlobalKey&lt;ScaffoldState&gt;();\n\n  static const TextStyle optionStyle =\n      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);\n\n  static const List&lt;Widget&gt; _widgetOptions = &lt;Widget&gt;[\n    Text(\n      'Index 0: Home',\n      style: optionStyle,\n    ),\n    Text(\n      'Index 1: Cloud',\n      style: optionStyle,\n    ),\n    Text(\n      'Index 2: Star',\n      style: optionStyle,\n    ),\n  ];\n\n  void _onItemTapped(int index) {\n    setState(() {\n      _selectedIndex = index;\n\n      print(\"_onItemTapped : $index\");\n\n      if ((_pageController.hasClients) &amp;&amp; (index == 0)) {\n        _pageController.animateToPage(\n          1,\n          duration: const Duration(milliseconds: 10),\n          curve: Curves.easeInOut,\n        );\n      }\n    });\n  }\n\n  void _select(Choice choice) {\n    \/\/ Causes the app to rebuild with the new _selectedChoice.\n    setState(() {\n      _selectedChoice = choice;\n    });\n  }\n\n  void showAlertDialog(BuildContext context) async {\n    String result = await showDialog(\n      context: context,\n      barrierDismissible: false, \/\/ user must tap button!\n      builder: (BuildContext context) {\n        return AlertDialog(\n          title: Text('AlertDialog Demo'),\n          content: Text(\"Select button you want\"),\n          actions: &lt;Widget&gt;[\n            FlatButton(\n              child: Text('OK'),\n              onPressed: () {\n                Navigator.pop(context, \"OK\");\n              },\n            ),\n            FlatButton(\n              child: Text('Cancel'),\n              onPressed: () {\n                Navigator.pop(context, \"Cancel\");\n              },\n            ),\n          ],\n        );\n      }, \/\/ builder\n    ); \/\/ showDialog\n\n    scaffoldKey.currentState\n      ..hideCurrentSnackBar()\n      ..showSnackBar(\n        SnackBar(\n          content: Text(\"Result: $result\"),\n          backgroundColor: Colors.blueAccent,\n          action: SnackBarAction(\n            label: \"Done\",\n            textColor: Colors.white,\n            onPressed: () {},\n          ),\n        ),\n      );\n  } \/\/ showAlertDialog\n\n  PageController _pageController;\n\n  @override\n  void initState() {\n    super.initState();\n    _pageController = PageController();\n  }\n\n  @override\n  void dispose() {\n    _pageController.dispose();\n    super.dispose();\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      home: Scaffold(\n        key: scaffoldKey,\n        \/\/ PageViews\n        body: PageView(\n          controller: _pageController,\n          children: [\n            \/\/ PageView #0 : Initial Title\n            Container(\n              color: Colors.white,\n              child: RaisedButton(\n                elevation: 0,\n                padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 24.0),\n                color: Colors.blueAccent,\n                textColor: Colors.white,\n                child: Text(\n                  'PageView #0\\n\\nMain Title',\n                  textAlign: TextAlign.center,\n                  style: TextStyle(\n                      fontSize: 32.0,\n                      fontWeight: FontWeight.bold,\n                      fontStyle: FontStyle.italic,\n                      textBaseline: TextBaseline.alphabetic),\n                ),\n                onPressed: () {\n                  if (_pageController.hasClients) {\n                    _pageController.animateToPage(\n                      1,\n                      duration: const Duration(milliseconds: 10),\n                      curve: Curves.easeInOut,\n                    );\n                  }\n                },\n              ),\n            ),\n            \/\/ PageView #1 : Main\n            Container(\n              color: Colors.white,\n              child: CustomScrollView(\n                slivers: &lt;Widget&gt;[\n                  SliverAppBar(\n                    title: Text(\"PageView #1 - Main\"),\n                    backgroundColor: Colors.blueAccent,\n                    pinned: true,\n                    actions: &lt;Widget&gt;[\n                      \/\/ action button\n                      IconButton(\n                        icon: Icon(choices[0].icon),\n                        onPressed: () {\n                          showAlertDialog(context);\n                          _select(choices[0]);\n                        },\n                      ),\n                      \/\/ action button\n                      IconButton(\n                        icon: Icon(choices[1].icon),\n                        onPressed: () {\n                          _select(choices[1]);\n                        },\n                      ),\n                      \/\/ overflow menu\n                      PopupMenuButton&lt;Choice&gt;(\n                        onSelected: _select,\n                        itemBuilder: (BuildContext context) {\n                          return choices.skip(2).map((Choice choice) {\n                            return PopupMenuItem&lt;Choice&gt;(\n                              value: choice,\n                              child: Text(choice.title),\n                            );\n                          }).toList();\n                        },\n                      ),\n                    ],\n                  ),\n                  SliverAppBar(\n                    backgroundColor: Colors.blueAccent,\n                    floating: true,\n                    expandedHeight: 70.0,\n                    flexibleSpace: ListView(\n                      children: &lt;Widget&gt;[\n                        Text(\n                          '  Sub-title 0',\n                          textAlign: TextAlign.left,\n                          overflow: TextOverflow.ellipsis,\n                          style: TextStyle(\n                              fontWeight: FontWeight.bold, color: Colors.white),\n                        ),\n                        Text(\n                          '  Sub-title 1',\n                          textAlign: TextAlign.left,\n                          overflow: TextOverflow.ellipsis,\n                          style: TextStyle(\n                              fontWeight: FontWeight.bold, color: Colors.white),\n                        ),\n                        Text.rich(\n                          TextSpan(\n                            text: '  ', \/\/ default text style\n                            children: &lt;TextSpan&gt;[\n                              TextSpan(\n                                  text: 'Sub-title ',\n                                  style: TextStyle(\n                                      color: Colors.white,\n                                      fontStyle: FontStyle.italic)),\n                              TextSpan(\n                                  text: 'with Span-mode',\n                                  style: TextStyle(\n                                      color: Colors.white,\n                                      fontWeight: FontWeight.bold)),\n                            ],\n                          ),\n                        ),\n                      ],\n                    ),\n                  ),\n                  SliverList(\n                    delegate: SliverChildBuilderDelegate(\n                        (context, index) =&gt; Card(\n                            child: ListTile(\n                                leading: FlutterLogo(),\n                                title: Text(\n                                    '[Item #$index] Button pressed $_count times.'),\n                                trailing: Icon(Icons.more_vert),\n                                subtitle: Text('${_selectedChoice.title}'),\n                                onTap: () =&gt; setState(() {\n                                      if (_pageController.hasClients) {\n                                        _pageController.animateToPage(\n                                          (index + 2),\n                                          duration:\n                                              const Duration(milliseconds: 10),\n                                          curve: Curves.easeInOut,\n                                        );\n                                      }\n                                      _count++;\n                                    }))),\n                        childCount: 10),\n                  ),\n                ],\n              ),\n            ),\n            \/\/ PageView #2 : Sub\n            Scaffold(\n              appBar: AppBar(\n                title: const Text('PageView #2 - Sub-Menu 1'),\n                backgroundColor: Colors.blueAccent,\n              ),\n              body: Center(\n                child: _widgetOptions.elementAt(_selectedIndex),\n              ),\n              bottomNavigationBar: BottomNavigationBar(\n                items: const &lt;BottomNavigationBarItem&gt;[\n                  BottomNavigationBarItem(\n                    icon: Icon(Icons.home),\n                    title: Text('Home'),\n                  ),\n                  BottomNavigationBarItem(\n                    icon: Icon(Icons.wb_cloudy),\n                    title: Text('Cloud'),\n                  ),\n                  BottomNavigationBarItem(\n                    icon: Icon(Icons.star),\n                    title: Text('Star'),\n                  ),\n                ],\n                currentIndex: _selectedIndex,\n                selectedItemColor: Colors.white,\n                backgroundColor: Colors.blueAccent,\n                onTap: _onItemTapped,\n              ),\n            ),\n            \/\/ PageView #3 : Sub\n            Container(\n              color: Colors.blueAccent,\n              child: Center(\n                child: RaisedButton(\n                  color: Colors.blueAccent,\n                  onPressed: () {\n                    if (_pageController.hasClients) {\n                      _pageController.animateToPage(\n                        1,\n                        duration: const Duration(milliseconds: 10),\n                        curve: Curves.easeInOut,\n                      );\n                    }\n                  },\n                  child: Text(\n                    'PageView #3 - Sub-Menu 2',\n                    style: TextStyle(\n                        fontWeight: FontWeight.bold, color: Colors.white),\n                  ),\n                ),\n              ),\n            ),\n          ],\n        ),\n      ),\n    );\n  }\n}\n\nclass Choice {\n  const Choice({this.title, this.icon});\n\n  final String title;\n  final IconData icon;\n}\n\nconst List&lt;Choice&gt; choices = const &lt;Choice&gt;[\n  const Choice(title: 'Rotate Left', icon: Icons.rotate_left),\n  const Choice(title: 'Rotate Right', icon: Icons.rotate_right),\n  const Choice(title: 'Dissatisfied', icon: Icons.sentiment_dissatisfied),\n  const Choice(title: 'Neutral', icon: Icons.sentiment_neutral),\n  const Choice(title: 'Satisfied', icon: Icons.sentiment_satisfied),\n  const Choice(title: 'Very Satisfied', icon: Icons.sentiment_very_satisfied),\n];<\/pre>\n\n\n\n<h4>\ub9c8\ubb34\ub9ac<\/h4>\n\n\n\n<p>\ube44\uc778\uae30 \uc5b8\uc5b4\uc758 \uc120\ubd09\uc774\uc600\ub358 Dart\ub97c \ub2e8\uc2dc\uc77c\uc5d0 \ucd5c\uace0 \uc778\uae30 \uc5b8\uc5b4 \uc911 \ud558\ub098\ub85c \ub04c\uc5b4 \uc62c\ub9b0 Flutter\ub294 \uc219\uba85\uc801\uc73c\ub85c corss-platform\uc744 \uad6c\ud604\ud574\uc57c \ud558\ub294 \uae30\uc5c5\uc6a9 \uc18c\ud504\ud2b8\uc6e8\uc5b4 \ubc0f \ubaa8\ubc14\uc77c \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uac1c\ubc1c\uc790\ub4e4\uc5d0\uac8c \ub9ce\uc740 \uc778\uae30\ub97c \ub04c\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ucd5c\uadfc Google\uc758 \uc624\ud508\uc18c\uc2a4 \uc0ac\uc774\ud2b8\uc778 <a href=\"https:\/\/cs.opensource.google\/\">https:\/\/cs.opensource.google\/<\/a> \uc5d0\ub3c4 Dart\uc640 Flutter\uac00 \ub4f1\uc7ac\ub418\uc5b4, \ub354 \ub9ce\uc740 \uc778\uae30\ub97c \uad6c\uac00\ud560 \uac83\uc73c\ub85c \ubcf4\uc785\ub2c8\ub2e4. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-content\/uploads\/2020\/01\/b05-1.jpg\" alt=\"\" class=\"wp-image-267\" width=\"140\" height=\"50\"\/><\/figure><\/div>\n\n\n\n<p>Creative Commons License (CC BY-NC-ND)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&lt; Flutter \ud65c\uc6a9\ud558\uae30 &#8211; Skeleton Program for Future Usage &gt; Flutter\uac00 \uac15\ub825\ud558\ub2e4\uace0 \ub290\ub080\ub2e4\uba74 \ub2e4\ud589\uc774\uc9c0\ub9cc, \ucc98\uc74c \ubaa8\ubc14\uc77c \ud504\ub85c\uadf8\ub798\ubc0d\uc744 cross-platform\uc73c\ub85c \uc2dc\ub3c4\ud55c\ub2e4\uba74, \ubb50\uac00 \uc88b\uc740\uac74\uac00 \uc2f6\uc744 \uac83 \uc785\ub2c8\ub2e4. \uc544\ub9c8\ub3c4 &#8220;\uc65c \uc774\ub807\uac8c \ubcf5\uc7a1\ud55c\uac70\uc57c?&#8221;\ud558\uace0 \uc758\ubb38\uc744 \uac00\uc9c8\uc218\ub3c4 &#8230;<\/p>\n","protected":false},"author":1,"featured_media":992,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[3],"tags":[13],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/posts\/929"}],"collection":[{"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/comments?post=929"}],"version-history":[{"count":8,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/posts\/929\/revisions"}],"predecessor-version":[{"id":993,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/posts\/929\/revisions\/993"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/media\/992"}],"wp:attachment":[{"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/media?parent=929"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/categories?post=929"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/tags?post=929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}