\ud50c\ub7ec\ud130(Flutter)\ub294 \uad6c\uae00\uc5d0\uc11c \uac1c\ubc1c\ud55c \uc624\ud508 \uc18c\uc2a4 UI \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uac1c\ubc1c \ud0a4\ud2b8(SDK)\ub85c, \ubaa8\ubc14\uc77c, \uc6f9, \ub370\uc2a4\ud06c\ud1b1 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ube60\ub974\uac8c \uad6c\ucd95\ud560 \uc218 \uc788\uac8c \ud574\uc90d\ub2c8\ub2e4. \ud50c\ub7ec\ud130\uc758 \ub9e4\ub825 \uc911 \ud558\ub098\ub294 \ud558\ub098\uc758 \ucf54\ub4dc\ubca0\uc774\uc2a4\ub85c \uc5ec\ub7ec \ud50c\ub7ab\ud3fc\uc5d0\uc11c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud560 \uc218 \uc788\ub2e4\ub294 \uc810\uc785\ub2c8\ub2e4. \uc774\ubc88 \uac15\uc88c\uc5d0\uc11c\ub294 \ud50c\ub7ec\ud130 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc911\uc2ec\uc774 \ub418\ub294 \n \uae30\ubcf8\uc801\uc778 \uc704\uc758 \uc608\uc81c \ucf54\ub4dc\ub97c \ubd84\uc11d\ud558\uc5ec \uac01 \ubd80\ubd84\uc758 \uc5ed\ud560\uc744 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n \ud50c\ub7ec\ud130\uc758 \uae30\ub2a5\uc744 \uc0ac\uc6a9\ud558\uae30 \uc704\ud574 \ud544\uc694\ud55c \ud328\ud0a4\uc9c0\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4. \ud50c\ub7ec\ud130 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc9c4\uc785\uc810\uc778 \uae30\ubcf8 \ucf54\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec \uac04\ub2e8\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4 \uc218 \uc788\uc9c0\ub9cc, \ub354 \ub9ce\uc740 \uae30\ub2a5\uc744 \ucd94\uac00\ud558\uc5ec \uac1c\uc120\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc544\ub798\ub294 \uae30\ubcf8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 \ubc84\ud2bc\uc744 \ucd94\uac00\ud558\uace0 \ud074\ub9ad\ud588\uc744 \ub54c \ud14d\uc2a4\ud2b8\uac00 \ubcc0\uacbd\ub418\ub294 \uae30\ub2a5\uc744 \ucd94\uac00\ud55c \uc608\uc81c\uc785\ub2c8\ub2e4.<\/p>\n \uc704 \uc608\uc81c\uc5d0\uc11c\ub294 \uc0c1\ud0dc\uac00 \ubcc0\ud560 \uc218 \uc788\uc73c\ubbc0\ub85c \ubc84\ud2bc \ud074\ub9ad \uc2dc \ud50c\ub7ec\ud130\uc758 UI\ub294 \uc704\uc82f(Widgets)\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4. \ubaa8\ub4e0 UI \uc694\uc18c\ub294 \uc704\uc82f\uc73c\ub85c \ud45c\ud604\ub418\uba70, \uc704\uc82f\uc740 \uc11c\ub85c \uacb0\ud569\ud558\uc5ec \ubcf5\uc7a1\ud55c UI\ub97c \uad6c\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc704\uc82f\uc740 \ud06c\uac8c \ub450 \uac00\uc9c0\ub85c \ub098\ub20c \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n \ud50c\ub7ec\ud130 \ud504\ub85c\uc81d\ud2b8\ub294 \uc5ec\ub7ec \ub514\ub809\ud1a0\ub9ac\uc640 \ud30c\uc77c\ub85c \uad6c\uc131\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uae30\ubcf8\uc801\uc73c\ub85c \uc0dd\uc131\ub418\ub294 \ud30c\uc77c \uad6c\uc870\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\nmain.dart<\/code> \ud30c\uc77c\uc758 \uae30\ubcf8 \ucf54\ub4dc \uad6c\uc131\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n1. main.dart \ud30c\uc77c\uc758 \uc5ed\ud560<\/h2>\n
main.dart<\/code> \ud30c\uc77c\uc740 \ud50c\ub7ec\ud130 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc9c4\uc785\uc810(entry point)\uc785\ub2c8\ub2e4. \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \uc2e4\ud589\ub418\uba74 \uac00\uc7a5 \uba3c\uc800 \uc2e4\ud589\ub418\ub294 \ud30c\uc77c\ub85c, \uc774 \ud30c\uc77c \ub0b4\uc5d0\uc11c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc8fc\uc694 \uad6c\uc870\uc640 UI\ub97c \uc815\uc758\ud569\ub2c8\ub2e4.
\n
\n\uc8fc\uc694 \uc5ed\ud560:<\/strong><\/p>\n\n
1.1 \uae30\ubcf8 \uad6c\uc870<\/h3>\n
main.dart<\/code> \ud30c\uc77c\uc740 \ub2e4\uc74c\uacfc \uac19\uc740 \uad6c\uc870\ub85c \uc2dc\uc791\ud569\ub2c8\ub2e4:<\/p>\n\n
\n import 'package:flutter\/material.dart';\n\n void main() {\n runApp(MyApp());\n }\n\n class MyApp extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n title: '\ud50c\ub7ec\ud130 \uac15\uc88c',\n home: Scaffold(\n appBar: AppBar(\n title: Text('\uba54\uc778 \ud398\uc774\uc9c0'),\n ),\n body: Center(\n child: Text('\uc548\ub155\ud558\uc138\uc694, \ud50c\ub7ec\ud130!'),\n ),\n ),\n );\n }\n }\n <\/code>\n <\/pre>\n2. \ucf54\ub4dc \uad6c\uc131 \uc694\uc18c<\/h2>\n
2.1 \ud544\uc694\ud55c \ud328\ud0a4\uc9c0 \uc784\ud3ec\ud2b8<\/h3>\n
flutter\/material.dart<\/code> \ud328\ud0a4\uc9c0\ub294 Material Design UI \uad6c\uc131 \uc694\uc18c\ub97c \uc81c\uacf5\ud558\uba70, \uc774\ub97c \ud1b5\ud574 \uac04\ud3b8\ud558\uac8c \ub77c\uc6b0\ud305 \ubc0f \uc0c1\ud0dc \uad00\ub9ac\ub97c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n2.2 main() \ud568\uc218<\/h3>\n
main()<\/code> \ud568\uc218\ub294 runApp()<\/code> \ud568\uc218\ub97c \ud1b5\ud574 \ub8e8\ud2b8 \uc704\uc82f\uc744 \uc2e4\ud589\ud569\ub2c8\ub2e4. \uc5ec\uae30\uc11c\ub294 MyApp<\/code> \ud074\ub798\uc2a4\ub97c \uc778\uc2a4\ud134\uc2a4\ud654\ud558\uc5ec \uc2e4\ud589\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n2.3 StatelessWidget<\/h3>\n
MyApp<\/code> \ud074\ub798\uc2a4\ub294 StatelessWidget<\/code>\uc744 \uc0c1\uc18d\ubc1b\uc2b5\ub2c8\ub2e4. \uc774\ub294 \uc0c1\ud0dc\uac00 \uc5c6\ub294 \uc704\uc82f\uc744 \uc758\ubbf8\ud558\uba70, UI\ub97c \uadf8\ub9b4 \ub54c \uc0ac\uc6a9\ub418\ub294 \ub370\uc774\ud130\uac00 \ubcc0\ud558\uc9c0 \uc54a\ub294 \uacbd\uc6b0\uc5d0 \uc801\ud569\ud569\ub2c8\ub2e4.<\/p>\n2.4 build() \uba54\uc11c\ub4dc<\/h3>\n
build()<\/code> \uba54\uc11c\ub4dc\ub294 \uc704\uc82f\uc758 UI\ub97c \uc0dd\uc131\ud558\ub294 \uc5ed\ud560\uc744 \ud558\uba70, BuildContext<\/code>\ub97c \ub9e4\uac1c\ubcc0\uc218\ub85c \ubc1b\uc2b5\ub2c8\ub2e4. build()<\/code> \uba54\uc11c\ub4dc \ub0b4\uc5d0\uc11c MaterialApp<\/code>\uacfc Scaffold<\/code>\uc640 \uac19\uc740 \uc704\uc82f\ub4e4\uc744 \uc815\uc758\ud569\ub2c8\ub2e4. Scaffold<\/code>\ub294 \uae30\ubcf8\uc801\uc778 \uc571 \ub808\uc774\uc544\uc6c3\uc744 \uc81c\uacf5\ud558\ub294 \uc704\uc82f\uc785\ub2c8\ub2e4.<\/p>\n3. \uc608\uc81c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uac1c\uc120<\/h2>\n
\n
\n import 'package:flutter\/material.dart';\n\n void main() {\n runApp(MyApp());\n }\n\n class MyApp extends StatefulWidget {\n @override\n _MyAppState createState() => _MyAppState();\n }\n\n class _MyAppState extends State3.1 StatefulWidget \ucd94\uac00<\/h3>\n
StatelessWidget<\/code> \ub300\uc2e0 StatefulWidget<\/code>\uc744 \uc0ac\uc6a9\ud588\uc2b5\ub2c8\ub2e4. StatefulWidget<\/code>\uc740 \ub0b4\ubd80 \uc0c1\ud0dc\ub97c \uac00\uc9c0\uace0 \uc788\uc73c\uba70, UI\uac00 \ubcc0\uacbd\ub420 \uc218 \uc788\ub294 \uacbd\uc6b0\uc5d0 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n3.2 setState() \uba54\uc11c\ub4dc<\/h3>\n
_changeMessage()<\/code> \uba54\uc11c\ub4dc\ub97c \ud638\ucd9c\ud558\uc5ec \uc0c1\ud0dc\ub97c \uc5c5\ub370\uc774\ud2b8\ud558\uace0, setState()<\/code>\ub97c \uc0ac\uc6a9\ud558\uc5ec UI\ub97c \ub2e4\uc2dc \uadf8\ub9bd\ub2c8\ub2e4. \uc774\ub807\uac8c \ud558\uba74 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \ub3d9\uc801\uc73c\ub85c \ubc18\uc751\ud558\ub294 UI\ub97c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n4. \ud50c\ub7ec\ud130\uc758 \uc704\uc82f \uad6c\uc870<\/h2>\n
\n
5. \ud50c\ub7ec\ud130 \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870<\/h2>\n
\n
lib\/<\/code> – \uacf5\ud1b5\uc801\uc73c\ub85c \uc0ac\uc6a9\ub418\ub294 Dart \ud30c\uc77c\uc744 \ud3ec\ud568<\/li>\npubspec.yaml<\/code> – \uc758\uc874\uc131 \ubc0f \uc790\uc6d0 \uad00\ub9ac \ud30c\uc77c<\/li>\nandroid\/<\/code> – \uc548\ub4dc\ub85c\uc774\ub4dc \uad00\ub828 \uc124\uc815\uacfc \ucf54\ub4dc<\/li>\nios\/<\/code> – iOS \uad00\ub828 \uc124\uc815\uacfc \ucf54\ub4dc<\/li>\n<\/ul>\n6. \uacb0\ub860<\/h2>\n