\ud50c\ub7ec\ud130\ub294 \ud604\ub300\uc801\uc778 UI \ud504\ub808\uc784\uc6cc\ud06c\ub85c\uc11c, \uba4b\uc9c4 \uc571\uc744 \uac1c\ubc1c\ud558\ub294 \ub370 \ud544\uc694\ud55c \ub2e4\uc591\ud55c \ub3c4\uad6c\uc640 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774\ubc88 \uac15\uc88c\uc5d0\uc11c\ub294 \ud50c\ub7ec\ud130\ub85c \uc571 \ud398\uc774\uc9c0\uc758 \uae30\ubcf8 \uad6c\uc870\ub97c \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4. \uac15\uc88c\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \ub2e8\uacc4\ub85c \uc9c4\ud589\ub429\ub2c8\ub2e4:<\/p>\n
\ud50c\ub7ec\ud130\ub97c \uc124\uce58\ud558\uae30 \uc804\uc5d0, \uba3c\uc800 \uac1c\ubc1c \ud658\uacbd\uc744 \ub9c8\ub828\ud574\uc57c \ud569\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \ud50c\ub7ec\ud130\ub97c \uc124\uce58\ud558\uae30 \uc704\ud55c \uae30\ubcf8 \ub2e8\uacc4\uc785\ub2c8\ub2e4:<\/p>\n
\ud50c\ub7ec\ud130 SDK\uac00 \uc124\uce58\ub418\uc5c8\ub2e4\uba74, \ub2e4\uc74c\uc73c\ub85c \uc0c8\ub85c\uc6b4 \ud50c\ub7ec\ud130 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \ud130\ubbf8\ub110\uc5d0\uc11c \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud574 \ubcf4\uc138\uc694:<\/p>\n
flutter create my_app<\/code><\/pre>\n\uc774 \uba85\ub839\uc5b4\ub294 ‘my_app’\uc774\ub77c\ub294 \uc774\ub984\uc758 \uc0c8\ub85c\uc6b4 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \ud504\ub85c\uc81d\ud2b8 \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud558\uc5ec:<\/p>\n
cd my_app<\/code><\/pre>\n\uc774\uc81c \ud504\ub85c\uc81d\ud2b8\ub97c \uc5f4\uc5b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. IDE\uc5d0\uc11c lib\/main.dart<\/strong> \ud30c\uc77c\uc744 \ucc3e\uc544 \uc5f4\uc5b4\uc8fc\uc138\uc694. \uae30\ubcf8\uc801\uc73c\ub85c \uc0dd\uc131\ub41c \ucf54\ub4dc\ub97c \ubcf4\uac8c \ub420 \ud150\ub370, \uc774\uac83\uc774 \uc6b0\ub9ac\uc758 \uae30\ubcf8 \uc571 \uad6c\uc870\uc785\ub2c8\ub2e4.<\/p>\n3. \uae30\ubcf8\uc801\uc778 \ud398\uc774\uc9c0 \uad6c\uc870 \uc124\uacc4<\/h3>\n
\uc774\uc81c \uae30\ubcf8\uc801\uc778 \uc571 \ud398\uc774\uc9c0 \uad6c\uc870\ub97c \uc124\uacc4\ud558\uaca0\uc2b5\ub2c8\ub2e4. \uc6b0\ub9ac\uc758 \ubaa9\ud45c\ub294 \uac04\ub2e8\ud55c UI\ub97c \uac00\uc9c0\uace0 \uae30\ubcf8 \ub808\uc774\uc544\uc6c3\uc744 \uc124\uc815\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574 StatelessWidget<\/strong> \ud074\ub798\uc2a4\ub97c \uc0ac\uc6a9\ud558\uc5ec \uae30\ubcf8 \ud398\uc774\uc9c0\ub97c \uad6c\uc131\ud560 \uac83\uc785\ub2c8\ub2e4.<\/p>\nimport '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 \uae30\ubcf8 \uad6c\uc870',\n theme: ThemeData(\n primarySwatch: Colors.blue,\n ),\n home: HomePage(),\n );\n }\n }\n\n class HomePage extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n title: Text('\ud648'),\n ),\n body: Center(\n child: Text(\n '\ud658\uc601\ud569\ub2c8\ub2e4!',\n style: TextStyle(fontSize: 24),\n ),\n ),\n );\n }\n }<\/code><\/pre>\n\uc704 \ucf54\ub4dc\ub294 \uac04\ub2e8\ud55c \ud50c\ub7ec\ud130 \uc571\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4. \uc5ec\uae30\uc11c \uc8fc\uc694 \uad6c\uc131 \uc694\uc18c\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n
\n- MaterialApp<\/strong>: \uc571\uc758 \ub8e8\ud2b8 \uc704\uc82f\uc73c\ub85c\uc11c, \uae30\ubcf8\uc801\uc778 \uc571 \uad6c\uc131\uc744 \ub2f4\ub2f9\ud569\ub2c8\ub2e4.<\/li>\n
- Scaffold<\/strong>: \uc571\uc758 \uae30\ubcf8 \uad6c\uc870\ub97c \uad6c\uc131\ud558\ub294 \uc18d\uc131(\uc571\ubc14, \ubcf8\ubb38, \ud50c\ub85c\ud305 \uc561\uc158 \ubc84\ud2bc \ub4f1)\uc744 \uc81c\uacf5\ud558\ub294 \uc704\uc82f\uc785\ub2c8\ub2e4.<\/li>\n
- Text<\/strong>: \ud654\uba74\uc5d0 \ubb38\uc790\uc5f4\uc744 \ud45c\uc2dc\ud558\ub294 \uc704\uc82f\uc785\ub2c8\ub2e4.<\/li>\n<\/ul>\n
4. \uc0c1\ud0dc \uad00\ub9ac \uae30\ucd08 \uc774\ud574<\/h3>\n
\uc571\uc758 \uc0c1\ud0dc \uad00\ub9ac\ub780 \uc0ac\uc6a9\uc790 \uc778\ud130\ub799\uc158\uc774\ub098 \ub124\ud2b8\uc6cc\ud06c \uc694\uccad \ub4f1\uc73c\ub85c \uc778\ud574 \ubcc0\ud560 \uc218 \uc788\ub294 \ub370\uc774\ud130\ub97c \uad00\ub9ac\ud558\ub294 \ud504\ub85c\uc138\uc2a4\uc785\ub2c8\ub2e4. \ud50c\ub7ec\ud130\ub294 \uc0c1\ud0dc \uad00\ub9ac\uc5d0 \ub300\ud55c \ub2e4\uc591\ud55c \uc811\uadfc \ubc29\uc2dd\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uac00\uc7a5 \uae30\ubcf8\uc801\uc778 \ubc29\ubc95\uc740 StatefulWidget\uc744 \uc774\uc6a9\ud558\ub294 \uac83\uc785\ub2c8\ub2e4.<\/p>\n
class HomePage extends StatefulWidget {\n @override\n _HomePageState createState() => _HomePageState();\n }\n\n class _HomePageState extends State {\n int _counter = 0;\n\n void _incrementCounter() {\n setState(() {\n _counter++;\n });\n }\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n title: Text('\ud648'),\n ),\n body: Center(\n child: Column(\n mainAxisAlignment: MainAxisAlignment.center,\n children: [\n Text(\n '\ubc84\ud2bc\uc774 \ub20c\ub9b0 \ud69f\uc218:',\n ),\n Text(\n '$_counter',\n style: Theme.of(context).textTheme.headline4,\n ),\n ],\n ),\n ),\n floatingActionButton: FloatingActionButton(\n onPressed: _incrementCounter,\n tooltip: 'Increment',\n child: Icon(Icons.add),\n ),\n );\n }\n }<\/widget><\/homepage><\/code><\/pre>\n\uc704\uc758 \ucf54\ub4dc\ub294 \ubc84\ud2bc\uc744 \ub20c\ub800\uc744 \ub54c \uce74\uc6b4\ud130\uac00 \uc99d\uac00\ud558\ub294 \uae30\ubcf8\uc801\uc778 \uc0c1\ud0dc \uad00\ub9ac \uc608\uc2dc\uc785\ub2c8\ub2e4. \uc5ec\uae30\uc11c\ub294 setState<\/strong> \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0c1\ud0dc\ub97c \uc5c5\ub370\uc774\ud2b8\ud569\ub2c8\ub2e4.<\/p>\n5. \uac04\ub2e8\ud55c UI \ucef4\ud3ec\ub10c\ud2b8 \ucd94\uac00<\/h3>\n
\uc774\uc81c \uba87 \uac00\uc9c0 UI \ucef4\ud3ec\ub10c\ud2b8\ub97c \ucd94\uac00\ud558\uc5ec \uc571\uc744 \ub354 \ud48d\uc131\ud558\uac8c \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4 \ubc84\ud2bc, \uc774\ubbf8\uc9c0, \ub9ac\uc2a4\ud2b8 \ub4f1\uc744 \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc544\ub798\ub294 \ucd94\uac00\uc801\uc778 UI \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud3ec\ud568\ud55c \uc608\uc2dc \ucf54\ub4dc\uc785\ub2c8\ub2e4:<\/p>\n
class HomePage extends StatefulWidget {\n @override\n _HomePageState createState() => _HomePageState();\n }\n\n class _HomePageState extends State {\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n title: Text('\ud648'),\n ),\n body: Center(\n child: Column(\n mainAxisAlignment: MainAxisAlignment.center,\n children: [\n Image.network(\n 'https:\/\/example.com\/image.png',\n height: 100,\n width: 100,\n ),\n SizedBox(height: 20),\n ElevatedButton(\n onPressed: () {\n \/\/ \ubc84\ud2bc \ud074\ub9ad \uc2dc \uc2e4\ud589\ub420 \ucf54\ub4dc\n },\n child: Text('\ubc84\ud2bc \ud074\ub9ad\ud558\uae30'),\n ),\n ],\n ),\n ),\n );\n }\n }<\/widget><\/homepage><\/code><\/pre>\n\uc774 \ucf54\ub4dc\uc5d0\uc11c Image.network<\/strong> \uc704\uc82f\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc774\ubbf8\uc9c0\ub97c \uac00\uc838\uc624\uace0, ElevatedButton<\/strong>\uc744 \uc0ac\uc6a9\ud558\uc5ec \ubc84\ud2bc\uc744 \ucd94\uac00\ud588\uc2b5\ub2c8\ub2e4. \uac01 UI \uc694\uc18c\ub4e4\uc758 \ub514\uc790\uc778\uacfc \ubc30\uce58\ub294 \ud50c\ub7ec\ud130\uc758 Column<\/strong> \ub808\uc774\uc544\uc6c3 \uc704\uc82f\uc744 \ud1b5\ud574 \uad00\ub9ac\ub429\ub2c8\ub2e4.<\/p>\n\uacb0\ub860<\/h3>\n
\uc774\ubc88 \uac15\uc88c\ub97c \ud1b5\ud574 \ud50c\ub7ec\ud130\ub85c \uae30\ubcf8 \uc571 \ud398\uc774\uc9c0 \uad6c\uc870\ub97c \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc744 \ubc30\uc6e0\uc2b5\ub2c8\ub2e4. \ud50c\ub7ec\ud130\ub294 \uac15\ub825\ud55c UI \ub3c4\uad6c\ub97c \uc81c\uacf5\ud558\uba70, \uc774\ub97c \ud1b5\ud574 \ub2e4\uc591\ud55c \uc571\uc744 \uc2e0\uc18d\ud558\uac8c \uac1c\ubc1c\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uacc4\uc18d\ud574\uc11c \ub354 \ubcf5\uc7a1\ud55c \ub808\uc774\uc544\uc6c3\uacfc \uc0c1\ud0dc \uad00\ub9ac\ub97c \ubc30\uc6b0\uba74\uc11c \uc5ec\ub7ec\ubd84\uc758 \ud50c\ub7ec\ud130 \uac1c\ubc1c \uc2e4\ub825\uc744 \ud5a5\uc0c1\uc2dc\ud0a4\uae38 \ubc14\ub78d\ub2c8\ub2e4. \ub2e4\uc74c \uac15\uc88c\uc5d0\uc11c\ub294 \ub124\ube44\uac8c\uc774\uc158\uacfc \ub77c\uc6b0\ud305\uc5d0 \ub300\ud574 \ub2e4\ub8e8\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\ucd94\uac00 \uc790\ub8cc<\/h3>\n