{"id":1086,"date":"2020-10-14T09:00:00","date_gmt":"2020-10-14T00:00:00","guid":{"rendered":"http:\/\/mobilelab.khu.ac.kr\/?p=1086"},"modified":"2020-10-14T14:18:05","modified_gmt":"2020-10-14T05:18:05","slug":"dart-programmer-41","status":"publish","type":"post","link":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/2020\/10\/14\/dart-programmer-41\/","title":{"rendered":"Dart Programmer \ub418\uae30 [41]"},"content":{"rendered":"\n

< Web \uac1c\ubc1c \u2013 Flutter for Web : Login UI Example ><\/h4>\n\n\n\n

\uc9c0\uae08\uae4c\uc9c0 Flutter for Web\ub97c \uac1c\ubc1c\ud558\uae30 \uc704\ud558\uc5ec, \uae30\uc220\uc758 \uc5f0\ud601\uacfc \ub3c4\uad6c \uc124\uce58, \uadf8\ub9ac\uace0 \uac04\ub2e8\ud55c \uc608\uc81c \ud504\ub85c\uadf8\ub7a8\uc744 \uc2e4\ud589\ud558\uace0 \uc774\ud574\ud558\uc5ec \ubcf4\uc558\uc2b5\ub2c8\ub2e4. \uc55e\uc11c dart2js \ub4f1\uc5d0\uc11c \ubcf8 \uac83\ucc98\ub7fc, Flutter for\nWeb\uc740 HTML\/CSS\/JavaScript\uc640 \uac19\uc740 \ud45c\uc900 \uc6f9 \uae30\uc220\uc744 \uc0ac\uc6a9\ud558\uc5ec Web \ucf58\ud150\uce20\ub97c \uac1c\ubc1c\ud558\ub3c4\ub85d \uc9c0\uc6d0 \ud568\uc73c\ub85c\uc368, Dart\ub85c \ub9cc\ub4e0 \ud504\ub85c\uadf8\ub7a8\uc774 \uc5b4\ub5a0\ud55c Web \ube0c\ub77c\uc6b0\uc800 \uc0c1\uc5d0\uc11c\ub3c4 \ub3d9\uc791\ud558\ub3c4\ub85d \ud569\ub2c8\ub2e4. <\/p>\n\n\n\n

Flutter for\nWeb\uc740 Dart \uc5b8\uc5b4\ub85c \ub9cc\ub4e4\uc5b4\uc9c4 \ud504\ub85c\uadf8\ub7a8\uc774 JavaScript\ub85c \ubcc0\ud658\ub418\ub294 \ub2e8\uacc4\uc5d0\uc11c \ub354 \ub098\uc544\uac00\uc11c, Flutter \ud504\ub808\uc784\uc6cc\ud06c\uac00 \uc81c\uacf5\ud558\ub294 \ub2e4\uc591\ud55c core drawing layer\uac00 \uae30\uc874 Web \ube0c\ub77c\uc6b0\uc800 \uc704\uc5d0\uc11c \ub3d9\uc791 \ud560 \uc218 \uc788\ub3c4\ub85d, [\uadf8\ub9bc 1]\uacfc \uac19\uc774, Dart\/Flutter Framework\ub97c \ud45c\uc900 Web \ube0c\ub77c\uc6b0\uc800 API \uc0c1\uc5d0\uc11c \uad6c\ud604\ud558\ub294 \uc791\uc5c5\uc744 \uc218\ud589\ud558\uc600\uc2b5\ub2c8\ub2e4. <\/p>\n\n\n\n

\"\"
[\uadf8\ub9bc 1] Flutter for Web \uae30\ubcf8 \uac1c\ub150 (\ucd9c\ucc98: https:\/\/flutter.dev\/web<\/a> )<\/figcaption><\/figure><\/div>\n\n\n\n

\uc55e\uc11c\uc758 \uae00\uc5d0\uc11c, \ud604\uc7ac Flutter for Web\uc774 \uae30\uc874 Web \uae30\uc220\ub85c \ub9cc\ub4e4\uc5b4\uc9c4 Web \uc0ac\uc774\ud2b8\ub4e4\uc744 \ubaa8\ub450 \ubc14\uafb8\ub824 \ud558\uae30 \ubcf4\ub2e4\ub294 \uc778\ud130\uc561\ud2f0\ube0c\ud558\uace0 \ub3d9\uc801\uc778 \ucf58\ud150\uce20\ub97c \ud45c\ud604\ud558\ub294 Web \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ubaa9\ud45c\ub85c \ud55c\ub2e4\uace0 \ud558\uc600\uc2b5\ub2c8\ub2e4. Flutter for\nWeb \uacf5\uc2dd \uc0ac\uc774\ud2b8( https:\/\/flutter.dev\/web<\/a> )\uc5d0\ub294 \uc774\uc5d0 \ub300\ud574\uc11c \ub2e4\uc74c\uc758 \uc138\uac00\uc9c0 \uc2dc\ub098\ub9ac\uc624\ub97c \uc608\ub97c \ub4e4\uc5b4\uc11c \uc124\uba85\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

A connected\nProgressive Web Application built with Flutter : Flutter\ub85c \ub9cc\ub4e4\uc5b4\uc9c4 \uae30\uc874\uc758 \ubaa8\ubc14\uc77c \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ubcf4\ub2e4 \ub2e4\uc591\ud55c device\ub4e4\uc5d0 \uc801\uc6a9\ud558\uac70\ub098, \uc544\ub2c8\uba74 Web \uc0c1\uc5d0\uc11c\ub3c4 \uac19\uc740 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud558\ub824\ub294 \uacbd\uc6b0<\/p>\n\n\n\n

Embedded\nInteractive content : \uae30\uc874 Web \ud398\uc774\uc9c0 \uc548\uc5d0\uc11c\ub3c4 \uc27d\uac8c \uc6b4\uc6a9\uc774 \uac00\ub2a5\ud55c rich & data-centric \uae30\ub2a5\uc744 \uc801\uc6a9\ud558\ub294 \uacbd\uc6b0\ub85c\uc11c, \uc608\ub97c \ub4e4\uc5b4 \ub370\uc774\ud130 \uc2dc\uac01\ud654, \uc790\ub3d9\ucc28 \uad6c\uc131 \uc694\uc18c \uc124\uc815\uacfc \uac19\uc740 \uc628\ub77c\uc778 \ub3c4\uad6c, embedded\ub41c \ud615\ud0dc\uc758 \ucc28\ud2b8 \ub4f1\uc758 embedded web content\ub97c \uac1c\ubc1c\ud558\ub294 \uacbd\uc6b0<\/p>\n\n\n\n

Embedding\ndynamic content in a Flutter mobile app : \uae30\uc874 \ubaa8\ubc14\uc77c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub0b4\uc5d0\uc11c \ub3d9\uc801 \ucee8\ud150\uce20\ub97c \uc5c5\ub370\uc774\ud2b8 \ud558\uae30 \uc704\ud574\uc11c \uc0ac\uc6a9\ud558\ub294 \uc77c\ubc18\uc801\uc778 \ubc29\ubc95\uc740 \ub3d9\uc801\uc73c\ub85c \ucee8\ud150\uce20\ub97c \ub85c\ub4dc \ud560 \uc218 \uc788\ub294 Web view control \uc774\uc600\uc9c0\ub9cc, Flutter\ub294 \uc6f9 \ubc0f \ubaa8\ubc14\uc77c \ucee8\ud150\uce20\ub97c \uc704\ud55c \ud1b5\ud569 \ud658\uacbd\uc744 \uc81c\uacf5\ud558\ubbc0\ub85c, \ucee8\ud150\uce20\ub97c \ud50c\ub7ab\ud3fc\uc5d0 \ub530\ub77c\uc11c \ub2e4\uc2dc \uc791\uc131\ud558\uc9c0 \uc54a\uace0\ub3c4 \uc571\uc5d0 \ub0b4\uc7a5 \ud560 \uc218 \uc788\uc74c<\/p>\n\n\n\n

\ub530\ub77c\uc11c, Flutter for Web\uc758 \uc0ac\uc6a9\uc5d0\ub294, \uae30\uc874\uc758 \ubaa8\ub4e0 Web \uae30\uc220\uc744 \ub300\uccb4\ud558\uaca0\ub2e4\ub294 \uc811\uadfc \ubcf4\ub2e4\ub294, \ubaa9\uc801\uc5d0 \ub9de\ub294 \uc0ac\uc6a9\uc774 \ud544\uc694\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4 \ube14\ub85c\uadf8 \uae30\uc0ac\uc640 \uac19\uc740, \ud14d\uc2a4\ud2b8 \uc911\uc2ec\uc758 \uc815\uc801\uc778 \ucee8\ud150\uce20\ub97c \uc81c\uacf5\ud558\ub294 \uacbd\uc6b0\ub294 \uae30\uc874 Web \uae30\ubc18 \uae30\uc220\uc744 \ud65c\uc6a9\ud558\uace0, app-centric\ud55c \uc11c\ube44\uc2a4\uc5d0\uc11c interactive\ud558\uace0 data-centric\ud55c UI \ud504\ub808\uc784\uc6cc\ud06c\uac00 \ub3d9\uc801\uc73c\ub85c \ub3d9\uc791\ud558\ub294 \uac83\uc774 \ud544\uc694\ud55c \uacbd\uc6b0\uac00 Flutter for Web\uc744 \ub3c4\uc785\ud558\uae30 \uc88b\uc740 \ud658\uacbd\uc778 \uac83\uc73c\ub85c \uad8c\uc7a5\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

\uc774\uc81c, Web \ud658\uacbd\uc744 \uace0\ub824\ud55c Flutter \uae30\ubc18 \uccab\ubc88\uc9f8 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc8fc \ub0b4\uc6a9\uc740 Flutter \uacf5\uc2dd \uc0ac\uc774\ud2b8( https:\/\/flutter.dev\/docs\/get-started\/codelab-web<\/a> )\uc758 \u201cWrite your first Flutter app on the web\u201d\uc744 \uae30\ubc18\uc73c\ub85c \uc9c4\ud589\ud558\uace0\uc790 \ud569\ub2c8\ub2e4. \ub3d9\uc791\uc740 \ub2e8\uc21c \ud569\ub2c8\ub2e4. [\uadf8\ub9bc 2]\uc640 \uac19\uc740 \ub85c\uadf8\uc778 \ud654\uba74\uc744 \ud1b5\ud574\uc11c \uc0ac\uc6a9\uc790\ub85c\ubd80\ud130 \uc774\ub984\uacfc \uc0ac\uc6a9\uc790 \uc544\uc774\ub514\ub97c \uc785\ub825 \ubc1b\uc740 \ud6c4, \ud658\uc601 \uc778\uc0ac \ubb38\uad6c\ub97c \ud654\uba74\uc5d0 \ubcf4\uc5ec\uc8fc\ub294 \uc815\ub3c4\uc785\ub2c8\ub2e4. <\/p>\n\n\n\n

\"\"
[\uadf8\ub9bc 2] First Flutter app in the web
(\ucd9c\ucc98: https:\/\/flutter.dev\/docs\/get-started\/codelab-web<\/a> )<\/figcaption><\/figure><\/div>\n\n\n\n

\uc880 \ub354 \uc138\ubd80\uc801\uc73c\ub85c \uae30\ub2a5\uc744 \uc0b4\ud3b4\ubcf4\uba74, \ud654\uba74\uc5d0\ub294 \uc774\ub984, \uc131 \ubc0f \uc0ac\uc6a9\uc790 \uc774\ub984\uc758 \uc138 \uac00\uc9c0 \ud14d\uc2a4\ud2b8 \ud544\ub4dc\uac00 \uc788\uc2b5\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uac00 \ud544\ub4dc\ub97c \ucc44\uc6b0\uba74 \uc9c4\ud589\ub960 \ud45c\uc2dc \uc904\uc774 \ub85c\uadf8\uc778 \uc601\uc5ed\uc758 \uc0c1\ub2e8\uc744 \ub530\ub77c \uc6c0\uc9c1\uc785\ub2c8\ub2e4. \uc138 \uac1c\uc758 \ud544\ub4dc\uac00 \ubaa8\ub450 \ucc44\uc6cc\uc9c0\uba74 \uc9c4\ud589\ub960 \ud45c\uc2dc \uc904\uc774 \ub85c\uadf8\uc778 \uc601\uc5ed\uc758 \uc804\uccb4 \ub108\ube44\ub97c \ub530\ub77c \ub179\uc0c9\uc73c\ub85c \ud45c\uc2dc\ub418\uace0 \uac00\uc785 \ubc84\ud2bc\uc774 \ud65c\uc131\ud654\ub429\ub2c8\ub2e4. \uac00\uc785 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uba74 \uc2dc\uc791 \ud654\uba74\uc774 \ud654\uba74 \ud558\ub2e8\uc5d0\uc11c \uc560\ub2c8\uba54\uc774\uc158\uc73c\ub85c \ud45c\uc2dc\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n

\uc2e4\ud589\uc5d0 \uc55e\uc11c\uc11c flutter doctor\ub97c \uc2e4\ud589\ud574\uc11c, \uac1c\ubc1c \ud658\uacbd\uc5d0 \ubb38\uc81c\uac00 \uc5c6\ub294\uc9c0 \ub2e4\uc2dc \ud55c\ubc88 \ud655\uc778\ud558\uace0, flutter\ndevices\ub97c \ud1b5\ud574\uc11c Chrome\uacfc Web Server\uac00 Flutter for Web\uc758 \uc2e4\ud589\uc744 \uc704\ud574\uc11c \uc5f0\uacb0\ub418\uc5b4 \uc788\ub294\uc9c0 \ud655\uc778 \ud569\ub2c8\ub2e4. <\/p>\n\n\n\n

Step.0 New\nFlutter Project with Text Input Fields<\/h4>\n\n\n\n

Flutter for\nWeb\uc744 \uacbd\ud5d8\ud560 \uc0c8\ub85c\uc6b4 Flutter \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574\uc11c \ubcf8\uc778\uc774 \uc791\uc5c5\ud560 \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud558\uc5ec flutter create \uba85\ub839\uc744 \uc2e4\ud589\ud569\ub2c8\ub2e4. \uc544\ub798\ub294 myapp \uc774\ub77c\ub294 \uc774\ub984\uc73c\ub85c Flutter \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud55c \uacbd\uc6b0 \uc785\ub2c8\ub2e4.<\/p>\n\n\n\n

flutter create myapp<\/pre>\n\n\n\n
\ub2e4\uc74c\uc740 Flutter \uacf5\uc2dd \ud648\ud398\uc774\uc9c0\uc5d0\uc11c \uac00\uc838\uc628 \ucd08\uae30 \ub2e8\uacc4 \ucf54\ub4dc\uc778 darttutorial-41-main-step-0.dart \ud504\ub85c\uadf8\ub7a8\uc73c\ub85c myapp \ud504\ub85c\uc81d\ud2b8\uc758 main.dart( myapp\/lib\/main.dart ) \ud504\ub85c\uadf8\ub7a8\uc744 \ub300\uccb4 \ud569\ub2c8\ub2e4. <\/p>\n\n\n\n
\/\/ Source: https:\/\/flutter.dev\/docs\/get-started\/codelab-web\n\/\/ darttutorial-41-main-step-0.dart\n\n import 'package:flutter\/material.dart';\n void main() => runApp(LoginApp());\n class LoginApp extends StatelessWidget {\n   @override\n   Widget build(BuildContext context) {\n     return MaterialApp(\n       routes: {\n         '\/': (context) => LoginScreen(),\n       },\n     );\n   }\n }\n class LoginScreen extends StatelessWidget {\n   @override\n   Widget build(BuildContext context) {\n     return Scaffold(\n       backgroundColor: Colors.grey[200],\n       body: Center(\n         child: SizedBox(\n           width: 400,\n           child: Card(\n             child: LoginForm(),\n           ),\n         ),\n       ),\n     );\n   }\n }\n class LoginForm extends StatefulWidget {\n   @override\n   _LoginFormState createState() => _LoginFormState();\n }\n class _LoginFormState extends State {\n   final _firstNameTextController = TextEditingController();\n   final _lastNameTextController = TextEditingController();\n   final _usernameTextController = TextEditingController();\n double _formProgress = 0;\n @override\n   Widget build(BuildContext context) {\n     return Form(\n       child: Column(\n         mainAxisSize: MainAxisSize.min,\n         children: [\n           LinearProgressIndicator(value: _formProgress),\n           Text('Sign Up', style: Theme\n               .of(context)\n               .textTheme\n               .display1), \/\/ display1 changes to headline4 in 1.16\n           Padding(\n             padding: EdgeInsets.all(8.0),\n             child: TextFormField(\n               controller: _firstNameTextController,\n               decoration: InputDecoration(hintText: 'First name'),\n             ),\n           ),\n           Padding(\n             padding: EdgeInsets.all(8.0),\n             child: TextFormField(\n               controller: _lastNameTextController,\n               decoration: InputDecoration(hintText: 'Last name'),\n             ),\n           ),\n           Padding(\n             padding: EdgeInsets.all(8.0),\n             child: TextFormField(\n               controller: _usernameTextController,\n               decoration: InputDecoration(hintText: 'Username'),\n             ),\n           ),\n           FlatButton(\n             color: Colors.blue,\n             textColor: Colors.white,\n             onPressed: null,\n             child: Text('Sign up'),\n           ),\n         ],\n       ),\n     );\n   }\n }<\/pre>\n\n\n\n
\uadf8\ub9ac\uace0 \ub2e4\uc74c\uc758 \uba85\ub839\uc744 \ud1b5\ud574\uc11c \uc2e4\ud589\ud574 \ubd05\ub2c8\ub2e4. \uc9c0\uae08\uae4c\uc9c0\uc758 \uc791\uc5c5\uc744 \uc798 \ub530\ub77c\uc654\ub2e4\uba74, \ubb38\uc81c\uc5c6\uc774 Chrome \ube0c\ub77c\uc6b0\uc800\ub97c \ud1b5\ud574\uc11c \uc774\ub984\uacfc \uc544\uc774\ub514\ub97c \uc785\ub825\ud558\ub3c4\ub85d \ud558\ub294 \ud654\uba74\uc774 \uc5f4\ub838\uc744 \uac81\ub2c8\ub2e4. <\/p>\n\n\n\n
flutter run -d Chrome<\/pre>\n\n\n\n
Flutter \uacf5\uc2dd \ud648\ud398\uc774\uc9c0\uc5d0\uc11c\ub294 \ubc14\ub85c \uc218\uc815 \uc791\uc5c5\uc744 \uc9c4\ud589\ud558\uc9c0\ub9cc, \ubcf8 \uae00\uc5d0\uc11c\ub294 \uc55e\uc11c main.dart\uc758 \ub0b4\uc6a9\uc744 \uc880 \ub354 \uc0b4\ud3b4 \ubcf4\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4. \ud3b8\uc758\uc0c1 main.dart\uc758 \uc124\uba85\uc744 \uc6a9\uc774\ud558\uac8c \ud558\uae30 \uc704\ud558\uc5ec \uc904 \ubc88\ud638\uac00 \ud3ec\ud568\ub41c \ud615\ud0dc\uc778 [\uadf8\ub9bc 3]\uacfc [\uadf8\ub9bc 4]\ub85c \ub098\ub204\uc5b4\uc11c \uc774\ud574 \ud558\ub3c4\ub85d \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
\"\"
[\uadf8\ub9bc 3] main.dart \uc774\ud574 (1\/2)<\/figcaption><\/figure>\n\n\n\n
3\ubc88 \uc904\uc5d0\uc11c \uc774 \ud504\ub85c\uadf8\ub7a8\uc774 Material \ub514\uc790\uc778\uc744 \uae30\ubc18\uc73c\ub85c \ub9cc\ub4e4\uc5b4 \uc9c0\ub294 \uac83\uc744 \uc54c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
5\ubc88 \uc904\uc5d0\uc11c\ub294 main() \uc2e4\ud589 \uc2dc, LoginApp() \uac1d\uccb4\ub97c \ub9cc\ub4e4\uc5b4\uc11c, \ud504\ub85c\uadf8\ub7a8\uc774 \ucc98\uc74c \uad6c\ub3d9\ud558\ub3c4\ub85d \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
7\ubc88 \uc904\uc5d0\uc11c\ub294 LoginApp \ud074\ub798\uc2a4\uc758 \uc815\uc758\uac00 StatelessWidget\ub97c \ud655\uc7a5\ud558\uc5ec \ub9cc\ub4e4\uc5b4 \uc9c0\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub0b4\ubd80 \uad6c\uc131\uc740 \uc55e\uc11c Flutter\uc5d0\uc11c \ub2e4\ub918\ub358 \ub0b4\uc6a9\uacfc \ub3d9\uc77c\ud558\uac8c build()\ub97c override\ud558\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. MaterialApp()\n\uac1d\uccb4\ub97c \ub9ac\ud134 \ud558\ub294 \uac83 \uae4c\uc9c0\ub294 \uc774\uc804\uc5d0 \ub2e4\ub8ec \uc804\ud615\uc801\uc778 \ud615\ud0dc\uc778\ub370, \ub0b4\ubd80\ub97c \ubcf4\uba74 \uc9c0\uae08\uae4c\uc9c0 \ub2e4\ub8e8\uc9c0 \uc54a\uc558\ub358 routes Property\ub97c \uc124\uc815\ud558\ub294 \ub0b4\uc6a9\uc774 \ub098\uc635\ub2c8\ub2e4. \uc5ec\uae30\uc11c MaterialApp \ud074\ub798\uc2a4\uc758 routes Property\uc5d0 \ub300\ud574\uc11c \uc774\ud574\uac00 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
MaterialApp \ud074\ub798\uc2a4\uc758 routes Property\ub294 Map<String, WidgetBuilder> \ud0c0\uc785\uc73c\ub85c \uc815\uc758\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4 (\ucd9c\ucc98: https:\/\/api.flutter.dev\/flutter\/material\/MaterialApp\/routes.html<\/a> ). String\uc5d0 \ud574\ub2f9\ud558\ub294 \ubb38\uc790\uc5f4\uacfc \uc774 \ubb38\uc790\uc5f4\uc5d0 \ub9e4\ud551 \ub418\ub294 Widget\uc744 \uc0dd\uc131\ud560 Builder \ud568\uc218\ub97c \uc785\ub825 \ud30c\ub77c\uba54\ud0c0\ub85c \ubc1b\ub294 \ub2e4\ub294 \uac83 \uc785\ub2c8\ub2e4. \uc77c\ubc18\uc801\uc778 Web \uc0ac\uc774\ud2b8 \uc811\uc18d \uc2dc \uc0ac\uc6a9\ud558\ub294 URL(\uc6f9 \uc0ac\uc774\ud2b8 \uc8fc\uc18c)\uc744 \uc5f0\uc0c1\ud558\uba74 \uc27d\uac8c \uc774\ud574\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, test.net \uc774\ub77c\ub294 Web \uc0ac\uc774\ud2b8\uc5d0 \uc811\uc18d\ud560 \ub54c, Web \ube0c\ub77c\uc6b0\uc800\uc758 \uc8fc\uc18c \ucc3d\uc5d0 \ub2e4\uc74c\ucc98\ub7fc \uc785\ub825\uc744 \ud569\ub2c8\ub2e4. <\/p>\n\n\n\n
http:\/\/test.net<\/a><\/p>\n\n\n\n
\uc774\ub807\uac8c \ud558\uba74, \ud1b5\uc0c1 test.net \uc0ac\uc774\ud2b8\ub97c \ub3d9\uc791\ud558\uace0 \uc788\ub294 Web \uc11c\ubc84 \ucef4\ud4e8\ud130\uc5d0\uc11c Web \uc11c\ubc84 \ud504\ub85c\uadf8\ub7a8\uc758 root \ub514\ub809\ud1a0\ub9ac\uc758 index.html \ud654\uc77c\uc744 \ub3d9\uc791\ud558\uac8c \ub429\ub2c8\ub2e4. Root \ub514\ub809\ud1a0\ub9ac\ub97c \uae30\ud638\ub85c \u201c\/\u201d\ub85c \ub098\ud0c0\ub0b8\ub2e4\ub294 \uac83\uc744 \uc774\ud574\ud55c\ub2e4\uba74, 12\ubc88 \uc904\uc758 \uc758\ubbf8\uac00 \ubc14\ub85c \uc774\ud574\ub420\uc9c0 \ubaa8\ub974\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
12\ubc88 \uc904\uc740 \uc0ac\uc6a9\uc790\uac00 root \ub514\ub809\ud1a0\ub9ac(\u201c\/\u201d)\ub85c \uc811\uc18d\ud558\uba74 LoginScreen() \uac1d\uccb4\ub97c \uc0dd\uc131\ud558\uc5ec, \ud574\ub2f9 \uac1d\uccb4\uc758 \uc0dd\uc131\uc2dc \uc218\ud589\ud558\ub294 \uc791\uc5c5\uc744 \uc9c4\ud589\ud558\ub77c\ub294 \uc758\ubbf8 \uc785\ub2c8\ub2e4. Routes\nProperty\uac00 Map \ud0c0\uc785\uc778 \uac83\uc744 \uc0c1\uae30 \ud55c\ub2e4\uba74, \uc5ec\ub7ec \uac1c\uc758 \uc785\ub825 \uac12\uc5d0 \ubc18\uc751 \uac00\ub2a5\ud55c \ubcf5\uc218\uc758 \uae30\ub2a5\uc744 \uc815\uc758\ud560 \uc218 \uc788\ub294 \uac83\uc744 \uc608\uce21 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub530\ub77c\uc11c, [\uadf8\ub9bc 3]\uc5d0\uc11c\ub294 root \ub514\ub809\ud1a0\ub9ac(\u201c\/\u201d)\uc5d0 \ub300\ud55c \ucc98\ub9ac\ub9cc \uc815\uc758 \ud588\uc9c0\ub9cc, \ub9cc\uc57d root \ud558\ub2e8\uc758 sub1 \ub514\ub809\ud1a0\ub9ac\uc5d0 \ub300\ud55c \uc694\uccad\uacfc root \ud558\ub2e8\uc758 sub2 \ub514\ub809\ud1a0\ub9ac\uc5d0 \ub300\ud55c \ub3d9\uc791\uc744 \ucd94\uac00\ub85c \uc815\uc758\ud558\uace0 \uc2f6\uc740 \uacbd\uc6b0\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \uac01\uac01\uc5d0 functionSub1()\uacfc functionSub2()\ub97c \uc218\ud589\ud558\ub3c4\ub85d \uc815\uc758\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
routes: {
     \u2018\/\u2019: (context) => LoginScreen(),
     \u2018\/sub1\u2019: (context) => functionSub1(),                    
     \u2018\/sub2\u2019: (context) => functionSub2(),
}<\/pre>\n\n\n\n
12\ubc88 \uc904\uc5d0\uc11c \ucd5c\ucd08 root \ub85c\uc758 \uc811\uadfc\uc2dc \uc2e4\ud589\ud558\ub294 LoginScreen()\uc740 18\ubc88 \uc904\ubd80\ud130 \uc815\uc758\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 StatelessWidget\uc73c\ub85c \ud655\uc7a5\ud558\uc5ec \ub9cc\ub4ed\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \uc804\ud615\uc801\uc778 \uc2e4\ud589 \uc608\uc81c\ucc98\ub7fc build()\ub97c override\ud558\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
21\ubc88 \uc904\uc744 \ubcf4\uba74 Scaffold()\ub97c return\ud558\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\ub294\ub370, 22\ubc88 \uc904\uc744 \ubcf4\uba74 \ubc30\uacbd \uc0c9\uae54\uc744 grey[200]\uc73c\ub85c \uc815\uc758\ud558\ub294 \uac83\uacfc, body()\ub97c \ud3ec\ud568\ud558\ub3c4\ub85d \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
23\ubc88 \uc904\uc744 \ubcf4\uba74, body()\uc5d0 Center()\ub97c \uc0dd\uc131\ud558\ub294\ub370, \uc774 \uc548\uc744 \ubcf4\uba74, LoginForm()\uc744 child\ub85c \ud3ec\ud568\ud558\ub294 SizedBox()\ub97c \ud558\ub098 \ud3ec\ud568\ud558\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\"\"
[\uadf8\ub9bc 4] main.dart \uc774\ud574 (2\/2)<\/figcaption><\/figure>\n\n\n\n
\ub2e4\uc74c\uc740 main.dart\uc758 \ubc18\uc5d0 \ud574\ub2f9\ud558\ub294 \ub0b4\uc6a9\uc778 [\uadf8\ub9bc 4]\ub97c \uc124\uba85\ud558\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
35\ubc88 \uc904\uc5d0\uc11c\ub294 LoginForm\uc774 StatefulWidget()\uc744 \ud655\uc7a5\ud574\uc11c \ub9cc\ub4e4\uc5b4 \uc9c0\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \ub0b4\ubd80 \uc0c1\ud0dc\ub85c LoginFormState\ub97c createState()\ub85c \uc0dd\uc131\ud558\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
40\ubc88 \uc904\ubd80\ud130 LoginFormState()\uac00 State<>\uc758 \ud655\uc7a5\uc73c\ub85c \ub9cc\ub4e4\uc5b4 \uc9c0\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. <\/p>\n\n\n\n
41\ubc88 \uc904\uc5d0\uc11c 43\ubc88 \uc904\uc744 \ud1b5\ud574\uc11c, 3\uac1c\uc758 TextController()\uac00 \ub0b4\ubd80 \uc0c1\ud0dc\ub85c \ub9cc\ub4e4\uc5b4 \uc9d1\ub2c8\ub2e4. \uc774\ub4e4\uc740 TextEditingController()\ub85c \ub9cc\ub4e4\uc5b4 \uc9d1\ub2c8\ub2e4. \uc5ec\uae30\uc11c \ucc98\uc74c \ub4f1\uc7a5\ud55c TextEditingController \ud074\ub798\uc2a4\uc5d0 \ub300\ud574\uc11c \uc880 \ub354 \uc54c\uc544 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
TextEditingController\n\ud074\ub798\uc2a4\ub294 \ud3b8\uc9d1 \uac00\ub2a5\ud55c \ud14d\uc2a4\ud2b8 \ud544\ub4dc\uc5d0 \ub300\ud55c \ucee8\ud2b8\ub864\ub7ec \uc785\ub2c8\ub2e4(\ucc38\uc870: https:\/\/api.flutter.dev\/flutter\/widgets\/TextEditingController-class.html<\/a>\n). \uc774 \ud074\ub798\uc2a4\uc5d0\uc11c \uc8fc\uc694\ud55c property\ub294 value, text \uadf8\ub9ac\uace0 selection \uc785\ub2c8\ub2e4. \uba3c\uc800 value Property\ub294 TextEditingController \uc548\uc5d0 \uc800\uc7a5\ub418\uc5b4 \uc788\ub294 \ud604\uc7ac\uc758 \uac12\uc785\ub2c8\ub2e4. text Property\ub294 \uc0ac\uc6a9\uc790\uac00 \ud3b8\uc9d1\ud558\uace0 \uc788\ub294 \ud604\uc7ac \ubb38\uc790\uc5f4\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4. selection\nProperty\ub294 \ud604\uc7ac \uc120\ud0dd\ub41c \ud14d\uc2a4\ud2b8\ub97c \uc758\ubbf8\ud569\ub2c8\ub2e4. <\/p>\n\n\n\n
\uc0ac\uc6a9\uc790\uac00 \uad00\ub828 TextEditingController\ub85c \ud14d\uc2a4\ud2b8 \ud544\ub4dc\ub97c \uc218\uc815\ud560 \ub54c\ub9c8\ub2e4 \ud14d\uc2a4\ud2b8 \ud544\ub4dc\ub294 value Property\ub97c \uc5c5\ub370\uc774\ud2b8\ud558\uace0 \ucee8\ud2b8\ub864\ub7ec\ub294 \ud574\ub2f9 Listeners\uc5d0\uac8c \uc54c\ub9bd\ub2c8\ub2e4. \uadf8\ub7ec\uba74 Listeners\ub294 text Property \ubc0f selection Property\ub97c \uc77d\uace0 \uc0ac\uc6a9\uc790\uac00 \uc785\ub825 \ud55c \ub0b4\uc6a9 \ub610\ub294 selection\uc774 \uc5b4\ub5bb\uac8c \uc5c5\ub370\uc774\ud2b8 \ub418\uc5c8\ub294\uc9c0 \uc54c \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub9c8\ucc2c\uac00\uc9c0\ub85c text Property \ub610\ub294 selection Property\ub97c \uc218\uc815\ud558\uba74 \ud14d\uc2a4\ud2b8 \ud544\ub4dc\uc5d0 \uc54c\ub9ac\uace0 \uc801\uc808\ud558\uac8c \uc5c5\ub370\uc774\ud2b8 \ub429\ub2c8\ub2e4. TextEditingController\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud14d\uc2a4\ud2b8 \ud544\ub4dc\uc758 \ucd08\uae30 \uac12\uc744 \uc81c\uacf5 \ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ubbf8 text Property\uac00 \uc788\ub294 \ucee8\ud2b8\ub864\ub7ec\ub85c \ud14d\uc2a4\ud2b8 \ud544\ub4dc\ub97c \uc791\uc131\ud558\uba74 \ud14d\uc2a4\ud2b8 \ud544\ub4dc\ub294 \ud574\ub2f9 \ud14d\uc2a4\ud2b8\ub97c \ucd08\uae30 \uac12\uc73c\ub85c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uc774 \ucee8\ud2b8\ub864\ub7ec\uc5d0 \ucd94\uac00 \ub41c Listeners \ub0b4\uc5d0\uc11c text Property \ub610\ub294 selection Property\ub97c \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub450 \uc18d\uc131\uc744 \ubaa8\ub450 \ubcc0\uacbd\ud574\uc57c\ud558\ub294 \uacbd\uc6b0 \ucee8\ud2b8\ub864\ub7ec value Property\ub97c \ub300\uc2e0 \uc124\uc815\ud574\uc57c \ud569\ub2c8\ub2e4. \ub354 \uc774\uc0c1 \ud544\uc694\ud558\uc9c0 \uc54a\uc740 \uacbd\uc6b0\nTextEditingController\uc758 dispose Method\ub97c \uc2e4\ud589 \ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uac1d\uccb4\uac00 \uc0ac\uc6a9\ud558\ub294 \ubaa8\ub4e0 \ub9ac\uc18c\uc2a4\ub97c \ud3d0\uae30 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
48\ubc88 \uc904\uc744 \ubcf4\uba74, \uc774\ub807\uac8c 3\uac00\uc9c0 \ud3b8\uc9d1 \uac00\ub2a5\ud55c \ud14d\uc2a4\ud2b8 \ucee8\ud2b8\ub864\ub7ec\ub97c \uc0c1\ud0dc \uac12\uc73c\ub85c \uad00\ub9ac\ud558\ub294 LoginFormState \ud074\ub798\uc2a4\ub294 build \ud568\uc218\uc5d0\uc11c Form() \uac1d\uccb4\ub97c \ub9ac\ud134 \ud569\ub2c8\ub2e4. <\/p>\n\n\n\n
49\ubc88 \uc904\uc744 \ubcf4\uba74, Form \ud074\ub798\uc2a4\ub294 \ubcf5\uc218\uc758 form field widget\ub4e4\uc744 \ubb36\uc5b4\uc11c \uadf8\ub8f9\uc73c\ub85c \ub9cc\ub4e0 container\ub97c \ub9cc\ub4ed\ub2c8\ub2e4. <\/p>\n\n\n\n
50\ubc88 \uc904\uc744 \ubcf4\uba74, Form \ud074\ub798\uc2a4\uc758 \uad6c\uc131 \uc694\uc18c\ub294 Column \ud615\ud0dc\ub85c \ubb36\uc778, LinearProgressIndicator(), Text(), \uadf8\ub9ac\uace0 3\uac1c\uc758 Padding()\uc640 FlatButton()\uc778 \uac83\uc744 \uc54c \uc218 \uc788\uc2b5\ub2c8\ub2e4. Text()\ub294 \uc785\ub825 \ucc3d\uc758 \ub9e8 \uc704\uc5d0 \ud45c\uc2dc\ud55c \u201cSign Up\u201d \uae00\uc790\ub97c \ub098\ud0c0\ub0b4\uba70, FlatButton()\uc740 \uc544\uc9c1 \ud65c\uc131\ud654\uac00 \uc548\ub41c (onpressed Property\uac00 null\uc778) \u201cSign Up\u201d \uae00\uc790\ub97c \ub0b4\uc6a9\uc73c\ub85c \uac00\uc9c0\ub294 \ubc84\ud2bc\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n
58\ubc88 \uc904\uc744 \ud3ec\ud568\ud55c 3\uac1c\uc758 Padding()\uc740 \uac01\uac01 TextFormField()\ub97c \uac00\uc9c0\uace0 \uc788\ub294\ub370, \uc774 \uc548\uc758 controller Property\ub97c \ubcf4\uba74, \uc55e\uc11c \uc815\uc758\ud55c StatefulWidget\uc758 \uc0c1\ud0dc \uac12\uc778 TextEditingController()\ub85c \uc124\uc815\ub418\uc5b4 \uc788\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. Padding\nProperty\uc640 decoration Property\ub294 \uac01\uac01 \uc0ac\uc6a9\uc790 \ud654\uba74\uc758 \uad6c\uc131\uacfc \ud78c\ud2b8 \ubb38\uc790\uc5f4\uc744 \ubcf4\uc5ec\uc8fc\ub294 \ud6a8\uacfc\ub97c \ub098\ud0c0\ub0c5\ub2c8\ub2e4.<\/p>\n\n\n\n
Step.1 Add welcome\nscreen<\/h4>\n\n\n\n
\uc774\uc81c \uc0ac\uc6a9\uc790\uac00 \ud14d\uc2a4\ud2b8\uc758 \uc785\ub825\uc744 \ub9c8\uce58\uba74, \ud654\uba74\uc758 \ub9e8 \uc544\ub798 \uc704\uce58\ud55c \u201cSign up\u201d \ub2e8\ucd94\ub97c \ub20c\ub7ec\uc11c \uc791\uc5c5\uc744 \ub9c8\uce58\ub294 \uae30\ub2a5\uc744 \ucd94\uac00 \ud558\ub3c4\ub85d \ud569\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574\uc11c, main.dart \ud504\ub85c\uadf8\ub7a8\uc744 \uc218\uc815\ud569\ub2c8\ub2e4. \uba3c\uc800, \ud654\uba74 \uc911\uac04\uc5d0 \uac04\ub2e8\ud558\uac8c \u201cWelcome!\u201d \uc774\ub77c\ub294 \uae00\uc790\ub97c \ucd9c\ub825\ud558\ub294 WelcomeScreen \ud074\ub798\uc2a4\ub97c \uc704\ud55c \uc544\ub798 \ucf54\ub4dc\ub97c \ucd94\uac00 \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
class WelcomeScreen extends StatelessWidget {\n   @override\n   Widget build(BuildContext context) {\n     return Scaffold(\n       body: Center(\n         child: Text('Welcome!', style: Theme.of(context).textTheme.display3),\n       ),\n     );\n   }\n }<\/pre>\n\n\n\n
\ud574\ub2f9 \ud568\uc218\ub294 \uc55e\uc11c\uc758 MaterialApp\uc758 routes Property\ub97c \ud1b5\ud574\uc11c \uc811\uadfc \uac00\ub2a5\ud558\ub3c4\ub85d \uc218\uc815\ud560 \uacc4\ud68d\uc785\ub2c8\ub2e4. \ub530\ub77c\uc11c, \uc544\ub798\uc758 \ubb38\uc7a5\uc744 \u201c\/\u201d\uc5d0 \ub300\ud55c \uad6c\ubb38 \uc544\ub798 \ucd94\uac00 \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
'\/welcome': (context) => WelcomeScreen(),<\/pre>\n\n\n\n
\uc774\uc81c \u201cSign up\u201d \ub2e8\ucd94\ub97c \ud65c\uc131\ud654 \ud558\uace0, \uc774 \ub2e8\ucd94\uac00 \ub20c\ub838\uc744 \ub54c, \ud504\ub85c\uadf8\ub7a8\uc774 \u201c\/welcome\u201d route\ub85c \uc774\ub3d9\ud558\ub3c4\ub85d \ud574\uc57c \ud569\ub2c8\ub2e4. \uc774 \uae30\ub2a5\uc744 \uc704\ud574\uc11c, LoginFormState\n\ud074\ub798\uc2a4 \ub0b4\ubd80 method\ub85c, \uc544\ub798\uc758 showWelcomeScreen() \ud568\uc218\ub97c \ucd94\uac00 \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
void _showWelcomeScreen() {\n   Navigator.of(context).pushNamed('\/welcome');\n }<\/pre>\n\n\n\n
Flutter\ub294 \ub2e8 \ud558\ub098\uc758 Navigator \uac1d\uccb4\ub97c \uac16\uc2b5\ub2c8\ub2e4. \uc774 \uc704\uc82f\uc740 \uc2a4\ud0dd \ub0b4\uc5d0\uc11c Flutter\uc758 \ud654\uba74 (routes \ub610\ub294 pages \ub77c\uace0\ub3c4 \ud568)\uc744 \uad00\ub9ac\ud569\ub2c8\ub2e4. \uc2a4\ud0dd \ub9e8 \uc704\uc5d0 \uc788\ub294 \ud654\uba74\uc740 \ud604\uc7ac \ud45c\uc2dc\ub41c view \uc785\ub2c8\ub2e4. \uc774 \uc2a4\ud0dd\uc5d0 \uc0c8\ub85c\uc6b4 \uc2a4\ud06c\ub9b0\uc744 push \ud558\uba74, \ub514\uc2a4\ud50c\ub808\uc774\uac00 \uc0c8 \ud654\uba74\uc73c\ub85c \uc804\ud658\ub429\ub2c8\ub2e4. \uc774\uac83\uc774\nshowWelcomeScreen() \ud568\uc218\uac00 WelcomeScreen\uc744 Navigator\uc758 \uc2a4\ud0dd\uc73c\ub85c push \ud558\ub294 \uc774\uc720\uc785\ub2c8\ub2e4. \uc774\uc81c, \uc0ac\uc6a9\uc790\uac00 \u201cSign up\u201d \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uba74, Welcome \ud654\uba74\uc774 \ub098\ud0c0\ub0a9\ub2c8\ub2e4. \ub9c8\ucc2c\uac00\uc9c0\ub85c, Navigator\uc5d0\uc11c pop()\uc744 \ud638\ucd9c\ud558\uba74 \uc774\uc804 \ud654\uba74\uc73c\ub85c \ub3cc\uc544\uac11\ub2c8\ub2e4. Flutter\uc758 navigation \uae30\ub2a5\uc740 \ube0c\ub77c\uc6b0\uc800\uc758 navigation \uae30\ub2a5\uc5d0 \ud1b5\ud569\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub85c \uc778\ud558\uc5ec, \ube0c\ub77c\uc6b0\uc800\uc758 \u2018\ub4a4\ub85c\uac00\uae30\u2019 \ud654\uc0b4\ud45c \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uba74 \uc554\uc2dc\uc801\uc73c\ub85c \uc774\uc804 \ud654\uba74\uc73c\ub85c \ub3cc\uc544\uac00\ub294 pop()\uc774 \uc2e4\ud589 \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n
\uc774\ub807\uac8c \uc644\uc131\ub41c \ud504\ub85c\uadf8\ub7a8\uc744 darttutorial-41-main-step-1.dart\uc5d0\uc11c \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\/\/ Source: https:\/\/flutter.dev\/docs\/get-started\/codelab-web\n\/\/ darttutorial-41-main-step-1.dart\n\n import 'package:flutter\/material.dart';\n void main() => runApp(LoginApp());\n class LoginApp extends StatelessWidget {\n   @override\n   Widget build(BuildContext context) {\n     return MaterialApp(\n       routes: {\n         '\/': (context) => LoginScreen(),\n         '\/welcome': (context) => WelcomeScreen(),\n       },\n     );\n   }\n }\n class LoginScreen extends StatelessWidget {\n   @override\n   Widget build(BuildContext context) {\n     return Scaffold(\n       backgroundColor: Colors.grey[200],\n       body: Center(\n         child: SizedBox(\n           width: 400,\n           child: Card(\n             child: LoginForm(),\n           ),\n         ),\n       ),\n     );\n   }\n }\n class LoginForm extends StatefulWidget {\n   @override\n   _LoginFormState createState() => _LoginFormState();\n }\n class _LoginFormState extends State {\n   final _firstNameTextController = TextEditingController();\n   final _lastNameTextController = TextEditingController();\n   final _usernameTextController = TextEditingController();\n double _formProgress = 0;\n void _showWelcomeScreen() {\n     Navigator.of(context).pushNamed('\/welcome');\n   }\n @override\n   Widget build(BuildContext context) {\n     return Form(\n       child: Column(\n         mainAxisSize: MainAxisSize.min,\n         children: [\n           LinearProgressIndicator(value: _formProgress),\n           Text('Sign Up',\n               style: Theme.of(context)\n                   .textTheme\n                   .display1), \/\/ display1 changes to headline4 in 1.16\n           Padding(\n             padding: EdgeInsets.all(8.0),\n             child: TextFormField(\n               controller: _firstNameTextController,\n               decoration: InputDecoration(hintText: 'First name'),\n             ),\n           ),\n           Padding(\n             padding: EdgeInsets.all(8.0),\n             child: TextFormField(\n               controller: _lastNameTextController,\n               decoration: InputDecoration(hintText: 'Last name'),\n             ),\n           ),\n           Padding(\n             padding: EdgeInsets.all(8.0),\n             child: TextFormField(\n               controller: _usernameTextController,\n               decoration: InputDecoration(hintText: 'Username'),\n             ),\n           ),\n           FlatButton(\n             color: Colors.blue,\n             textColor: Colors.white,\n             onPressed: _showWelcomeScreen,\n             child: Text('Sign up'),\n           ),\n         ],\n       ),\n     );\n   }\n }\n class WelcomeScreen extends StatelessWidget {\n   @override\n   Widget build(BuildContext context) {\n     return Scaffold(\n       body: Center(\n         child: Text('Welcome!', style: Theme.of(context).textTheme.display3),\n       ),\n     );\n   }\n }<\/pre>\n\n\n\n
Step.2\nEnable sign in progress tracking<\/h4>\n\n\n\n
\uc55e\uc11c [\uadf8\ub9bc 4]\uc758 53\ubc88 \uc904\uc744 \ubcf4\uba74, LinearProgressIndicator\uac00 \uc788\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 progress bar\ub77c\uace0\ub3c4 \ud558\ub294\ub370, Material \ub514\uc790\uc778\uc5d0 \uae30\ubc18\ud574\uc11c \uc791\uc5c5\uc774 \uc9c4\ud589 \uc911\uc774\ub77c\ub294 \uac83\uc744 \uc0ac\uc6a9\uc790\uc5d0\uac8c \ubcf4\uc5ec\uc8fc\ub294 \uc5ed\ud560 \uc785\ub2c8\ub2e4. \ub450\uac00\uc9c0 \ud0c0\uc785\uc774 \uc874\uc7ac\ud558\ub294 Determinate\uc640 Indeterminate \uc785\ub2c8\ub2e4. \uc804\uc790\ub294 0.0 ~ 1.0 \uc0ac\uc774\uc758 \uac12\uc73c\ub85c \ud604\uc7ac\uc758 \uc9c4\ud589 \uc0c1\ud669\uc744 \ud45c\uc2dc\ud569\ub2c8\ub2e4. \ud6c4\uc790\ub294 \uac12\uc744 \uac16\uc9c0 \uc54a\uc73c\uba70(null value), \ub2e8\uc9c0 \uc9c4\ud589 \uc911\uc774\ub77c\ub294 \uc758\ubbf8\ub97c \uc804\ub2ec\ud558\uae30 \uc704\ud574\uc11c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. (\ucc38\uc870: https:\/\/api.flutter.dev\/flutter\/material\/LinearProgressIndicator-class.html<\/a> )<\/p>\n\n\n\n
\uc774\uc81c \ube44\ud65c\uc131\ud654 \ub418\uc5b4 \uc788\ub294 LinearProgressIndicator\ub97c \ud65c\uc131\ud654 \ud558\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4. \uc989, \uc0ac\uc6a9\uc790\uac00 [\uadf8\ub9bc 2]\uc758 \uac01\uac01\uc758 \uce78\uc744 \ucc44\uc6cc \ub098\uac00\uba74, LinearProgressIndicator\uc758 \uc0c9\uacfc \ucc44\uc6cc\uc9c0\ub294 \ubaa8\uc591\uc774 \ubc14\ub00c\uba70, \ubaa8\ub4e0 \uce78\uc5d0 \ub300\ud574\uc11c \uc0ac\uc6a9\uc790\uac00 \uc785\ub825\uc744 \ud558\uba74, \uaf49\ucc2c \uc904\uc758 \ubaa8\uc591\uc744 \ubcf4\uc5ec\uc8fc\ub3c4\ub85d \uc218\uc815\ud569\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574\uc11c \uc0ac\uc6a9\uc790\uac00 \uac01 \uce78 \ubcc4\ub85c \uae00\uc744 \uc37c\ub294\uc9c0 \ud655\uc778\ud55c \ud6c4, \uce78\uc774 \ucc44\uc6cc\uc9c0\ub294 \ub9cc\ud07c\uc758 \uac12\uc744 LinearProgressIndicator\uc758 \ud30c\ub77c\uba54\ud0c0\ub85c \uc124\uc815\ud55c formProgress \ubcc0\uc218\uc758 \uac12\uc744 0.0 ~ 1.0\uc73c\ub85c \ubcc0\uacbd\ud558\ub294 \ubc29\uc2dd\uc73c\ub85c \uc904\uc758 \ubaa8\uc591\uc774 \ubc14\ub00c\ub3c4\ub85d \ud569\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574\uc11c \uac00\uc7a5 \uba3c\uc800 \ud560 \uc77c\uc740 3\uac1c\uc758 \uce78\uc5d0 \ub300\ud574\uc11c \ube48\uce78\uc774 \uc544\ub2c8\uba74, \uac01 \uce78\ubcc4\ub85c 1\/3\uc758 \uac12\uc744 formProgress\uc5d0 \ub354\ud558\ub294 \ud568\uc218 \uc785\ub2c8\ub2e4. \uc774 \ud568\uc218\ub294 updateFormProgress() \uc774\uba70, \ub2e4\uc74c\uacfc \uac19\uc740 \ub0b4\uc6a9\uc744 \uac11\uc2b5\ub2c8\ub2e4. \uc774 \ud568\uc218\ub97c LoginFormState \ud074\ub798\uc2a4 \uc548\uc5d0 \uc815\uc758\ud569\ub2c8\ub2e4. \ud568\uc218\uc758 \ub0b4\uc6a9\uc740 \uba85\ud655 \ud569\ub2c8\ub2e4. \uc138\uac1c\uc758 \ud3b8\uc9d1 \uac00\ub2a5\ud55c \uce78\uc744 \ub2f4\ub2f9\ud558\ub294 \ucee8\ud2b8\ub864\ub7ec\uc758 isNotEmpty Property\ub97c \ud1b5\ud574\uc11c, \ube48 \uce78\uc778\uc9c0 \ud655\uc778\ud558\uace0, \ube48 \uce78\uc774 \uc544\ub2c8\ub77c\uba74 \uc784\uc2dc \uac12\uc778 progress\uc5d0 1\/3\uc758 \uac12\uc744 \ucd94\uac00 \ud569\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \uc774 \uac12\uc744 LinearProgressIndicator\uac00 \uad00\ub9ac\ud558\ub294 formProgress\uc5d0 \uc804\ub2ec\ud558\uc5ec LinearProgressIndicator\uc758 \ubaa8\uc591\uc774 \ubc14\ub00c\ub3c4\ub85d \ud569\ub2c8\ub2e4. \uc774\ub54c, setState() Method\uc548\uc5d0\uc11c formProgress\ub97c \uc124\uc815\ud558\ub294\ub370, setState()\ub294 \uc55e\uc11c Flutter\uc758 \ub0b4\uc6a9\uc744 \uc124\uba85\ud560 \ub54c, \ud654\uba74\uc744 \uc5c5\ub370\uc774\ud2b8 \ud558\ub3c4\ub85d \uc720\ub3c4 \ud55c\ub2e4\ub294 \ubd80\ubd84\uc744 \ub2e4\uc2dc \ud55c\ubc88 \ub9ac\ub9c8\uc778\ub4dc \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
void _updateFormProgress() {\n   var progress = 0.0;\n   var controllers = [\n     _firstNameTextController,\n     _lastNameTextController,\n     _usernameTextController\n   ];\n for (var controller in controllers) {\n     if (controller.value.text.isNotEmpty) {\n       progress += 1 \/ controllers.length;\n     }\n   }\n setState(() {\n     _formProgress = progress;\n   });\n }<\/pre>\n\n\n\n
\ub2e4\uc74c\uc5d0 \ud560 \uc77c\uc740 updateFormProgress() Method\uac00 \uce78\uc5d0 \uae00\uc744 \uc785\ub825\ud558\uac70\ub098 \uc0ad\uc81c\ud558\ub294 \ud65c\ub3d9\uc774 \ubc1c\uc0dd \ud588\uc744\ub54c, \uc790\ub3d9\uc73c\ub85c \ud638\ucd9c\ub418\ub3c4\ub85d \ud558\ub294 \uac83 \uc785\ub2c8\ub2e4. \uc774\ub294 LoginFormState \ud074\ub798\uc2a4\uc758 build() \uba54\uc18c\ub4dc\uc5d0\uc11c \ub9ac\ud134\ub418\ub294 Form() \ub0b4\uc758 onChanged Property \uac12\uc5d0 updateFormProgress()\ub97c \uc804\ub2ec\ud558\ub294 \uac83\uc73c\ub85c \uac00\ub2a5\ud569\ub2c8\ub2e4. \uc989, Form \uc548\uc758 \uce78\uc5d0 \uac12\uc774 \uc785\ub825\/\uc0ad\uc81c \ub418\uc5b4 \ubcc0\uacbd\uc774 \ubc1c\uc0dd\ud558\uba74, updateFormProgress()\n\ud568\uc218\uac00 \uc790\ub3d9 \ud638\ucd9c \ub418\ub3c4\ub85d \ud558\ub294 \uac83 \uc785\ub2c8\ub2e4. \ub530\ub77c\uc11c Form()\uc758 \uccab\ubc88\uc9f8 \uc904\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \ucd94\uac00 \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
onChanged: () => _updateFormProgress(), <\/pre>\n\n\n\n
\ub9c8\uc9c0\ub9c9\uc73c\ub85c \uce78\uc774 \ubaa8\ub450 \ucc44\uc6cc\uc84c\ub294\uc9c0 \uc544\ub2cc\uc9c0\uc5d0 \ub300\ud55c \ud310\ub2e8\uc744 \ud560 \uc218 \uc788\uac8c \ub418\uc5c8\uc73c\ubbc0\ub85c, \uce78\uc774 \ucc44\uc6cc\uc9c0\uba74 Welcome \ud654\uba74\uc73c\ub85c \ub118\uc5b4\uac00\uc9c0\ub9cc, \ube48\uce78\uc774 \uc788\ub2e4\uba74 Welcome \ud654\uba74\uc73c\ub85c \ub118\uc5b4\uac00\uc9c0 \uc54a\ub3c4\ub85d \ud558\ub294 \uae30\ub2a5\uc744 \ucd94\uac00\ub85c \uc791\uc131\ud558\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4. \uc774\ub294 \ub9e4\uc6b0 \ub2e8\uc21c\ud558\uac8c, \uc791\uc5c5\uc744 \ub9c8\uce58\uace0 \ub204\ub974\ub294 FlatButton\uc758 onPressed Property\ub97c \ub2e4\uc74c\uacfc \uac19\uc774 \ubcc0\uacbd\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
onPressed: _formProgress == 1 ? _showWelcomeScreen : null, <\/pre>\n\n\n\n
\uc774\ub294 formProgress\uac00 1\uc774\uba74 showWelcomeScreen Method\ub97c \uc2e4\ud589\ud558\uace0, 1\uc774 \uc544\ub2c8\uba74 \uc544\ubb34\ub7f0 \ub3d9\uc791\uc744 \ud558\uc9c0 \ub9d0\ub77c\ub294 \uc758\ubbf8\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n
\uc774\uc81c Step.2\uc758 \ubaa8\ub4e0 \uc791\uc5c5\uc744 \ub9c8\ucce4\uc73c\ubbc0\ub85c, \u201cflutter run\n-d Chrome\u201d\uc73c\ub85c \uc218\uc815\ub41c \ud504\ub85c\uadf8\ub7a8\uc744 \uc2e4\ud589\ud558\uace0, \uc218\uc815\ub41c \ub0b4\uc6a9\uc744 \ud655\uc778\ud574 \ubd05\ub2c8\ub2e4. <\/p>\n\n\n\n
\uc774\ub807\uac8c \uc218\uc815\ud55c main.dart\ub294 darttutorial-41-main-step-2.dart\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\/\/ Source: https:\/\/flutter.dev\/docs\/get-started\/codelab-web\n\nimport 'package:flutter\/material.dart';\n\nvoid main() => runApp(LoginApp());\n\nclass LoginApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      routes: {\n        '\/': (context) => LoginScreen(),\n        '\/welcome': (context) => WelcomeScreen(),\n      },\n    );\n  }\n}\n\nclass LoginScreen extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      backgroundColor: Colors.grey[200],\n      body: Center(\n        child: SizedBox(\n          width: 400,\n          child: Card(\n            child: LoginForm(),\n          ),\n        ),\n      ),\n    );\n  }\n}\n\nclass LoginForm extends StatefulWidget {\n  @override\n  _LoginFormState createState() => _LoginFormState();\n}\n\nclass _LoginFormState extends State<LoginForm> {\n  final _firstNameTextController = TextEditingController();\n  final _lastNameTextController = TextEditingController();\n  final _usernameTextController = TextEditingController();\n\n  double _formProgress = 0;\n\n  void _showWelcomeScreen() {\n    Navigator.of(context).pushNamed('\/welcome');\n  }\n\n  void _updateFormProgress() {\n    var progress = 0.0;\n    var controllers = [\n      _firstNameTextController,\n      _lastNameTextController,\n      _usernameTextController\n    ];\n\n    for (var controller in controllers) {\n      if (controller.value.text.isNotEmpty) {\n        progress += 1 \/ controllers.length;\n      }\n    }\n\n    setState(() {\n      _formProgress = progress;\n    });\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Form(\n      onChanged: () => _updateFormProgress(),\n      child: Column(\n        mainAxisSize: MainAxisSize.min,\n        children: [\n          LinearProgressIndicator(value: _formProgress),\n          Text('Sign Up',\n              style: Theme.of(context)\n                  .textTheme\n                  .display1), \/\/ display1 changes to headline4 in 1.16\n          Padding(\n            padding: EdgeInsets.all(8.0),\n            child: TextFormField(\n              controller: _firstNameTextController,\n              decoration: InputDecoration(hintText: 'First name'),\n            ),\n          ),\n          Padding(\n            padding: EdgeInsets.all(8.0),\n            child: TextFormField(\n              controller: _lastNameTextController,\n              decoration: InputDecoration(hintText: 'Last name'),\n            ),\n          ),\n          Padding(\n            padding: EdgeInsets.all(8.0),\n            child: TextFormField(\n              controller: _usernameTextController,\n              decoration: InputDecoration(hintText: 'Username'),\n            ),\n          ),\n          FlatButton(\n            color: Colors.blue,\n            textColor: Colors.white,\n            onPressed:\n                _formProgress == 1 ? _showWelcomeScreen : null, \n            child: Text('Sign up'),\n          ),\n        ],\n      ),\n    );\n  }\n}\n\nclass WelcomeScreen extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      body: Center(\n        child: Text('Welcome!', style: Theme.of(context).textTheme.display3),\n      ),\n    );\n  }\n}<\/pre>\n\n\n\n
\ub9c8\ubb34\ub9ac<\/h4>\n\n\n\n
\uacf5\uc2dd \uc0ac\uc774\ud2b8\uc5d0\ub294 \ucd94\uac00\uc801\uc73c\ub85c progress indicator\uc5d0 \uc560\ub2c8\uba54\uc774\uc158 \ud6a8\uacfc\ub97c \ucd94\uac00\ud558\ub294 \uc608\uc81c\uae4c\uc9c0 \ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uac1c\uc778\uc801\uc73c\ub85c \uc560\ub2c8\uba54\uc774\uc158\uc5d0\ub294 \ud070 \ud765\ubbf8\uac00 \uc5c6\uae30\uc5d0 \uc774 \ubd80\ubd84\uc740 \ubcf8 \uae00\uc5d0\uc11c\ub294 \ub2e4\ub8e8\uc9c0 \uc54a\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\uc774\ubc88 \uae00\uc5d0\uc11c \uc5b4\ub5a4 \ubd80\ubd84\uc744 \ub290\ub084\uc218 \uc788\uc744\uae4c\uc694? Web \ube0c\ub77c\uc6b0\uc800 \ud654\uba74\uc744 \ucc44\uc6b0\uace0 \uc788\uc9c0\ub9cc, HTML\/CSS\/JS\uc5d0 \ub300\ud55c \uc804\ubb38 \uc9c0\uc2dd\uc774 \uadf8\ub2e4\uc9c0 \ud544\uc694\ud558\uc9c0 \uc54a\uc740 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \ubaa8\ubc14\uc77c \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud558\ub294 \uac83\uacfc \ub3d9\uc77c\ud558\uac8c \uac1c\ubc1c\uc774 \ub418\ub294 \uac83\uc744 \uc54c \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub807\uac8c \ud50c\ub7ab\ud3fc\uc774 \ub2e4\ub974\ub354\ub77c\ub3c4 \uac19\uc740 \uae30\uc220\uc744 \uc0ac\uc6a9\ud558\uc5ec Web \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud558\ub294 \uac83\uc774 \uac00\ub2a5\ud55c \ub9e4\ub825\uc744, Dart\/Flutter \uac1c\ubc1c \ud658\uacbd\uc740 \uc81c\uacf5\ud558\uace0 \uc788\uc2b5\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":"
< Web \uac1c\ubc1c \u2013 Flutter for Web : Login UI Example > \uc9c0\uae08\uae4c\uc9c0 Flutter for Web\ub97c \uac1c\ubc1c\ud558\uae30 \uc704\ud558\uc5ec, \uae30\uc220\uc758 \uc5f0\ud601\uacfc \ub3c4\uad6c \uc124\uce58, \uadf8\ub9ac\uace0 \uac04\ub2e8\ud55c \uc608\uc81c \ud504\ub85c\uadf8\ub7a8\uc744 \uc2e4\ud589\ud558\uace0 \uc774\ud574\ud558\uc5ec \ubcf4\uc558\uc2b5\ub2c8\ub2e4. \uc55e\uc11c …<\/p>\n","protected":false},"author":1,"featured_media":0,"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":[15],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/posts\/1086"}],"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=1086"}],"version-history":[{"count":3,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/posts\/1086\/revisions"}],"predecessor-version":[{"id":1100,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/posts\/1086\/revisions\/1100"}],"wp:attachment":[{"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/media?parent=1086"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/categories?post=1086"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/tags?post=1086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}