{"id":869,"date":"2020-08-24T09:00:12","date_gmt":"2020-08-24T00:00:12","guid":{"rendered":"http:\/\/mobilelab.khu.ac.kr\/?p=869"},"modified":"2020-04-05T19:09:31","modified_gmt":"2020-04-05T10:09:31","slug":"be-dart-programmer-32","status":"publish","type":"post","link":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/2020\/08\/24\/be-dart-programmer-32\/","title":{"rendered":"Dart Programmer \ub418\uae30 [32]"},"content":{"rendered":"\n

< Flutter \ud65c\uc6a9\ud558\uae30 – Understanding Widgets ><\/h4>\n\n\n\n

\uc774\uc81c Flutter\uc5d0\uc11c \uc0c8\ub86d\uac8c \ud504\ub85c\uc81d\ud2b8\ub97c \ub9cc\ub4dc\ub294 \uacbd\uc6b0\uc5d0 \uc790\ub3d9\uc73c\ub85c \ub9cc\ub4e4\uc5b4\uc9c0\ub294 Start App\uc5d0 \ub300\ud574\uc11c \uc54c\uc544\ubcf4\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4. <\/p>\n\n\n\n

Flutter Start App\uc758 \uc774\ud574<\/h4>\n\n\n\n

\uc544\ub798\uc758 darttutorial-32-01.dart \ud504\ub85c\uadf8\ub7a8\uc774 Start App \ud504\ub85c\uadf8\ub7a8\uc5d0\uc11c \uc8fc\uc11d\ubb38(comment)\ub9cc \uc81c\uac70\ud55c \ud504\ub85c\uadf8\ub7a8 \uc785\ub2c8\ub2e4.<\/p>\n\n\n\n

\"\"
[\ud504\ub85c\uadf8\ub7a8] darttutorial-32-01.dart (Flutter Start App)<\/figcaption><\/figure><\/div>\n\n\n\n

3~9\ubc88 \ub77c\uc778\uc740 \uc55e\uc11c \uae00\uc758 \ub0b4\uc6a9\uacfc \ub3d9\uc77c\ud569\ub2c8\ub2e4. <\/p>\n\n\n\n

10\ubc88 \ub77c\uc778\uc5d0\uc11c MaterialApp class\uc758 \uac1d\uccb4\ub97c \ub9cc\ub4e4\uc5b4\uc11c return \ud558\ub294 \uac83\uc744 \ubcfc\uc218 \uc788\uc2b5\ub2c8\ub2e4. Material App\uc740 Android \uc6b4\uc601\uccb4\uc81c\ub97c \uc704\ud55c Material \ub514\uc790\uc778\uc744 \uc9c0\uc6d0\ud558\ub294 App\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4. (\ucc38\uc870: https:\/\/api.flutter.dev\/flutter\/material\/MaterialApp-class.html<\/a> )<\/p>\n\n\n\n

MaterialApp class\uc5d0\uc11c \uc9c0\uc6d0\ud558\ub294 property\uc911 title\uc740 \uc0ac\uc6a9\uc790\uc5d0\uac8c App\uc744 \uc2dd\ubcc4\ud558\uae30 \uc704\ud55c \ud55c\uc904\uc758 \ud45c\ud604 \uc785\ub2c8\ub2e4. \uc774 \uacbd\uc6b0 “Flutter Demo”\ub77c\ub294 \ubb38\uc790\uc5f4 \uc785\ub2c8\ub2e4. \uc774 \ud504\ub85c\uadf8\ub7a8\uc774 \ub514\ubc14\uc774\uc2a4\uc5d0 \uc124\uce58\ub418\uba74 \uc774 \uc774\ub984\uc774 \uc571\uc758 \uc774\ub984\uc73c\ub85c \uc0ac\uc6a9\ub429\ub2c8\ub2e4. theme\ub294 \ud574\ub2f9 App\uc758 material widget(\ub4e4)\uc5d0 \ub300\ud55c \uc2dc\uac01\uc801 \uc18d\uc131\uc744 \ud45c\ud604\ud569\ub2c8\ub2e4. \uc774\ub54c primarySwatch\ub294 MaterialColor\ub77c\uace0 \ud558\uba70, material app\uac00 \uc0ac\uc6a9\ud55c \uc0c9\uc758 different shade\ub97c \uc815\uc758\ud569\ub2c8\ub2e4. \uc774 \uacbd\uc6b0 \ud30c\ub791\uc0c9(Colors.blue)\uc784\uc744 \uc54c\uc218 \uc788\uc2b5\ub2c8\ub2e4. <\/p>\n\n\n\n

\uc774\ub97c \ud655\uc778\ud558\uae30 \uc704\ud574\uc11c \uc55e\uc11c\uc5d0\uc11c \ucc98\ub7fc \uc0c8\ub85c\uc6b4 \ud504\ub85c\uc81d\ud2b8\ub97c \ub9cc\ub4e4\uace0, Start App\uc744 \ubc14\ub85c \uc2e4\ud589\ud558\uba74, \uae30\ubcf8 \uc124\uc815\uc778 \ud30c\ub791\uc0c9\uc73c\ub85c \ubc30\uacbd\uc774 \ucc44\uc6cc\uc9c0\ub294 \uac83\uc744 \uc544\ub798\uc758 \uc2e4\ud589\ud654\uba74 [\uadf8\ub9bc 0]\uc640 \uac19\uc774 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. (\uc774\ub97c \ud655\uc778\ud558\uae30 \uc704\ud558\uc5ec, \uc774 \ud504\ub85c\uadf8\ub7a8\uc744 \uc2e4\ud589\ud569\ub2c8\ub2e4. \uadf8\ub9ac\uace0 Colors.blue\ub97c Colors.red\ub85c \ubc14\uafd4\uc11c App\uc758 \uc0c1\ub2e8\ubd80 \uc0c9\uae54\uc774 \ubc14\ub00c\ub294 \uac83\uc744 \ud655\uc778\ud574 \ubd05\ub2c8\ub2e4) home\uc740 App\uc758 default route(\uae30\ubcf8 \ud398\uc774\uc9c0 \ud654\uba74)\ub85c \uc0ac\uc6a9\ud560 widget\uc744 \ub098\ud0c0\ub0b4\uba70, 20\ubc88 \ub77c\uc778\uc744 \ubcf4\uba74, StatefulWidget\uc744 \ud655\uc7a5\ud55c MyHomePage\uc758 \uac1d\uccb4\uc784\uc744 \uc54c \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\uc758 \uc774\ub984\uc740 ‘Flutter Demo Home Page’\uc73c\ub85c \uc815\uc758\ud558\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uacb0\uad6d \uc774 \ud504\ub85c\uadf8\ub7a8\uc758 \uc8fc\uc694 \ub3d9\uc791\uacfc \ubaa8\uc591\uc740 MyHomePage class\uc5d0\uc11c \uc815\uc758\ub418\ub294 \uac83\uc744 \uc54c\uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

\"\"
[\uadf8\ub9bc 0] Start App (darttutorial-32-01.dart) \uc2e4\ud589 \ud654\uba74<\/figcaption><\/figure><\/div>\n\n\n\n

MyHomePage class\ub294 20~26\ubc88 \ub77c\uc778\uc5d0\uc11c \uc815\uc758\ud569\ub2c8\ub2e4. MyHomePage\ub294 StatefulWidget\uc744 \ud655\uc7a5\ud558\ub294\ub370, \uc774\ub294 mutable\ud55c \uac12\uc744 \uc800\uc7a5\ud558\uace0 \uad00\ub9ac\ud558\ub294 \uacbd\uc6b0\uc5d0 \uc0ac\uc6a9\ud558\ub294 class \uc785\ub2c8\ub2e4. 22\ubc88 \ub77c\uc778\uc5d0\uc11c title \ubcc0\uc218\uac00 \uc788\uace0, 15\ubc88 \ub77c\uc778\uc5d0\uc11c title\uc744 ‘Flutter Demo Home Page’\uc758 \ubb38\uc790\uc5f4\ub85c \uc804\ub2ec \ubc1b\uc740\ud6c4, 21\ubc88 \ub77c\uc778\uc5d0\uc11c \ucc98\ub7fc, title \ubcc0\uc218\uc5d0 \uc774 \uac12\uc744 \uc800\uc7a5\ud558\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. MyHomePage class\ub294 createState() method\uac00 \uc788\uc73c\uba70, \uc774\ub97c \ud1b5\ud574\uc11c MyHomePageState class\uc758 \uac1d\uccb4\uac00 \ub9cc\ub4e4\uc5b4 \uc9c0\ub294 \uac83\uc744 \uc54c \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \uc774 class \uc548\uc5d0\uc11c\ub294, StatefulWidget\uc774 \ub2e4\ub8f0 State class\ub97c \uc0dd\uc131\ud558\ub294 createState()\uac00 \ud638\ucd9c\ub429\ub2c8\ub2e4. \ub530\ub77c\uc11c \uc2e4\uc9c8\uc801\uc778 \ud504\ub85c\uadf8\ub7a8\uc758 \uc791\uc5c5\uc740 mutable\ud55c \uc815\ubcf4\ub97c \uc800\uc7a5\/\uad00\ub9ac\ud558\ub294 MyHomePageState class\uc548\uc5d0\uc11c \uc774\ub8e8\uc5b4 \uc9c0\uac8c \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n

\uc5ec\uae30\uae4c\uc9c0\uc758 \ub0b4\uc6a9\uc744 \ub2e8\uacc4\uc801\uc73c\ub85c \ud45c\ud604\ud558\uba74 1) Dart\uc758 main()\uc774 \uc2e4\ud589 \ub429\ub2c8\ub2e4. 2) Flutter\uc758 main()\uc5d0 \ud574\ub2f9\ud558\ub294 runApp()\uc744 \uc2e4\ud589\ud569\ub2c8\ub2e4. 3) \ud504\ub85c\uadf8\ub7a8\uc744 \ub514\ubc14\uc774\uc2a4\uc5d0 \ub4f1\ub85d\ud558\uace0, \uae30\ubcf8\uc801\uc778 GUI \ud658\uacbd\uc744 \uc124\uc815\ud558\ub294 (StatelessWidget\ub97c \ud655\uc7a5\ud55c) MyApp class\ub97c \ub9cc\ub4e4\uace0, build \ud568\uc218\ub97c override \ud558\uc5ec, \ud654\uba74\uc774 \ub098\ud0c0\ub098\ub3c4\ub85d \ud569\ub2c8\ub2e4. \uc774 \uacbd\uc6b0 MaterialApp \uae30\ubc18\uc758 GUI \ub514\uc790\uc778\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4. 4) mutable\ud55c \uc815\ubcf4\ub97c \ub2e4\ub8f0 \ud544\uc694\uac00 \uc788\ub294 \uacbd\uc6b0 StatefulWidget\uc778 MyHomePage class\ub97c \ub9cc\ub4e4\uc5b4\uc11c 3)\uc758 widget\uc5d0 \ud3ec\ud568\ud558\uc5ec \uc0dd\uc131\ud558\ub3c4\ub85d \ud569\ub2c8\ub2e4. \uadf8\ub9ac\uace0 createState()\ub97c override\ud574\uc11c mutable\ud55c \uc815\ubcf4\ub97c \uc800\uc7a5\ud558\uace0 \uad00\ub9ac\ud558\ub294 State<> class\ub97c \uc0dd\uc131\ud558\ub3c4\ub85d \ud569\ub2c8\ub2e4. 5) StatefulWidget\uc774 \uc0dd\uc131\/\uad00\ub9ac\ud560 \uc815\ubcf4\ub97c \ub2e4\ub8f0 class\ub97c State<> class\ub97c \ud655\uc7a5\ud558\uc5ec MyHomePageState class\ub85c \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

\uc774\uc81c \ub9c8\uc9c0\ub9c9\uc73c\ub85c \ub0a8\uc740, MyHomePageState class\uc548\uc758 \uc124\uba85\uc744 \ud569\ub2c8\ub2e4. \uc774\uc5d0 \ub300\ud574\uc11c\ub294 \ud654\uba74\uc5d0 \ub098\ud0c0\ub09c GUI\uc640 \uae30\ub2a5\uc744 \uc124\uba85\ud558\ub294 \ubc29\uc2dd\uc73c\ub85c \ud558\uaca0\uc2b5\ub2c8\ub2e4. \uba3c\uc800, \uc55e\uc11c\uc758 \uadf8\ub9bc\uc740 3\ub2e8\uc73c\ub85c \ub098\ub269\ub2c8\ub2e4. \ub9e8\uc704\uc758 \ud30c\ub791 \ubc14\ud0d5\uc5d0 \ud0c0\uc774\ud2c0\uc778 ‘Flutter Demo Home Page’\uc774 \uc788\ub294 \ubd80\ubd84, \uc911\uac04\uc5d0 “You have pushed the button this many times:”\uacfc \uc22b\uc790”0″\uc774 \uc788\ub294 \ubd80\ubd84, \uadf8\ub9ac\ub85c \ud558\ub2e8\uc758 “+” \uae30\ud638\uac00 \uc788\ub294 \ub465\uadfc \uc6d0 \ubaa8\uc591\uc758 \ub2e8\ucd94 \uc785\ub2c8\ub2e4. \uc774\ub7f0 \uc2a4\ud0c0\uc77c\uc758 GUI Layout\uc740 39\ubc88 \ub77c\uc778\uc5d0\uc11c \ub9cc\ub4e4\uc5b4\uc9c0\ub294 Scaffold widget\uc744 \ud1b5\ud574\uc11c \ub9cc\ub4e4\uc5b4 \uc9d1\ub2c8\ub2e4. Scaffold widget\uc740 Material \ub514\uc790\uc778\uc758 \uc2dc\uac01\uc801 \ub808\uc774\uc544\uc6c3 \uad6c\uc870\ub97c \ub098\ud0c0\ub0b4\uba70, drawers, snack bars \uadf8\ub9ac\uace0 bottom sheets \ub4f1\uc758 \ub2e4\uc591\ud55c \uc694\uc18c\ub97c \ud3ec\ud568\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. (\ucc38\uc870: https:\/\/api.flutter.dev\/flutter\/material\/Scaffold-class.html<\/a> )<\/p>\n\n\n\n

MyHomePageState class\uc758 Scarffold class\ub294 \ud654\uba74\uc758 \uc0c1\ub2e8 \ubd80\ubd84\uc744 \ud45c\ud604\ud558\uae30 \uc704\ud574\uc11c AppBar \ud074\ub798\uc2a4 \ud0c0\uc785\uc73c\ub85c Scarffold\uc758 appBar property\ub97c \ucc44\uc6c1\ub2c8\ub2e4. AppBar\ub294 MyApp class\uc758 \uc0dd\uc131\uc790\uc5d0 \ubd80\uc5ec\ud55c title\ub85c \ucd08\uae30\ud654 \ub429\ub2c8\ub2e4. \uc911\uac04 \ubd80\ubd84\uc740 \uc55e\uc11c\uc758 \uae00\uc5d0\uc11c\ub3c4 \ub4f1\uc7a5\ud588\uc5c8\ub358 Center class\ub85c \ucc44\uc6cc\uc9d1\ub2c8\ub2e4. mainAxisAlignment\ub97cMainAxisAlignment.center\ub85c \ud558\uc5ec \ud654\uba74\uc758 \uc911\uac04\uc5d0 \uc704\uce58\ud558\ub3c4\ub85d \ud558\uc600\uc73c\uba70, Text class \ub450\uac1c\ub97c Widget list\uc5d0 \ub2f4\uc544\uc11c Center class\uc758 children property\ub97c \ucc44\uc6c1\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574\uc11c Center class\uc5d0 \ub450\uac1c\uc758 \ubb38\uc790\uc5f4\uc774 \uc788\ub3c4\ub85d \ud558\ub294 \uac83 \uc785\ub2c8\ub2e4. \ub9c8\uc9c0\ub9c9\uc73c\ub85c \ud558\ub2e8\uc758 \ubc84\ud2bc\uc740 FloatingActionButton class\ub97c \ub9cc\ub4e4\uc5b4\uc11c Center class\uc758 floatingActionButton\uc744 \ucc44\uc6cc\uc11c \ub9cc\ub4ed\ub2c8\ub2e4. \uc774 class\ub294 child property\ub97c \ud1b5\ud574\uc11c \ub354\ud558\uae30 \uae30\ud638\uc5d0 \ud574\ub2f9\ud558\ub294 Icons.add \uc544\uc774\ucf58\uc744 \uac00\uc9c0\uba70, \ud074\ub9ad\uc774 \ub418\uba74(onPressed) incrementCounter method\uac00 \ud638\ucd9c\ub418\ub3c4\ub85d \ud569\ub2c8\ub2e4. \uadf8\ub807\ub2e4\uba74 \uc774 method\ub294 \uc5b4\ub514 \uc788\ub098\uc694? MyHomePageState class\uc758 \ucc98\uc74c \ubd80\ubd84\uc73c\ub85c \uc62c\ub77c\uac00\uba74, \uc774 method\uac00 \ub9cc\ub4e4\uc5b4\uc838 \uc788\uc2b5\ub2c8\ub2e4. \uc2e4\ud589\uc774 \ub418\uba74, setState()\ub97c \uc2e4\ud589\ud558\ub294\ub370, \uc785\ub825 \ud30c\ub77c\uba54\ud0c0\ub85c \uc774\ub984\uc774 \uc5c6\ub294 \ud568\uc218\ub97c \uc8fc\uba70, \uc774 \ud568\uc218\uac00 counter \uac12\uc744 \uc99d\uac00\uc2dc\ud0a4\uace0, \uc774 \ubcc0\uc218\ub294 MyHomePageState class \uc548\uc758 property\ub85c 29\ubc88 \ub77c\uc778\uc5d0\uc11c \ub9cc\ub4e4\uc5b4\uc838 \uc788\uc74c\uc744 \uc54c \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub530\ub77c\uc11c \ud654\uba74\uc758 \ud558\ub2e8 \ub2e8\ucd94\ub97c \ub204\ub974\uba74, counter \ubcc0\uc218 \uac12\uc744 \uc99d\uac00\uc2dc\ud0a4\uac8c \ub418\ub294 \uac83\uc744 \uc54c \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub807\ub2e4\uba74, \uc774\ub807\uac8c \uc99d\uac00\ub41c \uac12\uc774 \uc5b4\ub5bb\uac8c Center class\uc548\uc758 children \uc548\uc758 \ub450\ubc88\uc9f8 Text\ub97c \ud1b5\ud574\uc11c \ud654\uba74\uc5d0 \uac31\uc2e0\ub418\uc5b4 \ucd9c\ub825\uc774 \ub418\ub294 \uac78\uae4c\uc694? \uc774\uc5d0 \ub300\ud55c \ud574\ub2f5\uc744 \ucc3e\uae30 \uc704\ud574\uc11c \ub2e4\uc18c \ubcf5\uc7a1\ud558\uc9c0\ub9cc \ubc18\ub4dc\uc2dc \uc54c\uc544\uc57c \ud558\ub294 “build()\uc640 setState()\uc758 \uc0c1\uad00 \uad00\uacc4\ub97c \uc774\ud574”\ub77c\ub294 \uc5ec\uc815\uc744 \ub5a0\ub098\uc57c \ud569\ub2c8\ub2e4. <\/p>\n\n\n\n

Deep Dive into Flutter Widget Operation<\/h4>\n\n\n\n

Stateless\nWidget\uc740 immutable\ud55c \uc815\ubcf4\ub97c \uac16\ub294 Widget \uc774\uc9c0\ub9cc, Stateful Widget\uc740 State \uc815\ubcf4\ub97c \uac00\uc9c0\uace0 mutable\ud558\uac8c \uad00\ub9ac \ud569\ub2c8\ub2e4. \uc774\uc5d0 \ub300\ud574\uc11c, \uac04\ub2e8\ud558\uac8c [\uadf8\ub9bc 1]\uc5d0 \ub3c4\uc2dd\ud654 \ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \ub9cc\uc57d \uadf8\ub798\ud53d \uc778\ud130\ud398\uc774\uc2a4\uc640 \uc5f0\uacc4\ud55c\ub2e4\uba74, Stateless Widget\uc740 \uc808\ub300\ub85c \ubc14\ub00c\uc9c0 \uc54a\ub294 \uadf8\ub798\ud53d \uc778\ud130\ud398\uc774\uc2a4\uc774\uba70,\nStateful Widget\uc740 \ub0b4\ubd80 \uc815\ubcf4\uc5d0 \ub530\ub77c\uc11c \uadf8\ub798\ud53d\uc774 \ub2ec\ub77c\uc9c0\ub294 \ud615\ud0dc\ub77c\ub3c4 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

Stateless\nWidget\uc740 \uc5ec\ub7ec widget \ub4e4\uc744 \ubaa8\uc544\uc11c \uc0ac\uc6a9\uc790\n\uc778\ud130\ud398\uc774\uc2a4\ub97c \uad6c\uc131\ud560 \ub54c \uc8fc\ub85c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uc774 \uacbd\uc6b0 build()\uc758\n\uc9c4\ud589\uc740 \ud68c\uadc0\uc801\uc73c\ub85c(recursively) \ubaa8\ub4e0 \uc0ac\ud56d\uc774 concrete\ud55c\n\uc218\uc900\uc774 \ub420 \ub54c\uae4c\uc9c0 \uc9c4\ud589\ub418\ub294\ub370, \uc989 concrete\ud558\uac8c \ubaa8\ub4e0 widget\ub4e4\uc774 RederObjects\/RenderObjectWidgets\uac00\n\ub420 \ub54c\uae4c\uc9c0 \uc9c4\ud589\ud569\ub2c8\ub2e4. \ub530\ub77c\uc11c Stateless Widget\uc740\n\uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uad6c\uc131\ud558\ub294 \uacbd\uc6b0, \uc624\ub85c\uc9c0 \uace0\uc815\ub41c\nconfiguration \uc815\ubcf4 \ub9cc\uc73c\ub85c \uad6c\uc131\ud558\ub294 \uacbd\uc6b0\ub4e4\uc5d0 \ub300\ud574\uc11c \uc720\uc6a9\ud569\ub2c8\ub2e4. <\/p>\n\n\n\n

Stateful\nWidget\uc740 \ubc18\ub300\uc758 \uacbd\uc6b0\ub85c \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uad6c\uc131\ud558\ub294\nwidget \ub4e4\uc758 \uc9d1\ud569\/\uc704\uce58\/\ud615\ud0dc \ub4f1\uc774 \ub3d9\uc801\uc774\uace0, \uc0c1\uc2dc \ubcc0\ud560 \uc218 \uc788\ub294 \uacbd\uc6b0\uc5d0 \uc720\uc6a9\ud569\ub2c8\ub2e4. \uc2dc\uac04\uc774\ub098 \uc774\ubca4\ud2b8\uc5d0 \ub530\ub77c\uc11c\n\uc0c1\ud0dc\uac00 \ubcc0\ud558\ub294 \uacbd\uc6b0\ub4e4\uc5d0\uc11c \uc720\uc6a9\ud569\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \ub3d9\uc801\uc73c\ub85c \ubcc0\ud558\ub294 \uc18d\uc131\uc0c1,\nWidget\uc774 build \ub418\uace0 \uc788\uc744 \ub54c\uc5d0\uc11c\ub294 \ub3d9\uae30\uc801\uc73c\ub85c \ub370\uc774\ud130\ub97c \uc77d\uc744 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

\"\"
[\uadf8\ub9bc 1] Stateless Widget\uacfc Stateful Widger\uc758 \uac1c\ub150
(\ucd9c\ucc98) https:\/\/medium.com\/@rkishan516\/flutter-book-stateless-and-stateful-widgets-8db946f45df5<\/figcaption><\/figure>\n\n\n\n

StatelessWidget\uc744 extends\ud55c Stateless Widget Class \uac1d\uccb4\ub294, constructor\ub97c \ud1b5\ud574\uc11c \uc804\ub2ec \ubc1b\uc740 \uc815\ubcf4\ub97c final \uba64\ubc84\n\ubcc0\uc218\ub85c \uc800\uc7a5\ud569\ub2c8\ub2e4. \uc774 \uc815\ubcf4\ub4e4\uc740 build()\ub97c \uc2e4\ud589\ud558\uba74\uc11c\n\uc0ac\uc6a9\ud569\ub2c8\ub2e4. Stateless Widget\uc758 \uba64\ubc84 \ubcc0\uc218\ub97c \ubc14\uafc0 \ud544\uc694\uac00 \uc788\ub2e4\uba74, Stateless Widget\uc740 \uc774\ub97c \uc9c1\uc811 \ubc14\uafb8\uc9c0 \uc54a\uace0, (\uc989, Widget \ub0b4\ubd80\uc758 \uba64\ubc84 \ubcc0\uc218\uc758 \uac12\uc744 \ubc14\uafb8\ub294 \uac83\uc774 \uc544\ub2c8\uace0, \ub300\ubd80\ubd84\uc758\n\uacbd\uc6b0) parent widget\uc73c\ub85c \ubd80\ud130 \uc804\ub2ec \ubc1b\uc740 \ud568\uc218\ub97c \ud638\ucd9c\ud558\uac8c \ub429\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, Stateless Widget\uc774 flag \uac12\uc744 \uac00\uc9c0\uace0 \uc788\uace0, true\/false \uc774\ub77c\uba74, parent \ud568\uc218\ub97c \ud638\ucd9c\ud574\uc11c, flag \uac12\uc774 \ubc14\ub010 \uc0c8\ub85c\uc6b4 Stateless Widget\uc744 \ub9cc\ub4e4\uc5b4\uc11c parent\uc5d0 \ub4f1\ub85d \ud558\ub294\n\ud615\ud0dc\uc785\ub2c8\ub2e4. \uc774\ub807\uac8c \ud558\uc5ec, \ud504\ub85c\uadf8\ub7a8\uc5d0\uc11c \uad00\ub9ac\ud574\uc57c \ud558\ub294 \uc815\ubcf4\uac00 Stateless Widget\ub97c \ub5a0\ub098\uc11c parent widget \ub808\ubca8\uc5d0\uc11c\n\uad00\ub9ac\uac00 \ub429\ub2c8\ub2e4. \uc774\ub7f0 \ubc29\uc2dd\uc73c\ub85c (Stateless Widget\uc758\n\uc218\uba85\uc774 \uc544\ub2cc) \ud504\ub85c\uadf8\ub7a8\uc5d0\uc11c \ud544\uc694\ub85c \ud558\ub294 \uae30\uac04 \ub3d9\uc548 \uc815\ubcf4\ub97c \uad00\ub9ac\ud558\ub294 \uac83\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4. \uadf9\ub2e8\uc801\uc73c\ub85c \ud504\ub85c\uadf8\ub7a8\uc758 \uc218\ud589\ubd80\ud130 \uc885\ub8cc\uae4c\uc9c0 \uc815\ubcf4\ub97c \uad00\ub9ac\ud558\ub294 \uac83\ub3c4 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

\uc55e\uc11c\uc758\n\uc608\ucc98\ub7fc, Stateless Widget\uc774 parent\uc5d0\uc11c\n\uc804\ub2ec\ud55c call back \ud568\uc218\ub97c \ud638\ucd9c\ud558\uba74, parent\ub294\n\uc790\uc2e0\uc758 \ub0b4\ubd80 \uc0c1\ud0dc\ub97c \uc5c5\ub370\uc774\ud2b8\ud558\uace0, \uc0c8\ub85c\uc6b4 Stateless\nWidget\uc744\n(\ubcc0\uacbd\ud55c \uc815\ubcf4\ub97c \uac16\ub294 \uc0c1\ud0dc\ub85c)\nrebuild\/create \ud569\ub2c8\ub2e4. \uc0c8\ub85c\uc6b4\nStateless Widget\ub4e4\uc744 (\uc0c1\ud0dc \ubcc0\uacbd\uc774 \ud544\uc694\ud560 \ub54c\ub9c8\ub2e4) parent\uac00 \uc0c8\ub86d\uac8c \uc0dd\uc131\ud558\ub294 \ubd80\ubd84\uc5d0\uc11c \uc131\ub2a5 \uc800\ud558\ub97c \uc6b0\ub824\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\uc640\n\uad00\ub828\ud574\uc11c, Flutter\ub294 \uc0c8\ub86d\uac8c \ub9cc\ub4dc\ub294 Widget\uacfc \uae30\uc874\uc758 Widget\uc744 \ube44\uad50\ud558\uc5ec, \ub300\ubd80\ubd84\uc740 \uc7ac\uc0ac\uc6a9\uc744 \ud558\uace0, \ub2e8\uc9c0 \ucc28\uc774\uac00 \uc788\ub294 \ubd80\ubd84\uc744 RenderObject\uc5d0\uc11c \ucc98\ub9ac\ud558\uc5ec, \uc131\ub2a5 \uc0c1\uc758 \ubd80\ud558\ub97c \uc904\uc774\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

Flutter\uc5d0\uc11c widget\n\ub4e4\uc740 tree \ud615\ud0dc\ub85c \uad00\ub9ac\n\ub429\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4,\nFlutter \uacf5\uc2dd \uc0ac\uc774\ud2b8\uc758 \uc608\uc81c\ub97c \uae30\ubc18\uc73c\ub85c \uc124\uba85\ud560\ub54c, \ub2e4\uc74c\uacfc \uac19\uc740\n\uadf8\ub798\ud53d \uc778\ud130\ud398\uc774\uc2a4\ub97c \ub9cc\ub4e0\ub2e4\uace0 \uac00\uc815\ud574 \ubd05\ub2c8\ub2e4. (\ucd9c\ucc98: https:\/\/flutter.dev\/docs\/development\/ui\/layout<\/a>)<\/p>\n\n\n\n

\"\"
[\ucd9c\ucc98] https:\/\/flutter.dev\/docs\/development\/ui\/layout<\/a><\/figcaption><\/figure><\/div>\n\n\n\n

Flutter\uc5d0\uc11c\ub294 \uc704\uc758\n\uad6c\uc870\ub97c \ud504\ub85c\uadf8\ub798\ubc0d \ud560 \ub54c \ub2e4\uc74c\uc758 \uadf8\ub9bc\ucc98\ub7fc \uc5ec\ub7ec \uad6c\uc131 \uc694\uc18c\uc758 \uc9d1\ud569\uc73c\ub85c \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

\"\"
[\ucd9c\ucc98] https:\/\/flutter.dev\/docs\/development\/ui\/layout<\/a><\/figcaption><\/figure><\/div>\n\n\n\n

\uc989, 3\uac1c\uc758 icon\uacfc \uc774\ub4e4 \uac01\uac01\uc5d0 \ub300\ud55c \uae00\uc790(text)\uac00 \ubcf4\uc785\ub2c8\ub2e4. \ub530\ub77c\uc11c icon\uacfc text\ub97c \ubb36\ub294 \ub17c\ub9ac\uc801\uc778\n\uadf8\ub8f9\uc744 \uc0dd\uac01\ud560 \uc218 \uc788\ub294\ub370, \uc774\ub4e4\uc740 \uc704\/\uc544\ub798\uc758 \uc218\uc9c1\uc801\uc778 \uadf8\ub8f9(column)\uc785\ub2c8\ub2e4. \uc774 \uadf8\ub8f9\uc774\n3\uac1c \uc218\ud3c9\uc801\uc73c\ub85c \uadf8\ub8f9(row)\uc744 \ub9cc\ub4e4\uace0\n\uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \uc774 \uadf8\ub8f9\uc740 \ud558\ub098\uc758 \ud070 \ubc15\uc2a4(container) \uc548\uc5d0 \ub2f4\uc544\uc11c \ucc98\ub9ac\ud569\ub2c8\ub2e4. \uc774\ub97c tree \ud615\ud0dc\ub85c \ub3c4\uc2dd\ud654\n\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. Row, Column,\nIcon, Text\ub294 \uc9c1\uad00\uc801\uc73c\ub85c \uc774\ud574\uac00 \uac00\ub2a5\ud558\uc9c0\ub9cc, Container\ub294 \uc77c\ubd80 \uc124\uba85\uc774\n\ud544\uc694\ud574 \ubcf4\uc785\ub2c8\ub2e4. Container\ub294 \ub0b4\ubd80\uc5d0 \ud3ec\ud568\ud558\ub294 child widget\ub4e4\uc744 customize\ud558\ub294 \uc6a9\ub3c4\ub85c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uc989, padding, margin, border, background color, icon\ncolor, text style \ub4f1\uc744 \uc870\uc815\ud558\uae30\n\uc704\ud55c \ubaa9\uc801\uc73c\ub85c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \ub530\ub77c\uc11c \uc544\ub798\uc758 tree \uad6c\uc870\ub97c \uc0b4\ud3b4\ubcf4\uba74, Row\uc640 Text\uc5d0 \ub300\ud55c customization\uc744 \uc704\ud574\uc11c Container\ub97c \uc0ac\uc6a9\ud558\uc5ec \uac10\uc2f8\ub294 \uac83\uc744 \uc720\ucd94\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

\"\"
[\ucd9c\ucc98] https:\/\/flutter.dev\/docs\/development\/ui\/layout<\/a><\/figcaption><\/figure>\n\n\n\n

StatefulWidget\uc744 extends\ud55c Stateful Widget Class \uac1d\uccb4\ub294 mutable state\ub97c \uc800\uc7a5\ud569\ub2c8\ub2e4. \uc774\ub7f0 Stateful Widget\uc774 tree\uc548\uc5d0 \uc0bd\uc785\ub418\uba74, Flutter framework\ub294 createState() \ud568\uc218\ub97c\n\ud638\ucd9c\ud558\uc5ec Stateful Widget \uac1d\uccb4\uac00 \uad00\ub9ac\ud560 State\nClass \uac1d\uccb4\ub4e4\uc744 \uc0c8\ub86d\uac8c \ub9cc\ub4e4\uace0, tree\uc5d0 \uc774\ub4e4\uc758 \uc704\uce58 \uc815\ubcf4\ub3c4 \ud568\uaed8 \uc800\uc7a5\ud569\ub2c8\ub2e4. State Class\ub97c extends\ud55c \uc11c\ube0c \ud074\ub798\uc2a4 \ub4e4\uc740 private \uc18d\uc131\uc744 \uac00\uc9c0\uae30\uc5d0, \uc774\ub984\uc744 \u201c_\u201d\ub85c \uc2dc\uc791\ud569\ub2c8\ub2e4. \ub9cc\uc57d\nStateful Widget\uc758 parent\uac00\nrebuild\ub97c \uc2e4\uc2dc\ud558\uba74, parent\ub294 \ud558\uc704 \uccb4\uacc4\uc758\nStateful Widget\uc758 \uac1d\uccb4\ub97c \uc0c8\ub86d\uac8c \ub9cc\ub4ed\ub2c8\ub2e4. \ud558\uc9c0\ub9cc Flutter framework\ub294 \uae30\uc874\uc758 Stateful Widget \uac1d\uccb4\uac00\n\uc774\ubbf8 \uc800\uc7a5\ud558\uace0 \uc788\ub358 State Class \uac1d\uccb4\ub97c \uc7ac\uc0ac\uc6a9\ud558\uc5ec,\nStateful Widget Class\uc758 createState() \ud568\uc218\uac00 \ub2e4\uc2dc \ud638\ucd9c\ub418\ub294\n\uac83\uc744 \uc9c0\uc591\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

Stateful\nWidget\uc774 \uad00\ub9ac\ud558\ub294 State Class \uac1d\uccb4\uc5d0\uc11c, Stateful Widget\uc758 property\uc5d0 \uc811\uadfc\ud558\uace0\uc790 \ud55c\ub2e4\uba74, State Class \uac1d\uccb4\ub294 \uc790\uc2e0\uc758 widget<\/em> Property\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub9cc\uc57d Stateful Widget\uc758 parent\uac00 Stateful Widget \uac1d\uccb4\ub97c rebuild\ud558\uace0 \uc0c8\ub86d\uac8c \ub9cc\ub4e4\uace0\uc790\n\ud55c\ub2e4\uba74, Stateful Widget\uc774 \uad00\ub9ac\ud558\ub294 State Class\n\uac1d\uccb4\ub294 \uc790\uc2e0\uc758 widget<\/em> Property\ub97c\n\uc0c8\ub86d\uac8c \ub9cc\ub4e4\uc5b4\uc9c4 widget<\/em> Property\ub85c rebuild \ub429\ub2c8\ub2e4. \uc774\ub7f0 \uacbd\uc6b0,\n\uac1c\ubc1c\uc790\uac00 widget<\/em> Property\uc758\n\ubcc0\uacbd \uc5ec\ubd80\ub97c \uc9c1\uc811 \ubc1b\uc544\ubcf4\uace0 \uc2f6\ub2e4\uba74, didUpdateWidget() \uba64\ubc84 \uba54\uc18c\ub4dc\ub97c override \ud569\ub2c8\ub2e4. \uc774 \uba54\uc18c\ub4dc\ub97c \uc0ac\uc6a9\ud558\uba74, \ud604\uc7ac\uc758 widget\uacfc \uacfc\uac70\uc758\nwidget\uc744 \ube44\uad50\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

State\nClass \uac1d\uccb4\uc758 \uc0c1\ud0dc\ub97c \ubcc0\uacbd\ud558\ub294 \ud568\uc218 \ud639\uc740 call\nback \ud568\uc218\uac00 \uc2e4\ud589\ub418\uba74, Flutter framework\uc5d0 \ub0b4\ubd80 \uc0c1\ud0dc\uac00 \ubcc0\uacbd \ub418\uc5c8\uc74c\uc744\n\uc54c\ub9ac\uae30 \uc704\ud574\uc11c, setStaste() \ud568\uc218\uc5d0 \ud544\uc694\ud55c \uc791\uc5c5\uc744 \uc791\uc131\ud558\uc5ec \uc2e4\ud589\ud569\ub2c8\ub2e4. setStaste() \ud568\uc218\ub97c \ud638\ucd9c\ud55c\ub2e4\ub294 \uc758\ubbf8\ub294, Flutter\nframework\uc5d0\uac8c \uc0c1\ud0dc \ubcc0\ud654\uac00 \uc788\uc74c\uc744 \uc54c\ub824\uc918\uc11c, \uc608\uc815\ub41c \ub2e4\uc74c \ucc28\ub840\uc758 \ud504\ub85c\uadf8\ub7a8 \ud654\uba74 \uc5c5\ub370\uc774\ud2b8\n\uc2dc\uc810\uc5d0\uc11c, \ubc18\uc601\ud574 \ub2ec\ub77c(build() \ud568\uc218\ub97c \ud638\ucd9c\ud574 \ub2ec\ub77c)\ub294 \uc758\ubbf8\uc785\ub2c8\ub2e4. setStaste() \ud568\uc218 \ud638\ucd9c\uc744 \uac1c\ubc1c\uc790\uac00 \ub204\ub77d\ud558\uba74, Flutter framework\ub294 \uc0c1\ud0dc\uc758 \ubcc0\ud654\ub97c \uc54c\uc9c0 \ubabb\ud558\uac8c \ub418\uba70,\nbuild() \ud568\uc218 \ud638\ucd9c\uc744 \ud558\uc9c0 \uc54a\uac8c \ub429\ub2c8\ub2e4. \uc774\ub807\uac8c\nstate\ub97c \uad00\ub9ac \ud568\uc73c\ub85c\uc368, Widget\uc758 \ubcf5\uc7a1\ud55c\ntree \uccb4\uacc4\ub97c \uac1c\ubc1c\uc790\uac00 \ubaa8\ub450 \uc774\ud574\ud574\uc11c, child widget\ub4e4\uc758 \uc0dd\uc131\uacfc \uc5c5\ub370\uc774\ud2b8\ub97c \uc77c\uc77c\uc774\n\ucc98\ub9ac\ud558\uc9c0 \uc54a\uc544\ub3c4 \ub429\ub2c8\ub2e4. \ub2e8\uc9c0 \uac1c\ubc1c\uc790\ub294 build() \ud568\uc218\ub97c\n\ub9cc\ub4e4\uba74, \uc774 \ubaa8\ub4e0 \uc0ac\ud56d\uc744 Flutter framework\uac00\n\ucc98\ub9ac\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

StatefulWidget\uc5d0\uc11c createState ()\ub97c \ud638\ucd9c \ud55c \ud6c4, Flutter \ud504\ub808\uc784 \uc6cc\ud06c\ub294 \uc0c8\ub85c\n\ub9cc\ub4e0 State \uac1d\uccb4\ub97c \ud2b8\ub9ac\uc5d0 \uc0bd\uc785 \ud55c \ub2e4\uc74c \uc0c1\ud0dc\n\uac1d\uccb4\uc5d0\uc11c initState()\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4. State\uc758\n\uc11c\ube0c \ud074\ub798\uc2a4\ub294 initState()\ub97c override\ud558\uc5ec\n\ud55c \ubc88\ub9cc \uc218\ud589\ud574\uc57c \ud558\ub294 \uc791\uc5c5\uc744 \uc218\ud589 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\uc131\ud558\uac70\ub098 \ud50c\ub7ab\ud3fc \uc11c\ube44\uc2a4\ub97c\n\uad6c\ub3c5\ud558\ub824\uba74 initState()\ub97c override \ud569\ub2c8\ub2e4. \uc774 \uacbd\uc6b0\uc5d0\ub294, override\ud558\ub294 initState() \ud568\uc218\uc758 \uc2dc\uc791 \ubd80\ubd84\uc5d0\uc11c super.initState()\ub97c\n\ud638\ucd9c\ud558\uc5ec\uc57c \ud558\uc5ec\uc57c \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

State \uac1d\uccb4\uac00 \ub354 \uc774\uc0c1 \ud544\uc694\ud558\uc9c0 \uc54a\uc73c\uba74 Flutter \ud504\ub808\uc784 \uc6cc\ud06c\uac00 \ud574\ub2f9 State \uac1d\uccb4\uc758 dispose()\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4. \ud544\uc694\ud55c \uc815\ub9ac \uc791\uc5c5\uc774 \uc788\ub2e4\uba74, dispose()\ub97c override \ud558\ub3c4\ub85d \ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4 \ud0c0\uc774\uba38\ub97c \ucde8\uc18c\ud558\uac70\ub098 \ud50c\ub7ab\ud3fc \uc11c\ube44\uc2a4\uc758 \uad6c\ub3c5\uc744 \ucde8\uc18c\ud558\ub824\uba74 dispose()\ub97c override \ud569\ub2c8\ub2e4.\ndispose()\uc758 \uad6c\ud604\uc740 \uc77c\ubc18\uc801\uc73c\ub85c super.dispose()\ub97c \ud568\uc218\uc758 \ub9c8\uc9c0\ub9c9 \ubd80\ubd84\uc5d0\uc11c \ud638\ucd9c\ud558\uc5ec \uc885\ub8cc\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

StatefulWidget\uc758 life cycle\uacfc \ud568\uc218\ub4e4\uc758 \uad00\uacc4\ub97c \uadf8\ub9bc\uc73c\ub85c \uc124\uba85\ud558\uba74 \ub2e4\uc74c\uc758 [\uadf8\ub9bc\n2]\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

\"\"
[\uadf8\ub9bc 2] Stateful Widget\uacfc State\uc758 \uc0c1\uad00 \uad00\uacc4
(\ucd9c\ucc98: https:\/\/livebook.manning.com\/book\/flutter-in-action\/chapter-8\/v-9\/37)<\/figcaption><\/figure>\n\n\n\n

StatefulWidget\uc758 life cycle\uc5d0 \uc5f0\uad00\ub41c \ud568\uc218\ub4e4\uc744 \uac04\ub2e8\ud788 \uc124\uba85\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. (\ucc38\uc870: https:\/\/stackoverflow.com\/questions\/47501710\/what-is-the-relation-between-stateful-and-stateless-widgets-in-flutter\/49377090#49377090<\/a>)<\/p>\n\n\n\n

createState()\ub294 Flutter\uac00 StatefulWidget\uc744 \ub9cc\ub4e4 \ub54c \ud638\ucd9c\ub429\ub2c8\ub2e4. \uc774 \ud568\uc218\ub294 tree\uc548\uc758 \uc8fc\uc5b4\uc9c4 \uc704\uce58\uc5d0 StatefuleWidget\uc744 \uc704\ud55c mutable\ud55c state\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \uc11c\ube0c \ud074\ub798\uc2a4\ub294 \ubc18\ub4dc\uc2dc, \uc5f0\uad00\ub41c State \uc11c\ube0c \ud074\ub798\uc2a4\ub97c \uae30\ubc18\uc73c\ub85c \ud574\uc11c, \uc0c8\ub86d\uac8c \ub9cc\ub4e4\uc5b4\uc9c4 \uac1d\uccb4\ub97c \ub9ac\ud134 \ud558\ub3c4\ub85d \uc774 \ud568\uc218\ub97c override \ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

@override\n_MyState createState() => _MyState();<\/pre>\n\n\n\n
initState()\ub294 widget\uc774 \uc0dd\uc131\ub420 \ub54c, constructor \ub2e4\uc74c\uc73c\ub85c, \uac00\uc7a5 \uba3c\uc800 \ud638\ucd9c\ub418\ub294 \uba54\uc18c\ub4dc \uc785\ub2c8\ub2e4. \uc774 \ud568\uc218\ub294 \ubc18\ub4dc\uc2dc \ud55c\ubc88\ub9cc \uc2e4\ud589\ub418\uba70, super.initState() \ud568\uc218\ub97c \uc2e4\ud589\ud574\uc57c \ud569\ub2c8\ub2e4. \uc0dd\uc131\ud558\ub294 widget \uac1d\uccb4\uc5d0 \ub300\ud55c \ud2b9\uc815 BuildContext\uc5d0 \uc5f0\uad00\ub41c \ub370\uc774\ud130\ub97c \ucd08\uae30\ud654 \ud569\ub2c8\ub2e4. \uadf8\ub9ac\uace0 tree \uad6c\uc870\uc5d0\uc11c (\uc0dd\uc131\ud558\ub294 widget \uac1d\uccb4\uc758) parent widget\ub4e4\uc5d0 \uc5f0\uad00\ub41c property\ub4e4\ub3c4 \ucd08\uae30\ud654 \ud569\ub2c8\ub2e4. \ub9c8\uc9c0\ub9c9\uc73c\ub85c ChangeNotifiers \uc2a4\ud2b8\ub9bc\uc5d0 \uac00\uc785\ud558\uac70\ub098 \ud639\uc740 \uc0dd\uc131\ud558\ub294 widget\uc758 \ub370\uc774\ud130\ub97c \ubcc0\uacbd\ud560 \uc218 \uc788\ub294 \ub2e4\ub978 \uac1d\uccb4\uc5d0 \uac00\uc785\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
@override\n initState() {\n   super.initState();\n   \/\/ Add listeners to this class\n   cartItemStream.listen((data) {\n     _updateWidget(data);\n   });\n }<\/pre>\n\n\n\n
build()\ub294 widget\uc5d0 \uc758\ud558\uc5ec \ud45c\ud604\ub418\ub294 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4 \ubd80\ubd84\uc744 \ud45c\ud604\ud569\ub2c8\ub2e4. Flutter framework\ub294 \ub2e4\uc74c\uc758 \uac19\uc740 \uc0c1\ud669\uc5d0\uc11c \uc774 \ud568\uc218\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4. 1) initState() \ud568\uc218\ub97c \ud638\ucd9c\ud55c \ub2e4\uc74c, 2) didUpdateWidget() \ud568\uc218\ub97c \ud638\ucd9c\ud55c \ub2e4\uc74c, 3) setState() \ud568\uc218\uc758 \ud638\ucd9c\uc744 \uc694\uccad \ubc1b\uc740 \uacbd\uc6b0, 4) \uc774 State \uac1d\uccb4\uc758 dependency\uac00 \ubcc0\uacbd\ub418\ub294 \uacbd\uc6b0 (\uc989, \uc774\uc804\uc758 build\uc5d0 \uc758\ud574\uc11c \ucc38\uc870\ud558\ub294 InheritedWidget\uc774 \ubcc0\uacbd\ub418\ub294 \uacbd\uc6b0), 5) Deactivate\ub97c \ud638\ucd9c\ud55c \ud6c4, State \uac1d\uccb4\ub97c tree \uad6c\uc870\uc758 \ub2e4\ub978 \uc704\uce58\ub85c \uc7ac \uc0bd\uc785\ud55c \uacbd\uc6b0 \uc785\ub2c8\ub2e4. Flutter framework\ub294 \uc774 widget \ud558\ub2e8\uc758 subtree\ub97c build() \uba54\uc18c\ub4dc\uc758 \ub9ac\ud134 \uac12\uc73c\ub85c \uad50\uccb4\ud558\uac70\ub098, \uae30\uc874 subtree\ub97c \uc5c5\ub370\uc774\ud2b8 \ud558\uac70\ub098, \ud639\uc740 subtree\ub97c \uc0ad\uc81c\ud558\uace0 \uc0c8\ub85c\uc6b4 subtree\ub85c \ub300\uccb4\ud569\ub2c8\ub2e4. \uc774\ub54c build()\uac00 \ub9ac\ud134\ud558\ub294 widget\uc774 \uae30\uc874 subtree\uc758 root\ub97c \uc5c5\ub370\uc774\ud2b8 \ud560\uc9c0 \uc5ec\ubd80\ub97c \uacb0\uc815\ud558\ub294 \uc778\uc790\uac00 \ub418\uba70, \uc774\uc5d0 \ub300\ud55c \uc815\ubcf4\ub294 Widget.canUpdate\ub97c \ud638\ucd9c\ud558\uc5ec \uc54c \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc77c\ubc18\uc801\uc73c\ub85c build()\uc758 implementation\ub4e4\uc740, a) widget\uc758 constructor\uc5d0\uc11c \ubc1b\uc740 \uc815\ubcf4, b) \uc8fc\uc5b4\uc9c4 BuildContext \uadf8\ub9ac\uace0 c) State \uac1d\uccb4\uc758 \ub0b4\ubd80 \uc0c1\ud0dc \uc815\ubcf4\ub97c \uae30\ubc18\uc73c\ub85c \uad6c\uc131\ub41c \u2018widget\ub4e4\uc758 \uc9d1\ud569\uc73c\ub85c \ub9cc\ub4e4\uc5b4\uc9c4 \uac1d\uccb4\u2019\ub97c \ub9ac\ud134 \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
@override\nWidget build(BuildContext context, MyButtonState state) {\n  \u2026 () { print(\"color: $color\"); } \u2026\n}<\/pre>\n\n\n\n
setState()\uc5d0\ub294 State \uac1d\uccb4\uc758 \ub0b4\ubd80 \uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub420 \ub54c \ub9c8\ub2e4, \ubc18\uc601\ud574\uc57c \ud558\ub294 \uc0ac\ud56d\uc744 \uad6c\ud604 \ud569\ub2c8\ub2e4. setState()\ub97c \ud638\ucd9c\ud55c\ub2e4\ub294 \uac83\uc740 Flutter framework\uc5d0\uac8c \uc774 \uac1d\uccb4\uc758 \ub0b4\ubd80 \uc0c1\ud0dc\uac00 \ubc14\ub00c\uc5c8\ub2e4\ub294 \uac83\uc744 \uc54c\ub824\uc8fc\ub294 \uac83\uc73c\ub85c\uc368, \uc774 subtree\uc548\uc758 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\uc5d0 \uc601\ud5a5\uc774 \uc788\uc744 \uc218 \uc788\ub2e4\ub294 \uc758\ubbf8\uc785\ub2c8\ub2e4. \ub530\ub77c\uc11c, Flutter framework\ub294 \ub2e4\uc74c \uc5c5\ub370\uc774\ud2b8 \uc2dc\uc810\uc5d0\uc11c \uc774 State \uac1d\uccb4\uc5d0 \ub300\ud55c build\ub97c \uc218\ud589\ud558\uac8c \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n
setState(() { _myState = newValue });<\/pre>\n\n\n\n
didUpdateWidget()\ub294 widget\uc758 \uad6c\uc131(configuration)\uc774 \ubc14\ub014 \ub54c \ub9c8\ub2e4 \ud638\ucd9c\ub429\ub2c8\ub2e4. \ub9cc\uc57d parent widget\uc774 rebuild\ub97c \uc218\ud589\ud558\uace0 tree \uc5c5\ub370\uc774\ud2b8\ub97c \uc694\uccad\ud574\uc11c, \uc774 \uc704\uce58\uc5d0 \uc788\ub294 (\ub3d9\uc77c runtime type\uacfc Widget.key\ub97c \uac16\ub294) \uc0c8\ub85c\uc6b4 widget\uc744 \ub514\uc2a4\ud50c\ub808\uc774 \ud558\ub3c4\ub85d \uc694\uccad\ud558\uba74, Flutter framework\ub294 State \uac1d\uccb4\uc758 widget property\uac00 \uc0c8\ub85c\uc6b4 widget\uc744 \ucc38\uc870\ud558\ub3c4\ub85d \uc5c5\ub370\uc774\ud2b8 \ud55c \ud6c4, \uae30\uc874\uc758 widget\uc744 argument\ub85c \ud574\uc11c didUpdateWidget() \uba54\uc18c\ub4dc\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4. \ub530\ub77c\uc11c, widget\uc758 \ubcc0\uacbd\uc5d0 \ub300\ud574\uc11c \ubc18\uc751\ud558\uace0 \uc2f6\ub2e4\uba74 \uc774 \uba54\uc18c\ub4dc\ub97c override \ud569\ub2c8\ub2e4. Flutter framework\ub294 didUpdateWidget() \uba54\uc18c\ub4dc\ub97c \ud638\ucd9c\ud55c \ud6c4\uc5d0\ub294 \ud56d\uc0c1 build\ub97c \uc2e4\ud589 \ud569\ub2c8\ub2e4. \ub530\ub77c\uc11c, didUpdateWidget() \uba54\uc18c\ub4dc\uc5d0\uc11c\uc758 setState()\ub294 \ud544\uc694\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
@mustCallSuper\n@protected\nvoid didUpdateWidget(covariant T oldWidget) { }<\/pre>\n\n\n\n
dispose()\ub294 tree\uc5d0\uc11c \uac1d\uccb4\uac00 \uc81c\uac70\ub420 \ub54c \ud638\ucd9c\ub429\ub2c8\ub2e4. Flutter framework\ub294 State \uac1d\uccb4\uac00 \ub2e4\uc2dc\ub294 build \ub418\uc9c0 \uc54a\ub294 \ub2e4\uace0 \ud310\ub2e8\ub418\uba74 \uc774 \uba54\uc18c\ub4dc\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4. \uc774 \uba54\uc18c\ub4dc\ub97c \uc2e4\ud589\ud558\uba74, State \uac1d\uccb4\ub294 unmout\ub418\uace0 mounted Property\ub294 flase \uac12\uc744 \uac00\uc9d1\ub2c8\ub2e4. \uc774\ud6c4\ub85c \uc774 \uac1d\uccb4\uc5d0 \ub300\ud55c setState()\ub294 \uc5d0\ub7ec\ub97c \uc720\ubc1c\ud569\ub2c8\ub2e4. \ud55c\ubc88 dispose\ub41c \uac1d\uccb4\ub294 \ub2e4\uc2dc \uc0ac\uc6a9(mount)\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4. \uc11c\ube0c \ud074\ub798\uc2a4\uc5d0\uc11c\ub294 \uc810\uc720\ud588\ub358 \uc790\uc6d0\uc744 \ud574\uc81c\ud558\uac70\ub098, \ud65c\uc131\ud654\ud55c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc911\ub2e8\ud558\ub294 \ub4f1\uc758 \uc791\uc5c5\uc744 \uc218\ud589\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
@protected\n@mustCallSuper\nvoid dispose() {\n  assert(_debugLifecycleState == _StateLifecycle.ready);\n  assert(() { _debugLifecycleState = _StateLifecycle.defunct; return true; }());\n}<\/pre>\n\n\n\n
Flutter\n\uc0ac\uc774\ud2b8\uc5d0\uc11c \uc81c\uc2dc\ud558\ub294 Stateless\nWidget\uc758 \uc608\uc81c\uac00 \uc544\ub798\uc758 Frog Class\ub85c \uc785\ub2c8\ub2e4. Frog \ud074\ub798\uc2a4\ub294 \ub0b4\ubd80\uc801\uc73c\ub85c\ncolor\uc640 child\n\uba64\ubc84 \ubcc0\uc218\ub97c final \ud0c0\uc785\uc73c\ub85c \uac00\uc9d1\ub2c8\ub2e4. \uadf8\ub9ac\uace0, contructor\ub97c \ud1b5\ud574\uc11c \uc774\ub4e4\uc758 \uac12\uacfc, Widget\uc758 key \uac12\uc744 \ubc1b\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 build \ud568\uc218\ub97c \ud1b5\ud574\uc11c\nContainer \ud615\ud0dc\uc5d0 \uba64\ubc84 \ubcc0\uc218\ub97c \ud45c\ud604\ud558\ub3c4\ub85d \ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\/\/ Reference: https:\/\/api.flutter.dev\/flutter\/widgets\/StatelessWidget-class.html\n class Frog extends StatelessWidget {\n   const Frog({\n     Key key,\n     this.color = const Color(0xFF2DBD3A),\n     this.child,\n   }) : super(key: key);\n final Color color;\n   final Widget child;\n @override\n   Widget build(BuildContext context) {\n     return Container(color: color, child: child);\n   }\n }<\/pre>\n\n\n\n
Flutter\n\uc0ac\uc774\ud2b8\uc5d0\uc11c \uc81c\uc2dc\ud558\ub294 Stateful Widget\uc758 \uc608\uc81c\uac00 \uc544\ub798\uc758 Bird Class \uc785\ub2c8\ub2e4. Stateful Widget\ub3c4 immutable\n\ud558\ubbc0\ub85c final \ud0c0\uc785\uc758 color\uc640 child \uba64\ubc84 \ubcc0\uc218\ub97c\n\uac00\uc9d1\ub2c8\ub2e4. \uadf8\ub9ac\uace0 State\ub97c \ubcf4\uad00\ud558\uae30 \uc704\ud558\uc5ec createState() \uba64\uc18c\ub4dc\ub97c \uac00\uc9d1\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \uc774\n\uba54\uc18c\ub4dc\ub294 State\uc758 \uc11c\ube0c \ud074\ub798\uc2a4\uc778 BirdState \uac1d\uccb4\ub97c \ub9ac\ud134\ud558\uba70, private \ud0c0\uc785\uc774\uae30\uc5d0\n\u201c_\u201d\ub85c \uc774\ub984\uc774 \uc2dc\uc791\ud569\ub2c8\ub2e4. _BirdState \ud074\ub798\uc2a4\ub294 state\n\uc815\ubcf4\ub85c _size\ub97c \uac00\uc9d1\ub2c8\ub2e4. \uc774\ub97c \uc99d\uac00\ud558\ub294\ngrow() \uba54\uc11c\ub4dc\ub97c \uac00\uc9c0\uace0 \uc788\uc73c\uba70, build() \uba54\uc18c\ub4dc\ub97c \ud1b5\ud574\uc11c, Container \ud0c0\uc785\uc73c\ub85c color\uc640 child,\n\uadf8\ub9ac\uace0 size\ub97c \uae30\ubc18\uc73c\ub85c\n\ud558\ub294 \uac12\uc744 \ud45c\ud604\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
\/\/ Reference: https:\/\/api.flutter.dev\/flutter\/widgets\/StatefulWidget-class.html\n\n class Bird extends StatefulWidget {\n   const Bird({\n     Key key,\n     this.color = const Color(0xFFFFE306),\n     this.child,\n   }) : super(key: key);\n final Color color;\n   final Widget child;\n _BirdState createState() => _BirdState();\n }\n\n class _BirdState extends State {\n   double _size = 1.0;\n void grow() {\n     setState(() { _size += 0.1; });\n   }\n @override\n   Widget build(BuildContext context) {\n     return Container(\n       color: widget.color,\n       transform: Matrix4.diagonal3Values(_size, _size, 1.0),\n       child: widget.child,\n     );\n   }\n }<\/pre>\n\n\n\n
Flutter \uacf5\uc2dd \uc0ac\uc774\ud2b8\uc5d0\uc11c\n\ubcf4\ub2e4 \uc790\uc138\ud55c \uc124\uba85\uc744 \uc5bb\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uc55e\uc11c \uc124\uba85\ud55c \ud074\ub798\uc2a4\ub4e4\uacfc \uc8fc\uc694 \uba54\uc18c\ub4dc\uc5d0 \ub300\ud55c \uacf5\uc2dd \uc0ac\uc774\ud2b8 \ub9c1\ud06c\ub4e4\uc774\ub2c8, \ud544\uc694\ud55c \uacbd\uc6b0\n\ucc38\uc870\ud558\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n\n\n\n
  • StatelessWidget Class : https:\/\/api.flutter.dev\/flutter\/widgets\/StatelessWidget-class.html<\/li>
  • StatefulWidget Class : https:\/\/api.flutter.dev\/flutter\/widgets\/StatefulWidget-class.html<\/li>
  • State Class : https:\/\/api.flutter.dev\/flutter\/widgets\/State-class.html<\/li>
  • build method in State Class : https:\/\/api.flutter.dev\/flutter\/widgets\/State\/build.html<\/li>
  • Comments for Android : https:\/\/flutter.dev\/docs\/get-started\/flutter-for\/android-devs<\/li>
  • Comments for iOS : https:\/\/flutter.dev\/docs\/get-started\/flutter-for\/ios-devs<\/li><\/ul>\n\n\n\n
    Sample Programs <\/h4>\n\n\n\n
    \uc55e\uc11c \uc124\uba85\ud55c \ub0b4\uc6a9\uc758 \uc774\ud574\ub97c \ud1a0\ub300\ub85c Flutter \uc0ac\uc774\ud2b8\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 \uba87\uac1c\uc758 sample \ud504\ub85c\uadf8\ub7a8\uc744 \uc774\ud574\ud558\ub294 \uacfc\uc815\uc744 \uac70\ucce4\uc73c\uba74 \ud569\ub2c8\ub2e4. \ubcf8\uc778\uc774 \ubb34\uc5b8\uac00\ub97c \ub9cc\ub4e4\uae30 \uc804, \ub2e4\ub978 \uc774\uac00 \ub9cc\ub4e0 \uc608\uc81c\ub97c \uc77d\uc5b4\uc11c \ubaa8\ubc29\ud558\ub294 \uac83\uc740 \ub9e4\uc6b0 \uc911\uc694\ud55c \uacfc\uc815\uc774\ub2c8, \uc55e\uc11c\uc758 \ub0b4\uc6a9\uc5d0 \ub300\ud55c \uc774\ub798\ub97c \ud1a0\ub300\ub85c \ub2e4\uc74c\uc758 Flutter \uc608\uc81c\ub4e4\uc744 \ud558\ub098 \ud558\ub098 \uc77d\uc5b4\ubcf4\uace0, \uc9c1\uc811 \uc2e4\ud589\ud574\uc11c \uc774\ub798\uac00 \ub9de\ub294\uc9c0 \ud655\uc778\ud574 \ubcf4\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n\n\n\n
    Sample Program 1 – Code & Screen Shot<\/h4>\n\n\n\n
    \/\/ darttutorial-32-02.dart : Flutter HelloWorld using own widgets \n\/\/ Reference:https:\/\/flutter.dev\/docs\/development\/ui\/widgets-intro#basic-widgets\n import 'package:flutter\/material.dart';\n void main() => runApp(MyApp());\n class MyAppBar extends StatelessWidget {\n   MyAppBar({this.title});\n final Widget title;\n @override\n   Widget build(BuildContext context) {\n     return Container(\n       height: 56.0, \n       padding: const EdgeInsets.symmetric(horizontal: 8.0),\n       decoration: BoxDecoration(color: Colors.blue[500]),\n       child: Row(\n         children: [\n           IconButton(\n             icon: Icon(Icons.menu),\n             tooltip: 'Navigation menu',\n             onPressed: null, \n           ),\n           Expanded(\n             child: title,\n           ),\n           IconButton(\n             icon: Icon(Icons.search),\n             tooltip: 'Search',\n             onPressed: null,\n           ),\n         ],\n       ),\n     );\n   }\n }\n class MyScaffold extends StatelessWidget {\n   @override\n   Widget build(BuildContext context) {\n     return Material(\n       child: Column(\n         children: [\n           MyAppBar(\n             title: Text(\n               'Example title',\n               style: Theme.of(context).primaryTextTheme.title,\n             ),\n           ),\n           Expanded(\n             child: Center(\n               child: Text('Hello, world!'),\n             ),\n           ),\n         ],\n       ),\n     );\n   }\n }\n class MyApp extends StatelessWidget {\n   @override\n   Widget build(BuildContext context) {\n     return MaterialApp(\n       title: 'My app',\n       home: MyScaffold(),\n     );\n   }\n }<\/pre>\n\n\n\n
    \"\"
    [\uadf8\ub9bc] darttutorial-32-02.dart \uc2e4\ud589 \ud654\uba74<\/figcaption><\/figure><\/div>\n\n\n\n
    Sample Program 2 – Code & Screen Shot<\/h4>\n\n\n\n
    \/\/ darttutorial-32-03.dart : Flutter HelloWorld using baseline widgets \n\/\/ Reference: https:\/\/flutter.dev\/docs\/development\/ui\/widgets-intro#using-material-components\n import 'package:flutter\/material.dart';\n void main() => runApp(MyApp());\n class MyApp extends StatelessWidget {\n   @override \n   Widget build(BuildContext context) {\n     return MaterialApp(\n       title: 'darttutorial-32-03.dart',\n       home: MobileAppHome(),\n     );\n   }\n }\n class MobileAppHome extends StatelessWidget {\n   @override\n   Widget build(BuildContext context) {\n     \/\/ Scaffold is a layout for the major Material Components.\n     return Scaffold(\n       appBar: AppBar(\n         leading: IconButton(\n           icon: Icon(Icons.menu),\n           tooltip: 'Navigation menu',\n           onPressed: null,\n         ),\n         title: Text('Example title'),\n         actions: [\n           IconButton(\n             icon: Icon(Icons.search),\n             tooltip: 'Search',\n             onPressed: null,\n           ),\n         ],\n       ),\n       \/\/ body is the majority of the screen.\n       body: Center(\n         child: Text('Hello, world!'),\n       ),\n       floatingActionButton: FloatingActionButton(\n         tooltip: 'Add', \/\/ used by assistive technologies\n         child: Icon(Icons.add),\n         onPressed: null,\n       ),\n     );\n   }\n }<\/pre>\n\n\n\n
    \"\"
    [\uadf8\ub9bc] darttutorial-32-03.dart \uc2e4\ud589 \ud654\uba74<\/figcaption><\/figure><\/div>\n\n\n\n
    Sample Program 3 – Code & Screen Shot<\/h4>\n\n\n\n
    \/\/ darttutorial-32-04.dart : Product order program\n\/\/ Reference: https:\/\/flutter.dev\/docs\/development\/ui\/widgets-intro#bringing-it-all-together\n\nimport 'package:flutter\/material.dart';\n\nvoid main() => runApp(MyApp());\n\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'Shopping App',\n      home: ShoppingList(\n        products: <Product>[\n          Product(name: 'Eggs'),\n          Product(name: 'Flour'),\n          Product(name: 'Chocolate chips'),\n        ],\n      ),\n    );\n  }\n}\n\nclass Product {\n  const Product({this.name});\n  final String name;\n}\n\ntypedef void CartChangedCallback(Product product, bool inCart);\n\nclass ShoppingListItem extends StatelessWidget {\n  ShoppingListItem({this.product, this.inCart, this.onCartChanged})\n      : super(key: ObjectKey(product));\n\n  final Product product;\n  final bool inCart;\n  final CartChangedCallback onCartChanged;\n\n  Color _getColor(BuildContext context) {\n    return inCart ? Colors.black54 : Theme.of(context).primaryColor;\n  }\n\n  TextStyle _getTextStyle(BuildContext context) {\n    if (!inCart) return null;\n\n    return TextStyle(\n      color: Colors.black54,\n      decoration: TextDecoration.lineThrough,\n    );\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return ListTile(\n      onTap: () {\n        onCartChanged(product, inCart);\n      },\n      leading: CircleAvatar(\n        backgroundColor: _getColor(context),\n        child: Text(product.name[0]),\n      ),\n      title: Text(product.name, style: _getTextStyle(context)),\n    );\n  }\n}\n\nclass ShoppingList extends StatefulWidget {\n  ShoppingList({Key key, this.products}) : super(key: key);\n\n  final List<Product> products;\n\n  @override\n  _ShoppingListState createState() => _ShoppingListState();\n}\n\nclass _ShoppingListState extends State<ShoppingList> {\n  Set<Product> _shoppingCart = Set<Product>();\n\n  void _handleCartChanged(Product product, bool inCart) {\n    setState(() {\n      if (!inCart)\n        _shoppingCart.add(product);\n      else\n        _shoppingCart.remove(product);\n    });\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text('Shopping List'),\n      ),\n      body: ListView(\n        padding: EdgeInsets.symmetric(vertical: 8.0),\n        children: widget.products.map((Product product) {\n          return ShoppingListItem(\n            product: product,\n            inCart: _shoppingCart.contains(product),\n            onCartChanged: _handleCartChanged,\n          );\n        }).toList(),\n      ),\n    );\n  }\n}\n\n<\/pre>\n\n\n\n
    \"\"
    [\uadf8\ub9bc] darttutorial-32-04.dart \uc2e4\ud589 \ud654\uba74<\/figcaption><\/figure><\/div>\n\n\n\n
    \ub9c8\ubb34\ub9ac<\/h4>\n\n\n\n
    \ub2e4\uc18c \ubcf5\uc7a1\ud55c \ub0b4\uc6a9\uc5d0 \ub300\ud574\uc11c \ubc30\uc6e0\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc774 \uae00\uc5d0\uc11c \ub2e4\ub8ec \ub0b4\uc6a9\uc740 Flutter\uc758 GUI\uac00 \ub3d9\uc791\ud558\ub294 \ubd80\ubd84\uc5d0\uc11c \uc8fc\uc694\ud55c \uc0ac\ud56d\uc774\ub2c8 \ub2f9\uc7a5\uc740 \uc774\ud574\uac00 \uc548\uac00\ub354\ub77c\ub3c4 \ud2c8\ud2c8\ud788 \uc77d\uc5b4\uc11c \uc774\ud574\ub97c \ub113\ud600\uac14\uc73c\uba74 \uc88b\uaca0\uc2b5\ub2c8\ub2e4. \uc544\uc6b8\ub7ec \ud754\ud788 Flutter\ub97c \uc124\uba85\ud560 \ub54c, “Widget is Everything”\uc774\ub77c\uace0 \ud558\ub294\ub370, \ub2e4\uc591\ud55c Widger\uc744 \ubcf4\uace0 \uacbd\ud5d8\ud558\uc5ec \uc751\uc6a9\ud55c\ub2e4\uba74, \ub9ce\uc740 \uacf5\uc744 \ub4e4\uc774\uc9c0 \uc54a\ub354\ub77c\ub3c4 \uc81c\ubc95 \ubaa8\uc591\uc744 \uac16\ucd98 \ud504\ub85c\uadf8\ub7a8\uc758 \uac1c\ubc1c\uc774 \uac00\ub2a5\ud560 \uac83 \uc785\ub2c8\ub2e4.<\/p>\n\n\n\n
    \"\"<\/figure><\/div>\n\n\n\n
    Creative Commons License (CC BY-NC-ND)<\/p>\n","protected":false},"excerpt":{"rendered":"
    < Flutter \ud65c\uc6a9\ud558\uae30 – Understanding Widgets > \uc774\uc81c Flutter\uc5d0\uc11c \uc0c8\ub86d\uac8c \ud504\ub85c\uc81d\ud2b8\ub97c \ub9cc\ub4dc\ub294 \uacbd\uc6b0\uc5d0 \uc790\ub3d9\uc73c\ub85c \ub9cc\ub4e4\uc5b4\uc9c0\ub294 Start App\uc5d0 \ub300\ud574\uc11c \uc54c\uc544\ubcf4\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4. Flutter Start App\uc758 \uc774\ud574 \uc544\ub798\uc758 darttutorial-32-01.dart \ud504\ub85c\uadf8\ub7a8\uc774 Start App \ud504\ub85c\uadf8\ub7a8\uc5d0\uc11c …<\/p>\n","protected":false},"author":1,"featured_media":986,"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\/869"}],"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=869"}],"version-history":[{"count":14,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/posts\/869\/revisions"}],"predecessor-version":[{"id":987,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/posts\/869\/revisions\/987"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/media\/986"}],"wp:attachment":[{"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/media?parent=869"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/categories?post=869"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/tags?post=869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}