Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang ta s\u1ebd b\u1eaft \u0111\u1ea7u h\u1ecdc c\u00e1ch t\u1ea1o ra m\u1ed9t \u1ee9ng d\u1ee5ng ban \u0111\u1ea7u c\u01a1 b\u1ea3n th\u00f4i b\u1eb1ng Android Studio \u0111\u1ec3 c\u00f3 th\u1ec3 hi\u1ec3u \u0111\u01b0\u1ee3c m\u1ed9t \u1ee9ng d\u1ee5ng Flutter s\u1ebd code v\u00e0 ch\u1ea1y nh\u01b0 th\u1ebf n\u00e0o nh\u00e9.<\/p>\n

Ch\u00fang ta h\u00e3y b\u1eaft \u0111\u1ea7u b\u1eb1ng m\u1ed9t \u1ee9ng d\u1ee5ng \u0111\u01a1n gi\u1ea3n, c\u00f9ng l\u00e0m theo 10 b\u01b0\u1edbc sau \u0111\u00e2y:<\/p>\n

B\u01b0\u1edbc 1:<\/strong> Sau khi \u0111\u00e3 c\u00e0i \u0111\u1eb7t \u1ee9ng d\u1ee5ng Android Studio, c\u00e1c b\u1ea1n h\u00e3y m\u1edf n\u00f3 ra n\u00e0o.<\/p>\n

\n
T\u1ea1o m\u1edbi \u1ee9ng d\u1ee5ng Flutter<\/figcaption><\/figure>\n<\/div>\n
B\u01b0\u1edbc 3:<\/strong> Trong c\u00e1c b\u01b0\u1edbc ti\u00eap theo, b\u1ea1n c\u1ea7n ph\u1ea3i l\u1ef1a ch\u1ecdn Flutter Application<\/strong>. Nh\u00ecnh h\u00ecnh d\u01b0\u1edbi \u0111\u00e2y \u0111\u1ec3 ch\u1ecdn nh\u01b0 sau: Flutter Application-> click Next.<\/p>\n
Ch\u1ecd ti\u1ebfp Flutter Application<\/figcaption><\/figure>\n
B\u01b0\u1edbc 4:<\/strong> Ti\u1ebfp theo, c\u1ea5u h\u00ecnh th\u00f4ng tin chi ti\u1ebft \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n nh\u01b0 h\u00ecnh d\u01b0\u1edbi \u0111\u00e2y, sao \u0111\u00f3 b\u1ea7m v\u00e0o n\u00fat Next<\/strong> nh\u00e9.<\/p>\n
Project Name:<\/strong> \u0110i\u1ec1n t\u00ean \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n v\u00f4.<\/p>\n
Flutter SDK Path:<\/strong> <path_to_flutter_sdk><\/p>\n
Project Location:<\/strong> <path_to_project_folder><\/p>\n
Descriptions:<\/strong> M\u1ed9t ch\u00fat\u00a0m\u00f4\u00a0t\u1ea3\u00a0v\u1ec1\u00a0\u1ee9ng\u00a0d\u1ee5ng\u00a0c\u1ee7a\u00a0b\u1ea1n<\/p>\n
Nh\u1eadp th\u00f4ng tin \u1ee9ng d\u1ee5ng<\/figcaption><\/figure>\n
B\u01b0\u1edbc 5: <\/strong>Trong b\u01b0\u1edbc c\u1ea5u h\u00ecnh ti\u1ebfp theo, b\u1ea1n c\u00f3 th\u1ec3 nh\u1eadp th\u00f4ng tin domain website c\u00f4ng ty c\u1ee7a b\u1ea1n nh\u01b0 h\u00ecnh d\u01b0\u1edbi r\u1ed3i b\u1ea5m n\u00fat Finish nh\u00e9.<\/p>\n
nh\u1eadp th\u00f4ng tin domain website c\u00f4ng ty c\u1ee7a b\u1ea1n<\/figcaption><\/figure>\n
Sau khi b\u1ea5m n\u00fat Finish, ch\u00fang\u00a0ta\u00a0ng\u1ed3i\u00a0ch\u1edd\u00a0\u1ee9ng\u00a0d\u1ee5ng\u00a0m\u1edbi\u00a0\u0111\u01b0\u1ee3c\u00a0t\u1ea1o\u00a0ra. Khi\u00a0project\u00a0m\u1edbi\u00a0\u0111\u01b0\u1ee3c\u00a0t\u1ea1o\u00a0ra, b\u1ea1n\u00a0s\u1ebd\u00a0nh\u00ecn\u00a0th\u1ea5y\u00a0\u0111\u1ea7y\u00a0\u0111\u1ee7\u00a0c\u00e1c\u00a0t\u00ednh\u00a0n\u0103ng\u00a0\u0111\u1ec3\u00a0l\u00e0m\u00a0vi\u1ec7c\u00a0v\u1edbi \u1ee9ng d\u1ee5ng.<\/p>\n
\u1ee8ng d\u1ee5ng Flutter m\u1edbi \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea1o ra<\/figcaption><\/figure>\n
B\u01b0\u1edbc 6:<\/strong> B\u00e2y gi\u1edd b\u1ea1n h\u00e3y ki\u1ec3m tra xem c\u1ea5u tr\u00fac c\u1ee7a m\u1ed9t d\u1ef1 \u00e1n Flutter xem n\u00f3 nh\u01b0 th\u1ebf n\u00e0o nh\u00e9. \u1ede h\u00ecnh d\u01b0\u1edbi \u0111\u00e2y, b\u1ea1n c\u00f3 th\u1ec3 nh\u00ecn th\u1ea5y c\u1ea5u tr\u00fac c\u00e2y th\u01b0 m\u1ee5c, c\u00e1c component c\u1ee7a \u1ee9ng d\u1ee5ng Flutter s\u1ebd nh\u01b0 th\u1ebf n\u00e0o.<\/p>\n
T\u1ed5 ch\u1ee9c th\u01b0 m\u1ee5c c\u1ee7a m\u1ed9t \u1ee9ng d\u1ee5ng Flutter<\/figcaption><\/figure>\n
.idea:<\/strong> Th\u01b0 m\u1ee5c n\u00e0y n\u1eb1m tr\u00ean c\u00f9ng nh\u1ea5t c\u1ee7a \u1ee9ng d\u1ee5ng, n\u00f3 ch\u1ee9a th\u00f4ng tin c\u1ea5u h\u00ecnh cho Android Studio. N\u00f3 c\u0169ng kh\u00f4ng quan tr\u1ecdng trong vi\u1ec7c vi\u1ebft \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n \u0111\u00e2u. K\u1ec7 x\u1eeb n\u00f3 \u0111i nh\u00e9.<\/p>\n
.android:<\/strong> Th\u01b0 m\u1ee5c n\u00e0y ch\u1ee9a d\u1ef1 \u00e1n Android ho\u00e0n ch\u1ec9nh v\u00e0 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng khi m\u00e0 ch\u00fang ta build \u1ee9ng d\u1ee5ng Flutter cho Android nh\u00e9. Khi ch\u00fang ta compie code c\u1ee7a Flutter theo native code, n\u00f3 s\u1ebd t\u1ea1o ra trong \u1ee9ng d\u1ee5ng Android n\u00e0y m\u1ed9t k\u1ebft qu\u1ea3 l\u00e0 m\u1ed9t \u1ee9ng d\u1ee5ng native Android. V\u00ed d\u1ee5: Khi b\u1ea1n \u0111ang s\u1eed d\u1ee5ng Android emulator, th\u00ec c\u00e1i \u1ee9ng d\u1ee5ng Android b\u1ea1n \u0111ang vi\u1ebft \u1ea5y, n\u00f3 s\u1ebd t\u1ea1o ra m\u1ed9t c\u00e1i app ngon l\u00e0nh, c\u00e1i \u1ee9ng\u00a0d\u1ee5ng\u00a0n\u00e0y \u0111\u01b0\u1ee3c t\u1ea1o b\u1edfi Android Vitrual Device.<\/p>\n
.ios:<\/strong> T\u01b0\u01a1ng t\u1ef1, th\u01b0 m\u1ee5c n\u00e0y ch\u1ee9a d\u1ef1 \u00e1n Mac ho\u00e0n ch\u1ec9nh v\u00e0 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng khi b\u1ea1n build \u1ee9ng d\u1ee5ng Flutter cho iOS. M\u00e3 code khi \u0111\u01b0\u1ee3c bi\u00ean d\u1ecbch ra ki\u1ec3u native code. N\u00f3 s\u1ebd t\u1ea1o ra trong c\u00e1i d\u1ef1 \u00e1n iOS m\u1ed9t k\u1ebft qu\u1ea3 native l\u00e0 m\u1ed9t \u1ee9ng d\u1ee5ng iOS. Mu\u1ed1n tao ra m\u1ed9t d\u1ee9ng d\u1ee5ng Flutter cho iOS th\u00ec ch\u1ec9 c\u00f3 th\u1ec3 l\u00e0m vi\u1ec7c tr\u00ean m\u00e1y Mac th\u00f4i nh\u00e9.<\/p>\n
.lib:<\/strong> Th\u01b0 m\u1ee5c n\u00e0y c\u1ef1c quan tr\u1ecdng, n\u00f3 ch\u1ee9a c\u00e1c library. 99% l\u00e0 ch\u00fang ta s\u1ebd l\u00e0m vi\u1ec7c tr\u00ean th\u01b0 m\u1ee5c n\u00e0y nh\u00e9 c\u00e1c b\u1ea1n. Th\u00ec b\u00ean trong th\u01b0 m\u1ee5c n\u00e0y, b\u1ea1n c\u00f3 th\u1ec3 t\u00ecm th\u1ea5y c\u00e1c file Dart, m\u00e0 Dart l\u00e0 ng\u00f4n ng\u1eef \u0111\u1ec3 ch\u00fang ta x\u00e2y d\u1ef1ng \u1ee9ng d\u1ee5ng. M\u1eb7c \u0111\u1ecbnh ch\u00fang ta s\u1ebd c\u00f3 m\u1ed9t file main.dart nh\u00e9, c\u00e1i file n\u00e0y l\u00e0 c\u1ee7a Flutter t\u1ef1 t\u1ea1o ra.<\/p>\n
.test:<\/strong> Th\u01b0 m\u1ef1c n\u00e0y c\u0169ng ch\u1ee9a code Dart, n\u00f3 c\u00f3 nhi\u1ec7m v\u1ee5 ki\u1ec3m tra ch\u1ea5t l\u01b0\u1ee3ng, \u0111\u1ed9 ch\u1ecbu t\u1ea3i c\u1ee7a app m\u1ed9t c\u00e1c t\u1ef1 \u0111\u1ed9ng. Th\u01b0 m\u1ee5c n\u00e0y c\u0169ng kh\u00f4ng ph\u1ea3i l\u00e0 qu\u00e1 quan tr\u1ecdng nh\u00e9.<\/p>\n
Ch\u00fang ta c\u00f3 th\u1ec3 c\u00f3 r\u1ea5t nhi\u1ec1u file m\u1eb7c \u0111\u1ecbnh trong m\u1ed9t d\u1ef1 \u00e1n Flutter. 99.99% l\u00e0 ch\u00fang ta b\u1ecf m\u1eb7c n\u00f3 m\u00e0 ko h\u1ec1 ng\u00f3 ng\u00e0ng g\u00ec t\u1edbi. Nh\u1eefng t\u1ec7p \u0111\u00f3 nh\u01b0 sau:<\/p>\n
.gitignore:<\/strong> N\u00f3 l\u00e0 m\u1ed9t t\u1ec7p v\u0103n b\u1ea3n ch\u1ee9a danh s\u00e1ch c\u00e1c t\u1ec7p, ph\u1ea7n m\u1edf r\u1ed9ng t\u1ec7p v\u00e0 th\u01b0 m\u1ee5c cho Git bi\u1ebft t\u1ec7p n\u00e0o n\u00ean \u0111\u01b0\u1ee3c b\u1ecf qua trong m\u1ed9t d\u1ef1 \u00e1n. Git l\u00e0 m\u1ed9t t\u1ec7p ki\u1ec3m so\u00e1t phi\u00ean b\u1ea3n \u0111\u1ec3 theo d\u00f5i c\u00e1c thay \u0111\u1ed5i trong m\u00e3 ngu\u1ed3n trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n ph\u1ea7n m\u1ec1m Git.<\/p>\n
.metadata:<\/strong> N\u00f3 l\u00e0 m\u1ed9t t\u1ec7p \u0111\u01b0\u1ee3c t\u1ea1o t\u1ef1 \u0111\u1ed9ng b\u1edfi c\u00e1c c\u00f4ng c\u1ee5 Flutter, \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 theo d\u00f5i c\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a d\u1ef1 \u00e1n Flutter. T\u1ec7p n\u00e0y th\u1ef1c hi\u1ec7n c\u00e1c t\u00e1c v\u1ee5 n\u1ed9i b\u1ed9, v\u00ec v\u1eady b\u1ea1n kh\u00f4ng c\u1ea7n ph\u1ea3i ch\u1ec9nh s\u1eeda n\u1ed9i dung theo c\u00e1ch th\u1ee7 c\u00f4ng b\u1ea5t c\u1ee9 l\u00fac n\u00e0o.<\/p>\n
.packages:<\/strong> \u0110\u00e2y l\u00e0 m\u1ed9t t\u1ec7p \u0111\u01b0\u1ee3c t\u1ea1o t\u1ef1 \u0111\u1ed9ng b\u1edfi Flutter SDK, \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 ch\u1ee9a danh s\u00e1ch c\u00e1c ph\u1ee5 thu\u1ed9c cho d\u1ef1 \u00e1n Flutter c\u1ee7a b\u1ea1n.<\/p>\n
flutter_demoapp.iml:<\/strong> N\u00f3 lu\u00f4n \u0111\u01b0\u1ee3c \u0111\u1eb7t t\u00ean theo t\u00ean c\u1ee7a d\u1ef1 \u00e1n Flutter ch\u1ee9a c\u00e1c c\u00e0i \u0111\u1eb7t b\u1ed5 sung c\u1ee7a d\u1ef1 \u00e1n. T\u1ec7p n\u00e0y th\u1ef1c hi\u1ec7n c\u00e1c t\u00e1c v\u1ee5 n\u1ed9i b\u1ed9, \u0111\u01b0\u1ee3c qu\u1ea3n l\u00fd b\u1edfi Flutter SDK, v\u00ec v\u1eady b\u1ea1n kh\u00f4ng c\u1ea7n ph\u1ea3i ch\u1ec9nh s\u1eeda n\u1ed9i dung theo c\u00e1ch th\u1ee7 c\u00f4ng b\u1ea5t c\u1ee9 l\u00fac n\u00e0o.<\/p>\n
pubspec.yaml:<\/strong> \u0110\u00f3 l\u00e0 t\u1ec7p c\u1ea5u h\u00ecnh c\u1ee7a d\u1ef1 \u00e1n s\u1ebd s\u1eed d\u1ee5ng r\u1ea5t nhi\u1ec1u trong qu\u00e1 tr\u00ecnh l\u00e0m vi\u1ec7c v\u1edbi d\u1ef1 \u00e1n Flutter. N\u00f3 cho ph\u00e9p b\u1ea1n c\u00e1ch \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n ho\u1ea1t \u0111\u1ed9ng. T\u1ec7p n\u00e0y ch\u1ee9a:<\/p>\n
\n
C\u00e0i \u0111\u1eb7t chung c\u1ee7a d\u1ef1 \u00e1n nh\u01b0 t\u00ean, m\u00f4 t\u1ea3 v\u00e0 phi\u00ean b\u1ea3n c\u1ee7a d\u1ef1 \u00e1n.<\/li>\n
S\u1ef1 ph\u1ee5 thu\u1ed9c c\u1ee7a d\u1ef1 \u00e1n.<\/li>\n
N\u1ed9i dung d\u1ef1 \u00e1n (v\u00ed d\u1ee5: h\u00ecnh \u1ea3nh).<\/li>\n<\/ul>\n
pubspec.lock:<\/strong> N\u00f3 l\u00e0 m\u1ed9t t\u1ec7p \u0111\u01b0\u1ee3c t\u1ea1o t\u1ef1 \u0111\u1ed9ng d\u1ef1a tr\u00ean t\u1ec7p .yaml. N\u00f3 c\u00f3 thi\u1ebft l\u1eadp chi ti\u1ebft h\u01a1n v\u1ec1 t\u1ea5t c\u1ea3 c\u00e1c ph\u1ee5 thu\u1ed9c.<\/p>\n
README.md:<\/strong> N\u00f3 l\u00e0 m\u1ed9t t\u1ec7p \u0111\u01b0\u1ee3c t\u1ea1o t\u1ef1 \u0111\u1ed9ng ch\u1ee9a th\u00f4ng tin v\u1ec1 d\u1ef1 \u00e1n. Ch\u00fang t\u00f4i c\u00f3 th\u1ec3 ch\u1ec9nh s\u1eeda t\u1ec7p n\u00e0y n\u1ebfu ch\u00fang t\u00f4i mu\u1ed1n chia s\u1ebb th\u00f4ng tin v\u1edbi c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n.<\/p>\n
B\u01b0\u1edbc 7:<\/strong> L\u00e0m vi\u1ec7c v\u1edbi main.dart nh\u00e9, h\u00e3y th\u1eed thay \u0111o\u1ea1n\u00a0code\u00a0c\u00f3\u00a0s\u1eb5n\u00a0b\u1eb1ng \u0111o\u1ea1n code d\u01b0\u1edbi \u0111\u00e2y nh\u00e9 c\u00e1c b\u1ea1n.<\/p>\n
import 'package:flutter\/material.dart';\r\n \r\nvoid main() => runApp(MyApp());\r\n \r\nclass MyApp extends StatelessWidget {\r\n \/\/ This widget is the root of your application.\r\n @override\r\n Widget build(BuildContext context) {\r\n return MaterialApp(\r\n title: 'Hello World Demo Application',\r\n theme: ThemeData(\r\n primarySwatch: Colors.blue,\r\n ),\r\n home: MyHomePage(title: 'Home page'),\r\n );\r\n }\r\n}\r\nclass MyHomePage extends StatelessWidget {\r\n MyHomePage({Key key, this.title}) : super(key: key);\r\n final String title;\r\n \r\n @override\r\n Widget build(BuildContext context) {\r\n return Scaffold(\r\n appBar: AppBar(\r\n title: Text(this.title),\r\n ),\r\n body: Center(\r\n child:\r\n Text(\r\n 'Hello World',\r\n )\r\n ),\r\n );\r\n }\r\n}<\/code><\/pre>\nB\u01b0\u1edbc 8:<\/strong> H\u00e3y b\u1eaft \u0111\u1ea7u hi\u1ec3u c\u00e1c d\u00f2ng code tr\u00ean n\u00e0o.<\/p>\n \nD\u00f2ng 1<\/strong>\u00a0\u2212 import flutter package, t\u00ean l\u00e0\u00a0material<\/em>.\u00a0Material<\/strong>\u00a0l\u00e0 m\u1ed9t flutter package \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng theo Material design cho Android.<\/li>\n D\u00f2ng\u00a03<\/strong>\u00a0\u2212 l\u00e0 \u0111i\u1ec3m kh\u1edfi \u0111\u1ea7u c\u1ee7a Flutter application l\u00e0 h\u00e0m main c\u1ee7a \u1ee9ng d\u1ee5ng. Ph\u01b0\u01a1ng th\u1ee9c\u00a0runApp<\/em>\u00a0\u0111\u01b0\u1ee3c g\u1ecdi v\u00e0 truy\u1ec1n v\u00e0o \u0111\u1ed1i t\u01b0\u1ee3ng c\u1ee7a l\u1edbp\u00a0MyApp<\/em>. M\u1ee5c \u0111\u00edch ch\u00ednh c\u1ee7a ph\u01b0\u01a1ng th\u1ee9c\u00a0runApp<\/em>\u00a0l\u00e0 \u0111\u01b0a giao di\u1ec7n widget v\u00e0o hi\u1ec3n th\u1ecb tr\u00ean m\u00e0n h\u00ecnh.<\/li>\n D\u00f2ng 5-17<\/strong>\u00a0\u2212 Widget \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o UI (giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng) qua flutter framework.\u00a0StatelessWidget<\/em>\u00a0l\u00e0 m\u1ed9t widget, n\u00f3 kh\u00f4ng bao g\u1ed3m tr\u1ea1ng th\u00e1i n\u00e0o c\u1ee7a widget.\u00a0MyApp<\/em>\u00a0k\u1ebf th\u1eeba\u00a0StatelessWidget<\/em>\u00a0v\u00e0 ghi \u0111\u00e8 ph\u01b0\u01a1ng th\u1ee9c\u00a0build method<\/em>. M\u1ee5c \u0111\u00edch c\u1ee7a ph\u01b0\u01a1ng th\u1ee9c\u00a0build<\/em>\u00a0l\u00e0 t\u1ea1o m\u1ed9t ph\u1ea7n UI cho \u1ee9ng d\u1ee5ng. \u1ede \u0111\u00e2y, ph\u01b0\u01a1ng th\u1ee9c\u00a0build<\/em>\u00a0s\u1eed d\u1ee5ng\u00a0MaterialApp<\/em>, m\u1ed9t widget \u0111\u1ec3 t\u1ea1o layout UI g\u1ed1c cho \u1ee9ng d\u1ee5ng. Bao g\u1ed3m 3 th\u00e0nh ph\u1ea7n ch\u00ednh l\u00e0 \u2013\u00a0title (ti\u00eau \u0111\u1ec1), theme (ch\u1ee7 \u0111\u1ec1)<\/em>\u00a0v\u00e0\u00a0home (trang ch\u1ee7 hay ph\u1ea7n m\u00e0n h\u00ecnh)<\/em>.title<\/em>\u00a0l\u00e0 ti\u00eau \u0111\u1ec1 c\u1ee7a \u1ee9ng d\u1ee5ngtheme<\/em>\u00a0l\u00e0 ch\u1ee7 \u0111\u1ec1 c\u1ee7a widget. \u1ede \u0111\u00e2y, ch\u00fang ta set ch\u1ee7 \u0111\u1ec1 l\u00e0\u00a0blue<\/em>\u00a0\u0111\u00f3 l\u00e0 m\u00e0u s\u1eafc ch\u1ee7 \u0111\u1ea1o c\u1ee7a \u1ee9ng d\u1ee5ng th\u00f4ng qua class\u00a0ThemeData<\/em>\u00a0v\u00e0 c\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a n\u00f3 v\u00ed d\u1ee5\u00a0primarySwatch<\/em>.home ph\u1ea7n m\u00e0n h\u00ecnh c\u1ee7a \u1ee9ng d\u1ee5ng, n\u00f3 \u0111\u01b0\u1ee3c t\u1ea1o b\u1edfi m\u1ed9t widget kh\u00e1c,\u00a0MyHomePage<\/strong><\/li>\n D\u00f2ng 19 \u2013 38<\/strong>\u00a0\u2212\u00a0MyHomePage<\/em>\u00a0t\u01b0\u01a1ng t\u1ef1\u00a0MyApp<\/em>\u00a0ngo\u1ea1i tr\u1eeb n\u00f3 tr\u1ea3 v\u1ec1\u00a0Scaffold<\/em>\u00a0Widget.\u00a0Scaffold<\/em>\u00a0l\u00e0 m\u00f4t top level widget \u0111\u1ee9ng sau\u00a0MaterialApp<\/em>\u00a0widget \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o UI theo material design. N\u00f3 c\u00f3 hai thu\u1ed9c t\u00ednh quan tr\u1ecdng nh\u1ea5t l\u00e0\u00a0appBar<\/em>\u00a0\u0111\u1ec3 hi\u1ec3n th\u1ecb ph\u1ea7n \u0111\u1ea7u c\u1ee7a \u1ee9ng d\u1ee5ng v\u00e0 body \u0111\u1ec3 hi\u1ec3n th\u1ecb n\u00f4i dung ch\u00ednh c\u1ee7a \u1ee9ng d\u1ee5ng.\u00a0AppBar<\/em>\u00a0l\u00e0 m\u1ed9t widget kh\u00e1c \u0111\u1ec3 t\u1ea1o ph\u1ea7n \u0111\u1ea7u c\u1ee7a \u1ee9ng d\u1ee5ng v\u00e0 s\u1eed d\u1ee5ng c\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a\u00a0appBar<\/em>. Trong c\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a\u00a0body<\/em>, ch\u00fang ta s\u1eed d\u1ee5ng m\u1ed9t\u00a0Center<\/em>\u00a0widget, \u0111\u00e2y l\u00e0 m\u1ed9t widget con.\u00a0Text<\/em>\u00a0l\u00e0 m\u1ed9t widget cu\u1ed1i c\u00f9ng, ph\u1ed5 bi\u1ebfn \u0111\u1ec3 hi\u1ec3n th\u1ecb m\u1ed9t v\u0103n b\u1ea3n gi\u1eefa m\u00e0n h\u00ecnh<\/li>\n<\/ul>\nB\u01b0\u1edbc 9:<\/strong> B\u00e2y gi\u1edd th\u00ec b\u1ea1n c\u00f3 th\u1ec3 ch\u1ea1y tr\u01b0\u01a1ng ch\u00ecnh \u0111\u01b0\u1ee3c r\u1ed3i. H\u00ecnh b\u00ean d\u01b0\u1edbi \u0111\u00e2y h\u01b0\u1edbng d\u1eabn c\u00e1c b\u1ea1n ch\u1ea1y file main.dart, b\u1ea5m\u00a0v\u00f4 Run->Run main.dart.<\/p>\n Kh\u1edfi ch\u1ea1y \u1ee9ng d\u1ee5ng<\/figcaption><\/figure>\nB\u01b0\u1edbc 10:<\/strong> K\u1ebft qu\u1ea3 l\u00e0 ch\u00fang ta c\u00f3 d\u00f2ng ch\u1eef \u201cHello Word\u201d ra gi\u1eefa m\u00e0 h\u00ecnh.<\/p>\n \nK\u1ebft qu\u1ea3 ch\u1ea1y th\u1eed Flutter<\/figcaption><\/figure>\n<\/div>\n \nhttps:\/\/github.com\/yennq\/Flutter\/tree\/main\/lession1<\/a><\/p>\n Nh\u01b0 v\u1eady l\u00e0 c\u00e1c b\u1ea1n \u0111\u00e3 theo d\u00f5i 10 b\u01b0\u1edbc \u0111\u1ec3 c\u00f3 th\u1ec3 vi\u1ebft m\u1ed9t \u1ee9ng d\u1ee5ng nho\u00a0nh\u1ecf hi\u1ec3n th\u1ecb d\u00f2ng ch\u1eef ra gi\u1eefa m\u00e0n h\u00ecnh b\u1eb1ng Flutter<\/a> r\u1ed3i nh\u00e9. H\u00e3y th\u1eed th\u1ef1c hi\u1ec7n vi\u1ec7c n\u00e0y v\u00e0 xem ch\u1ea1y n\u00f3, b\u1ea1n s\u1ebd th\u1ea5y b\u1ea5t ng\u1edd l\u00e0 l\u00e0m mobile c\u0169ng \u0111\u01a1n gi\u1ea3n th\u00f4i.<\/p>\n Ch\u00fac\u00a0c\u00e1c\u00a0b\u1ea1n\u00a0th\u00e0nh\u00a0c\u00f4ng!<\/p>\n","protected":false},"excerpt":{"rendered":" Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang ta s\u1ebd b\u1eaft \u0111\u1ea7u h\u1ecdc c\u00e1ch t\u1ea1o ra m\u1ed9t \u1ee9ng d\u1ee5ng ban \u0111\u1ea7u c\u01a1 b\u1ea3n th\u00f4i b\u1eb1ng Android Studio \u0111\u1ec3 c\u00f3 th\u1ec3 hi\u1ec3u \u0111\u01b0\u1ee3c m\u1ed9t \u1ee9ng d\u1ee5ng Flutter s\u1ebd code v\u00e0 ch\u1ea1y nh\u01b0 th\u1ebf n\u00e0o nh\u00e9. https:\/\/github.com\/yennq\/Flutter\/tree\/main\/lession1 Ch\u00fang ta h\u00e3y b\u1eaft \u0111\u1ea7u b\u1eb1ng m\u1ed9t \u1ee9ng d\u1ee5ng \u0111\u01a1n gi\u1ea3n, c\u00f9ng l\u00e0m theo 10 b\u01b0\u1edbc sau \u0111\u00e2y: …<\/p>\n","protected":false},"author":1,"featured_media":51380,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[132],"tags":[],"blocks":[{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang ta s\u1ebd b\u1eaft \u0111\u1ea7u h\u1ecdc c\u00e1ch t\u1ea1o ra m\u1ed9t \u1ee9ng d\u1ee5ng ban \u0111\u1ea7u c\u01a1 b\u1ea3n th\u00f4i b\u1eb1ng Android Studio \u0111\u1ec3 c\u00f3 th\u1ec3 hi\u1ec3u \u0111\u01b0\u1ee3c m\u1ed9t \u1ee9ng d\u1ee5ng Flutter s\u1ebd code v\u00e0 ch\u1ea1y nh\u01b0 th\u1ebf n\u00e0o nh\u00e9.\r\n\r\nhttps:\/\/github.com\/yennq\/Flutter\/tree\/main\/lession1\r\n\r\nCh\u00fang ta h\u00e3y b\u1eaft \u0111\u1ea7u b\u1eb1ng m\u1ed9t \u1ee9ng d\u1ee5ng \u0111\u01a1n gi\u1ea3n, c\u00f9ng l\u00e0m theo 10 b\u01b0\u1edbc sau \u0111\u00e2y:\r\n\r\nB\u01b0\u1edbc 1:<\/strong> Sau khi \u0111\u00e3 c\u00e0i \u0111\u1eb7t \u1ee9ng d\u1ee5ng Android Studio, c\u00e1c b\u1ea1n h\u00e3y m\u1edf n\u00f3 ra n\u00e0o.\r\n\r\nB\u01b0\u1edbc 2:<\/strong> T\u1ea1o m\u1edbi m\u1ed9t \u1ee9ng d\u1ee5ng Flutter<\/a>. \u0110\u1ec3 t\u1ea1o m\u1edbi c\u00e1c b\u1ea1n l\u00e0m nh\u01b0 sau: File-> New->New Flutter Project. M\u1ed9t m\u00e0n h\u00ecnh nh\u01b0 sau s\u1ebd hi\u1ec3n th\u1ecb ra.\r\n \r\nT\u1ea1o m\u1edbi \u1ee9ng d\u1ee5ng Flutter<\/figcaption><\/figure>\r\n<\/div>\r\nB\u01b0\u1edbc 3:<\/strong> Trong c\u00e1c b\u01b0\u1edbc ti\u00eap theo, b\u1ea1n c\u1ea7n ph\u1ea3i l\u1ef1a ch\u1ecdn Flutter Application<\/strong>. Nh\u00ecnh h\u00ecnh d\u01b0\u1edbi \u0111\u00e2y \u0111\u1ec3 ch\u1ecdn nh\u01b0 sau: Flutter Application-> click Next.\r\nCh\u1ecd ti\u1ebfp Flutter Application<\/figcaption><\/figure>\r\nB\u01b0\u1edbc 4:<\/strong> Ti\u1ebfp theo, c\u1ea5u h\u00ecnh th\u00f4ng tin chi ti\u1ebft \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n nh\u01b0 h\u00ecnh d\u01b0\u1edbi \u0111\u00e2y, sao \u0111\u00f3 b\u1ea7m v\u00e0o n\u00fat Next<\/strong> nh\u00e9.\r\n\r\nProject Name:<\/strong> \u0110i\u1ec1n t\u00ean \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n v\u00f4.\r\n\r\nFlutter SDK Path:<\/strong> <path_to_flutter_sdk>\r\n\r\nProject Location:<\/strong> <path_to_project_folder>\r\n\r\nDescriptions:<\/strong> M\u1ed9t ch\u00fat\u00a0m\u00f4\u00a0t\u1ea3\u00a0v\u1ec1\u00a0\u1ee9ng\u00a0d\u1ee5ng\u00a0c\u1ee7a\u00a0b\u1ea1n\r\nNh\u1eadp th\u00f4ng tin \u1ee9ng d\u1ee5ng<\/figcaption><\/figure>\r\nB\u01b0\u1edbc 5: <\/strong>Trong b\u01b0\u1edbc c\u1ea5u h\u00ecnh ti\u1ebfp theo, b\u1ea1n c\u00f3 th\u1ec3 nh\u1eadp th\u00f4ng tin domain website c\u00f4ng ty c\u1ee7a b\u1ea1n nh\u01b0 h\u00ecnh d\u01b0\u1edbi r\u1ed3i b\u1ea5m n\u00fat Finish nh\u00e9.\r\nnh\u1eadp th\u00f4ng tin domain website c\u00f4ng ty c\u1ee7a b\u1ea1n<\/figcaption><\/figure>\r\nSau khi b\u1ea5m n\u00fat Finish, ch\u00fang\u00a0ta\u00a0ng\u1ed3i\u00a0ch\u1edd\u00a0\u1ee9ng\u00a0d\u1ee5ng\u00a0m\u1edbi\u00a0\u0111\u01b0\u1ee3c\u00a0t\u1ea1o\u00a0ra. Khi\u00a0project\u00a0m\u1edbi\u00a0\u0111\u01b0\u1ee3c\u00a0t\u1ea1o\u00a0ra, b\u1ea1n\u00a0s\u1ebd\u00a0nh\u00ecn\u00a0th\u1ea5y\u00a0\u0111\u1ea7y\u00a0\u0111\u1ee7\u00a0c\u00e1c\u00a0t\u00ednh\u00a0n\u0103ng\u00a0\u0111\u1ec3\u00a0l\u00e0m\u00a0vi\u1ec7c\u00a0v\u1edbi \u1ee9ng d\u1ee5ng.\r\n\u1ee8ng d\u1ee5ng Flutter m\u1edbi \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea1o ra<\/figcaption><\/figure>\r\nB\u01b0\u1edbc 6:<\/strong> B\u00e2y gi\u1edd b\u1ea1n h\u00e3y ki\u1ec3m tra xem c\u1ea5u tr\u00fac c\u1ee7a m\u1ed9t d\u1ef1 \u00e1n Flutter xem n\u00f3 nh\u01b0 th\u1ebf n\u00e0o nh\u00e9. \u1ede h\u00ecnh d\u01b0\u1edbi \u0111\u00e2y, b\u1ea1n c\u00f3 th\u1ec3 nh\u00ecn th\u1ea5y c\u1ea5u tr\u00fac c\u00e2y th\u01b0 m\u1ee5c, c\u00e1c component c\u1ee7a \u1ee9ng d\u1ee5ng Flutter s\u1ebd nh\u01b0 th\u1ebf n\u00e0o.\r\nT\u1ed5 ch\u1ee9c th\u01b0 m\u1ee5c c\u1ee7a m\u1ed9t \u1ee9ng d\u1ee5ng Flutter<\/figcaption><\/figure>\r\n.idea:<\/strong> Th\u01b0 m\u1ee5c n\u00e0y n\u1eb1m tr\u00ean c\u00f9ng nh\u1ea5t c\u1ee7a \u1ee9ng d\u1ee5ng, n\u00f3 ch\u1ee9a th\u00f4ng tin c\u1ea5u h\u00ecnh cho Android Studio. N\u00f3 c\u0169ng kh\u00f4ng quan tr\u1ecdng trong vi\u1ec7c vi\u1ebft \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n \u0111\u00e2u. K\u1ec7 x\u1eeb n\u00f3 \u0111i nh\u00e9.\r\n\r\n.android:<\/strong> Th\u01b0 m\u1ee5c n\u00e0y ch\u1ee9a d\u1ef1 \u00e1n Android ho\u00e0n ch\u1ec9nh v\u00e0 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng khi m\u00e0 ch\u00fang ta build \u1ee9ng d\u1ee5ng Flutter cho Android nh\u00e9. Khi ch\u00fang ta compie code c\u1ee7a Flutter theo native code, n\u00f3 s\u1ebd t\u1ea1o ra trong \u1ee9ng d\u1ee5ng Android n\u00e0y m\u1ed9t k\u1ebft qu\u1ea3 l\u00e0 m\u1ed9t \u1ee9ng d\u1ee5ng native Android. V\u00ed d\u1ee5: Khi b\u1ea1n \u0111ang s\u1eed d\u1ee5ng Android emulator, th\u00ec c\u00e1i \u1ee9ng d\u1ee5ng Android b\u1ea1n \u0111ang vi\u1ebft \u1ea5y, n\u00f3 s\u1ebd t\u1ea1o ra m\u1ed9t c\u00e1i app ngon l\u00e0nh, c\u00e1i \u1ee9ng\u00a0d\u1ee5ng\u00a0n\u00e0y \u0111\u01b0\u1ee3c t\u1ea1o b\u1edfi Android Vitrual Device.\r\n\r\n.ios:<\/strong> T\u01b0\u01a1ng t\u1ef1, th\u01b0 m\u1ee5c n\u00e0y ch\u1ee9a d\u1ef1 \u00e1n Mac ho\u00e0n ch\u1ec9nh v\u00e0 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng khi b\u1ea1n build \u1ee9ng d\u1ee5ng Flutter cho iOS. M\u00e3 code khi \u0111\u01b0\u1ee3c bi\u00ean d\u1ecbch ra ki\u1ec3u native code. N\u00f3 s\u1ebd t\u1ea1o ra trong c\u00e1i d\u1ef1 \u00e1n iOS m\u1ed9t k\u1ebft qu\u1ea3 native l\u00e0 m\u1ed9t \u1ee9ng d\u1ee5ng iOS. Mu\u1ed1n tao ra m\u1ed9t d\u1ee9ng d\u1ee5ng Flutter cho iOS th\u00ec ch\u1ec9 c\u00f3 th\u1ec3 l\u00e0m vi\u1ec7c tr\u00ean m\u00e1y Mac th\u00f4i nh\u00e9.\r\n\r\n.lib:<\/strong> Th\u01b0 m\u1ee5c n\u00e0y c\u1ef1c quan tr\u1ecdng, n\u00f3 ch\u1ee9a c\u00e1c library. 99% l\u00e0 ch\u00fang ta s\u1ebd l\u00e0m vi\u1ec7c tr\u00ean th\u01b0 m\u1ee5c n\u00e0y nh\u00e9 c\u00e1c b\u1ea1n. Th\u00ec b\u00ean trong th\u01b0 m\u1ee5c n\u00e0y, b\u1ea1n c\u00f3 th\u1ec3 t\u00ecm th\u1ea5y c\u00e1c file Dart, m\u00e0 Dart l\u00e0 ng\u00f4n ng\u1eef \u0111\u1ec3 ch\u00fang ta x\u00e2y d\u1ef1ng \u1ee9ng d\u1ee5ng. M\u1eb7c \u0111\u1ecbnh ch\u00fang ta s\u1ebd c\u00f3 m\u1ed9t file main.dart nh\u00e9, c\u00e1i file n\u00e0y l\u00e0 c\u1ee7a Flutter t\u1ef1 t\u1ea1o ra.\r\n\r\n.test:<\/strong> Th\u01b0 m\u1ef1c n\u00e0y c\u0169ng ch\u1ee9a code Dart, n\u00f3 c\u00f3 nhi\u1ec7m v\u1ee5 ki\u1ec3m tra ch\u1ea5t l\u01b0\u1ee3ng, \u0111\u1ed9 ch\u1ecbu t\u1ea3i c\u1ee7a app m\u1ed9t c\u00e1c t\u1ef1 \u0111\u1ed9ng. Th\u01b0 m\u1ee5c n\u00e0y c\u0169ng kh\u00f4ng ph\u1ea3i l\u00e0 qu\u00e1 quan tr\u1ecdng nh\u00e9.\r\n\r\nCh\u00fang ta c\u00f3 th\u1ec3 c\u00f3 r\u1ea5t nhi\u1ec1u file m\u1eb7c \u0111\u1ecbnh trong m\u1ed9t d\u1ef1 \u00e1n Flutter. 99.99% l\u00e0 ch\u00fang ta b\u1ecf m\u1eb7c n\u00f3 m\u00e0 ko h\u1ec1 ng\u00f3 ng\u00e0ng g\u00ec t\u1edbi. Nh\u1eefng t\u1ec7p \u0111\u00f3 nh\u01b0 sau:\r\n\r\n.gitignore:<\/strong> N\u00f3 l\u00e0 m\u1ed9t t\u1ec7p v\u0103n b\u1ea3n ch\u1ee9a danh s\u00e1ch c\u00e1c t\u1ec7p, ph\u1ea7n m\u1edf r\u1ed9ng t\u1ec7p v\u00e0 th\u01b0 m\u1ee5c cho Git bi\u1ebft t\u1ec7p n\u00e0o n\u00ean \u0111\u01b0\u1ee3c b\u1ecf qua trong m\u1ed9t d\u1ef1 \u00e1n. Git l\u00e0 m\u1ed9t t\u1ec7p ki\u1ec3m so\u00e1t phi\u00ean b\u1ea3n \u0111\u1ec3 theo d\u00f5i c\u00e1c thay \u0111\u1ed5i trong m\u00e3 ngu\u1ed3n trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n ph\u1ea7n m\u1ec1m Git.\r\n\r\n.metadata:<\/strong> N\u00f3 l\u00e0 m\u1ed9t t\u1ec7p \u0111\u01b0\u1ee3c t\u1ea1o t\u1ef1 \u0111\u1ed9ng b\u1edfi c\u00e1c c\u00f4ng c\u1ee5 Flutter, \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 theo d\u00f5i c\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a d\u1ef1 \u00e1n Flutter. T\u1ec7p n\u00e0y th\u1ef1c hi\u1ec7n c\u00e1c t\u00e1c v\u1ee5 n\u1ed9i b\u1ed9, v\u00ec v\u1eady b\u1ea1n kh\u00f4ng c\u1ea7n ph\u1ea3i ch\u1ec9nh s\u1eeda n\u1ed9i dung theo c\u00e1ch th\u1ee7 c\u00f4ng b\u1ea5t c\u1ee9 l\u00fac n\u00e0o.\r\n\r\n.packages:<\/strong> \u0110\u00e2y l\u00e0 m\u1ed9t t\u1ec7p \u0111\u01b0\u1ee3c t\u1ea1o t\u1ef1 \u0111\u1ed9ng b\u1edfi Flutter SDK, \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 ch\u1ee9a danh s\u00e1ch c\u00e1c ph\u1ee5 thu\u1ed9c cho d\u1ef1 \u00e1n Flutter c\u1ee7a b\u1ea1n.\r\n\r\nflutter_demoapp.iml:<\/strong> N\u00f3 lu\u00f4n \u0111\u01b0\u1ee3c \u0111\u1eb7t t\u00ean theo t\u00ean c\u1ee7a d\u1ef1 \u00e1n Flutter ch\u1ee9a c\u00e1c c\u00e0i \u0111\u1eb7t b\u1ed5 sung c\u1ee7a d\u1ef1 \u00e1n. T\u1ec7p n\u00e0y th\u1ef1c hi\u1ec7n c\u00e1c t\u00e1c v\u1ee5 n\u1ed9i b\u1ed9, \u0111\u01b0\u1ee3c qu\u1ea3n l\u00fd b\u1edfi Flutter SDK, v\u00ec v\u1eady b\u1ea1n kh\u00f4ng c\u1ea7n ph\u1ea3i ch\u1ec9nh s\u1eeda n\u1ed9i dung theo c\u00e1ch th\u1ee7 c\u00f4ng b\u1ea5t c\u1ee9 l\u00fac n\u00e0o.\r\n\r\npubspec.yaml:<\/strong> \u0110\u00f3 l\u00e0 t\u1ec7p c\u1ea5u h\u00ecnh c\u1ee7a d\u1ef1 \u00e1n s\u1ebd s\u1eed d\u1ee5ng r\u1ea5t nhi\u1ec1u trong qu\u00e1 tr\u00ecnh l\u00e0m vi\u1ec7c v\u1edbi d\u1ef1 \u00e1n Flutter. N\u00f3 cho ph\u00e9p b\u1ea1n c\u00e1ch \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n ho\u1ea1t \u0111\u1ed9ng. T\u1ec7p n\u00e0y ch\u1ee9a:\r\n\r\n \tC\u00e0i \u0111\u1eb7t chung c\u1ee7a d\u1ef1 \u00e1n nh\u01b0 t\u00ean, m\u00f4 t\u1ea3 v\u00e0 phi\u00ean b\u1ea3n c\u1ee7a d\u1ef1 \u00e1n.<\/li>\r\n \t S\u1ef1 ph\u1ee5 thu\u1ed9c c\u1ee7a d\u1ef1 \u00e1n.<\/li>\r\n \t N\u1ed9i dung d\u1ef1 \u00e1n (v\u00ed d\u1ee5: h\u00ecnh \u1ea3nh).<\/li>\r\n<\/ul>\r\npubspec.lock:<\/strong> N\u00f3 l\u00e0 m\u1ed9t t\u1ec7p \u0111\u01b0\u1ee3c t\u1ea1o t\u1ef1 \u0111\u1ed9ng d\u1ef1a tr\u00ean t\u1ec7p .yaml. N\u00f3 c\u00f3 thi\u1ebft l\u1eadp chi ti\u1ebft h\u01a1n v\u1ec1 t\u1ea5t c\u1ea3 c\u00e1c ph\u1ee5 thu\u1ed9c.\r\n\r\nREADME.md:<\/strong> N\u00f3 l\u00e0 m\u1ed9t t\u1ec7p \u0111\u01b0\u1ee3c t\u1ea1o t\u1ef1 \u0111\u1ed9ng ch\u1ee9a th\u00f4ng tin v\u1ec1 d\u1ef1 \u00e1n. Ch\u00fang t\u00f4i c\u00f3 th\u1ec3 ch\u1ec9nh s\u1eeda t\u1ec7p n\u00e0y n\u1ebfu ch\u00fang t\u00f4i mu\u1ed1n chia s\u1ebb th\u00f4ng tin v\u1edbi c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n.\r\n\r\nB\u01b0\u1edbc 7:<\/strong> L\u00e0m vi\u1ec7c v\u1edbi main.dart nh\u00e9, h\u00e3y th\u1eed thay \u0111o\u1ea1n\u00a0code\u00a0c\u00f3\u00a0s\u1eb5n\u00a0b\u1eb1ng \u0111o\u1ea1n code d\u01b0\u1edbi \u0111\u00e2y nh\u00e9 c\u00e1c b\u1ea1n.\r\nimport 'package:flutter\/material.dart';\r\n \r\nvoid main() => runApp(MyApp());\r\n \r\nclass MyApp extends StatelessWidget {\r\n \/\/ This widget is the root of your application.\r\n @override\r\n Widget build(BuildContext context) {\r\n return MaterialApp(\r\n title: 'Hello World Demo Application',\r\n theme: ThemeData(\r\n primarySwatch: Colors.blue,\r\n ),\r\n home: MyHomePage(title: 'Home page'),\r\n );\r\n }\r\n}\r\nclass MyHomePage extends StatelessWidget {\r\n MyHomePage({Key key, this.title}) : super(key: key);\r\n final String title;\r\n \r\n @override\r\n Widget build(BuildContext context) {\r\n return Scaffold(\r\n appBar: AppBar(\r\n title: Text(this.title),\r\n ),\r\n body: Center(\r\n child:\r\n Text(\r\n 'Hello World',\r\n )\r\n ),\r\n );\r\n }\r\n}<\/code><\/pre>\r\nB\u01b0\u1edbc 8:<\/strong> H\u00e3y b\u1eaft \u0111\u1ea7u hi\u1ec3u c\u00e1c d\u00f2ng code tr\u00ean n\u00e0o.\r\n\r\n \tD\u00f2ng 1<\/strong>\u00a0\u2212 import flutter package, t\u00ean l\u00e0\u00a0material<\/em>.\u00a0Material<\/strong>\u00a0l\u00e0 m\u1ed9t flutter package \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng theo Material design cho Android.<\/li>\r\n \t D\u00f2ng\u00a03<\/strong>\u00a0\u2212 l\u00e0 \u0111i\u1ec3m kh\u1edfi \u0111\u1ea7u c\u1ee7a Flutter application l\u00e0 h\u00e0m main c\u1ee7a \u1ee9ng d\u1ee5ng. Ph\u01b0\u01a1ng th\u1ee9c\u00a0runApp<\/em>\u00a0\u0111\u01b0\u1ee3c g\u1ecdi v\u00e0 truy\u1ec1n v\u00e0o \u0111\u1ed1i t\u01b0\u1ee3ng c\u1ee7a l\u1edbp\u00a0MyApp<\/em>. M\u1ee5c \u0111\u00edch ch\u00ednh c\u1ee7a ph\u01b0\u01a1ng th\u1ee9c\u00a0runApp<\/em>\u00a0l\u00e0 \u0111\u01b0a giao di\u1ec7n widget v\u00e0o hi\u1ec3n th\u1ecb tr\u00ean m\u00e0n h\u00ecnh.<\/li>\r\n \t D\u00f2ng 5-17<\/strong>\u00a0\u2212 Widget \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o UI (giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng) qua flutter framework.\u00a0StatelessWidget<\/em>\u00a0l\u00e0 m\u1ed9t widget, n\u00f3 kh\u00f4ng bao g\u1ed3m tr\u1ea1ng th\u00e1i n\u00e0o c\u1ee7a widget.\u00a0MyApp<\/em>\u00a0k\u1ebf th\u1eeba\u00a0StatelessWidget<\/em>\u00a0v\u00e0 ghi \u0111\u00e8 ph\u01b0\u01a1ng th\u1ee9c\u00a0build method<\/em>. M\u1ee5c \u0111\u00edch c\u1ee7a ph\u01b0\u01a1ng th\u1ee9c\u00a0build<\/em>\u00a0l\u00e0 t\u1ea1o m\u1ed9t ph\u1ea7n UI cho \u1ee9ng d\u1ee5ng. \u1ede \u0111\u00e2y, ph\u01b0\u01a1ng th\u1ee9c\u00a0build<\/em>\u00a0s\u1eed d\u1ee5ng\u00a0MaterialApp<\/em>, m\u1ed9t widget \u0111\u1ec3 t\u1ea1o layout UI g\u1ed1c cho \u1ee9ng d\u1ee5ng. Bao g\u1ed3m 3 th\u00e0nh ph\u1ea7n ch\u00ednh l\u00e0 \u2013\u00a0title (ti\u00eau \u0111\u1ec1), theme (ch\u1ee7 \u0111\u1ec1)<\/em>\u00a0v\u00e0\u00a0home (trang ch\u1ee7 hay ph\u1ea7n m\u00e0n h\u00ecnh)<\/em>.title<\/em>\u00a0l\u00e0 ti\u00eau \u0111\u1ec1 c\u1ee7a \u1ee9ng d\u1ee5ngtheme<\/em>\u00a0l\u00e0 ch\u1ee7 \u0111\u1ec1 c\u1ee7a widget. \u1ede \u0111\u00e2y, ch\u00fang ta set ch\u1ee7 \u0111\u1ec1 l\u00e0\u00a0blue<\/em>\u00a0\u0111\u00f3 l\u00e0 m\u00e0u s\u1eafc ch\u1ee7 \u0111\u1ea1o c\u1ee7a \u1ee9ng d\u1ee5ng th\u00f4ng qua class\u00a0ThemeData<\/em>\u00a0v\u00e0 c\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a n\u00f3 v\u00ed d\u1ee5\u00a0primarySwatch<\/em>.home ph\u1ea7n m\u00e0n h\u00ecnh c\u1ee7a \u1ee9ng d\u1ee5ng, n\u00f3 \u0111\u01b0\u1ee3c t\u1ea1o b\u1edfi m\u1ed9t widget kh\u00e1c,\u00a0MyHomePage<\/strong><\/li>\r\n \t D\u00f2ng 19 \u2013 38<\/strong>\u00a0\u2212\u00a0MyHomePage<\/em>\u00a0t\u01b0\u01a1ng t\u1ef1\u00a0MyApp<\/em>\u00a0ngo\u1ea1i tr\u1eeb n\u00f3 tr\u1ea3 v\u1ec1\u00a0Scaffold<\/em>\u00a0Widget.\u00a0Scaffold<\/em>\u00a0l\u00e0 m\u00f4t top level widget \u0111\u1ee9ng sau\u00a0MaterialApp<\/em>\u00a0widget \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o UI theo material design. N\u00f3 c\u00f3 hai thu\u1ed9c t\u00ednh quan tr\u1ecdng nh\u1ea5t l\u00e0\u00a0appBar<\/em>\u00a0\u0111\u1ec3 hi\u1ec3n th\u1ecb ph\u1ea7n \u0111\u1ea7u c\u1ee7a \u1ee9ng d\u1ee5ng v\u00e0 body \u0111\u1ec3 hi\u1ec3n th\u1ecb n\u00f4i dung ch\u00ednh c\u1ee7a \u1ee9ng d\u1ee5ng.\u00a0AppBar<\/em>\u00a0l\u00e0 m\u1ed9t widget kh\u00e1c \u0111\u1ec3 t\u1ea1o ph\u1ea7n \u0111\u1ea7u c\u1ee7a \u1ee9ng d\u1ee5ng v\u00e0 s\u1eed d\u1ee5ng c\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a\u00a0appBar<\/em>. Trong c\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a\u00a0body<\/em>, ch\u00fang ta s\u1eed d\u1ee5ng m\u1ed9t\u00a0Center<\/em>\u00a0widget, \u0111\u00e2y l\u00e0 m\u1ed9t widget con.\u00a0Text<\/em>\u00a0l\u00e0 m\u1ed9t widget cu\u1ed1i c\u00f9ng, ph\u1ed5 bi\u1ebfn \u0111\u1ec3 hi\u1ec3n th\u1ecb m\u1ed9t v\u0103n b\u1ea3n gi\u1eefa m\u00e0n h\u00ecnh<\/li>\r\n<\/ul>\r\nB\u01b0\u1edbc 9:<\/strong> B\u00e2y gi\u1edd th\u00ec b\u1ea1n c\u00f3 th\u1ec3 ch\u1ea1y tr\u01b0\u01a1ng ch\u00ecnh \u0111\u01b0\u1ee3c r\u1ed3i. H\u00ecnh b\u00ean d\u01b0\u1edbi \u0111\u00e2y h\u01b0\u1edbng d\u1eabn c\u00e1c b\u1ea1n ch\u1ea1y file main.dart, b\u1ea5m\u00a0v\u00f4 Run->Run main.dart.\r\nKh\u1edfi ch\u1ea1y \u1ee9ng d\u1ee5ng<\/figcaption><\/figure>\r\nB\u01b0\u1edbc 10:<\/strong> K\u1ebft qu\u1ea3 l\u00e0 ch\u00fang ta c\u00f3 d\u00f2ng ch\u1eef \u201cHello Word\u201d ra gi\u1eefa m\u00e0 h\u00ecnh.\r\n\r\nK\u1ebft qu\u1ea3 ch\u1ea1y th\u1eed Flutter<\/figcaption><\/figure>\r\n<\/div>\r\n\r\n \r\n\r\nhttps:\/\/github.com\/yennq\/Flutter\/tree\/main\/lession1<\/a>\r\n\r\nNh\u01b0 v\u1eady l\u00e0 c\u00e1c b\u1ea1n \u0111\u00e3 theo d\u00f5i 10 b\u01b0\u1edbc \u0111\u1ec3 c\u00f3 th\u1ec3 vi\u1ebft m\u1ed9t \u1ee9ng d\u1ee5ng nho\u00a0nh\u1ecf hi\u1ec3n th\u1ecb d\u00f2ng ch\u1eef ra gi\u1eefa m\u00e0n h\u00ecnh b\u1eb1ng Flutter<\/a> r\u1ed3i nh\u00e9. H\u00e3y th\u1eed th\u1ef1c hi\u1ec7n vi\u1ec7c n\u00e0y v\u00e0 xem ch\u1ea1y n\u00f3, b\u1ea1n s\u1ebd th\u1ea5y b\u1ea5t ng\u1edd l\u00e0 l\u00e0m mobile c\u0169ng \u0111\u01a1n gi\u1ea3n th\u00f4i.\r\nCh\u00fac\u00a0c\u00e1c\u00a0b\u1ea1n\u00a0th\u00e0nh\u00a0c\u00f4ng!<\/p>","innerContent":["Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang ta s\u1ebd b\u1eaft \u0111\u1ea7u h\u1ecdc c\u00e1ch t\u1ea1o ra m\u1ed9t \u1ee9ng d\u1ee5ng ban \u0111\u1ea7u c\u01a1 b\u1ea3n th\u00f4i b\u1eb1ng Android Studio \u0111\u1ec3 c\u00f3 th\u1ec3 hi\u1ec3u \u0111\u01b0\u1ee3c m\u1ed9t \u1ee9ng d\u1ee5ng Flutter s\u1ebd code v\u00e0 ch\u1ea1y nh\u01b0 th\u1ebf n\u00e0o nh\u00e9.\r\n\r\nhttps:\/\/github.com\/yennq\/Flutter\/tree\/main\/lession1\r\n\r\nCh\u00fang ta h\u00e3y b\u1eaft \u0111\u1ea7u b\u1eb1ng m\u1ed9t \u1ee9ng d\u1ee5ng \u0111\u01a1n gi\u1ea3n, c\u00f9ng l\u00e0m theo 10 b\u01b0\u1edbc sau \u0111\u00e2y:\r\n\r\nB\u01b0\u1edbc 1:<\/strong> Sau khi \u0111\u00e3 c\u00e0i \u0111\u1eb7t \u1ee9ng d\u1ee5ng Android Studio, c\u00e1c b\u1ea1n h\u00e3y m\u1edf n\u00f3 ra n\u00e0o.\r\n\r\nB\u01b0\u1edbc 2:<\/strong> T\u1ea1o m\u1edbi m\u1ed9t \u1ee9ng d\u1ee5ng Flutter<\/a>. \u0110\u1ec3 t\u1ea1o m\u1edbi c\u00e1c b\u1ea1n l\u00e0m nh\u01b0 sau: File-> New->New Flutter Project. M\u1ed9t m\u00e0n h\u00ecnh nh\u01b0 sau s\u1ebd hi\u1ec3n th\u1ecb ra.\r\n \r\nT\u1ea1o m\u1edbi \u1ee9ng d\u1ee5ng Flutter<\/figcaption><\/figure>\r\n<\/div>\r\nB\u01b0\u1edbc 3:<\/strong> Trong c\u00e1c b\u01b0\u1edbc ti\u00eap theo, b\u1ea1n c\u1ea7n ph\u1ea3i l\u1ef1a ch\u1ecdn Flutter Application<\/strong>. Nh\u00ecnh h\u00ecnh d\u01b0\u1edbi \u0111\u00e2y \u0111\u1ec3 ch\u1ecdn nh\u01b0 sau: Flutter Application-> click Next.\r\nCh\u1ecd ti\u1ebfp Flutter Application<\/figcaption><\/figure>\r\nB\u01b0\u1edbc 4:<\/strong> Ti\u1ebfp theo, c\u1ea5u h\u00ecnh th\u00f4ng tin chi ti\u1ebft \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n nh\u01b0 h\u00ecnh d\u01b0\u1edbi \u0111\u00e2y, sao \u0111\u00f3 b\u1ea7m v\u00e0o n\u00fat Next<\/strong> nh\u00e9.\r\n\r\nProject Name:<\/strong> \u0110i\u1ec1n t\u00ean \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n v\u00f4.\r\n\r\nFlutter SDK Path:<\/strong> <path_to_flutter_sdk>\r\n\r\nProject Location:<\/strong> <path_to_project_folder>\r\n\r\nDescriptions:<\/strong> M\u1ed9t ch\u00fat\u00a0m\u00f4\u00a0t\u1ea3\u00a0v\u1ec1\u00a0\u1ee9ng\u00a0d\u1ee5ng\u00a0c\u1ee7a\u00a0b\u1ea1n\r\nNh\u1eadp th\u00f4ng tin \u1ee9ng d\u1ee5ng<\/figcaption><\/figure>\r\nB\u01b0\u1edbc 5: <\/strong>Trong b\u01b0\u1edbc c\u1ea5u h\u00ecnh ti\u1ebfp theo, b\u1ea1n c\u00f3 th\u1ec3 nh\u1eadp th\u00f4ng tin domain website c\u00f4ng ty c\u1ee7a b\u1ea1n nh\u01b0 h\u00ecnh d\u01b0\u1edbi r\u1ed3i b\u1ea5m n\u00fat Finish nh\u00e9.\r\nnh\u1eadp th\u00f4ng tin domain website c\u00f4ng ty c\u1ee7a b\u1ea1n<\/figcaption><\/figure>\r\nSau khi b\u1ea5m n\u00fat Finish, ch\u00fang\u00a0ta\u00a0ng\u1ed3i\u00a0ch\u1edd\u00a0\u1ee9ng\u00a0d\u1ee5ng\u00a0m\u1edbi\u00a0\u0111\u01b0\u1ee3c\u00a0t\u1ea1o\u00a0ra. Khi\u00a0project\u00a0m\u1edbi\u00a0\u0111\u01b0\u1ee3c\u00a0t\u1ea1o\u00a0ra, b\u1ea1n\u00a0s\u1ebd\u00a0nh\u00ecn\u00a0th\u1ea5y\u00a0\u0111\u1ea7y\u00a0\u0111\u1ee7\u00a0c\u00e1c\u00a0t\u00ednh\u00a0n\u0103ng\u00a0\u0111\u1ec3\u00a0l\u00e0m\u00a0vi\u1ec7c\u00a0v\u1edbi \u1ee9ng d\u1ee5ng.\r\n\u1ee8ng d\u1ee5ng Flutter m\u1edbi \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea1o ra<\/figcaption><\/figure>\r\nB\u01b0\u1edbc 6:<\/strong> B\u00e2y gi\u1edd b\u1ea1n h\u00e3y ki\u1ec3m tra xem c\u1ea5u tr\u00fac c\u1ee7a m\u1ed9t d\u1ef1 \u00e1n Flutter xem n\u00f3 nh\u01b0 th\u1ebf n\u00e0o nh\u00e9. \u1ede h\u00ecnh d\u01b0\u1edbi \u0111\u00e2y, b\u1ea1n c\u00f3 th\u1ec3 nh\u00ecn th\u1ea5y c\u1ea5u tr\u00fac c\u00e2y th\u01b0 m\u1ee5c, c\u00e1c component c\u1ee7a \u1ee9ng d\u1ee5ng Flutter s\u1ebd nh\u01b0 th\u1ebf n\u00e0o.\r\nT\u1ed5 ch\u1ee9c th\u01b0 m\u1ee5c c\u1ee7a m\u1ed9t \u1ee9ng d\u1ee5ng Flutter<\/figcaption><\/figure>\r\n.idea:<\/strong> Th\u01b0 m\u1ee5c n\u00e0y n\u1eb1m tr\u00ean c\u00f9ng nh\u1ea5t c\u1ee7a \u1ee9ng d\u1ee5ng, n\u00f3 ch\u1ee9a th\u00f4ng tin c\u1ea5u h\u00ecnh cho Android Studio. N\u00f3 c\u0169ng kh\u00f4ng quan tr\u1ecdng trong vi\u1ec7c vi\u1ebft \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n \u0111\u00e2u. K\u1ec7 x\u1eeb n\u00f3 \u0111i nh\u00e9.\r\n\r\n.android:<\/strong> Th\u01b0 m\u1ee5c n\u00e0y ch\u1ee9a d\u1ef1 \u00e1n Android ho\u00e0n ch\u1ec9nh v\u00e0 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng khi m\u00e0 ch\u00fang ta build \u1ee9ng d\u1ee5ng Flutter cho Android nh\u00e9. Khi ch\u00fang ta compie code c\u1ee7a Flutter theo native code, n\u00f3 s\u1ebd t\u1ea1o ra trong \u1ee9ng d\u1ee5ng Android n\u00e0y m\u1ed9t k\u1ebft qu\u1ea3 l\u00e0 m\u1ed9t \u1ee9ng d\u1ee5ng native Android. V\u00ed d\u1ee5: Khi b\u1ea1n \u0111ang s\u1eed d\u1ee5ng Android emulator, th\u00ec c\u00e1i \u1ee9ng d\u1ee5ng Android b\u1ea1n \u0111ang vi\u1ebft \u1ea5y, n\u00f3 s\u1ebd t\u1ea1o ra m\u1ed9t c\u00e1i app ngon l\u00e0nh, c\u00e1i \u1ee9ng\u00a0d\u1ee5ng\u00a0n\u00e0y \u0111\u01b0\u1ee3c t\u1ea1o b\u1edfi Android Vitrual Device.\r\n\r\n.ios:<\/strong> T\u01b0\u01a1ng t\u1ef1, th\u01b0 m\u1ee5c n\u00e0y ch\u1ee9a d\u1ef1 \u00e1n Mac ho\u00e0n ch\u1ec9nh v\u00e0 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng khi b\u1ea1n build \u1ee9ng d\u1ee5ng Flutter cho iOS. M\u00e3 code khi \u0111\u01b0\u1ee3c bi\u00ean d\u1ecbch ra ki\u1ec3u native code. N\u00f3 s\u1ebd t\u1ea1o ra trong c\u00e1i d\u1ef1 \u00e1n iOS m\u1ed9t k\u1ebft qu\u1ea3 native l\u00e0 m\u1ed9t \u1ee9ng d\u1ee5ng iOS. Mu\u1ed1n tao ra m\u1ed9t d\u1ee9ng d\u1ee5ng Flutter cho iOS th\u00ec ch\u1ec9 c\u00f3 th\u1ec3 l\u00e0m vi\u1ec7c tr\u00ean m\u00e1y Mac th\u00f4i nh\u00e9.\r\n\r\n.lib:<\/strong> Th\u01b0 m\u1ee5c n\u00e0y c\u1ef1c quan tr\u1ecdng, n\u00f3 ch\u1ee9a c\u00e1c library. 99% l\u00e0 ch\u00fang ta s\u1ebd l\u00e0m vi\u1ec7c tr\u00ean th\u01b0 m\u1ee5c n\u00e0y nh\u00e9 c\u00e1c b\u1ea1n. Th\u00ec b\u00ean trong th\u01b0 m\u1ee5c n\u00e0y, b\u1ea1n c\u00f3 th\u1ec3 t\u00ecm th\u1ea5y c\u00e1c file Dart, m\u00e0 Dart l\u00e0 ng\u00f4n ng\u1eef \u0111\u1ec3 ch\u00fang ta x\u00e2y d\u1ef1ng \u1ee9ng d\u1ee5ng. M\u1eb7c \u0111\u1ecbnh ch\u00fang ta s\u1ebd c\u00f3 m\u1ed9t file main.dart nh\u00e9, c\u00e1i file n\u00e0y l\u00e0 c\u1ee7a Flutter t\u1ef1 t\u1ea1o ra.\r\n\r\n.test:<\/strong> Th\u01b0 m\u1ef1c n\u00e0y c\u0169ng ch\u1ee9a code Dart, n\u00f3 c\u00f3 nhi\u1ec7m v\u1ee5 ki\u1ec3m tra ch\u1ea5t l\u01b0\u1ee3ng, \u0111\u1ed9 ch\u1ecbu t\u1ea3i c\u1ee7a app m\u1ed9t c\u00e1c t\u1ef1 \u0111\u1ed9ng. Th\u01b0 m\u1ee5c n\u00e0y c\u0169ng kh\u00f4ng ph\u1ea3i l\u00e0 qu\u00e1 quan tr\u1ecdng nh\u00e9.\r\n\r\nCh\u00fang ta c\u00f3 th\u1ec3 c\u00f3 r\u1ea5t nhi\u1ec1u file m\u1eb7c \u0111\u1ecbnh trong m\u1ed9t d\u1ef1 \u00e1n Flutter. 99.99% l\u00e0 ch\u00fang ta b\u1ecf m\u1eb7c n\u00f3 m\u00e0 ko h\u1ec1 ng\u00f3 ng\u00e0ng g\u00ec t\u1edbi. Nh\u1eefng t\u1ec7p \u0111\u00f3 nh\u01b0 sau:\r\n\r\n.gitignore:<\/strong> N\u00f3 l\u00e0 m\u1ed9t t\u1ec7p v\u0103n b\u1ea3n ch\u1ee9a danh s\u00e1ch c\u00e1c t\u1ec7p, ph\u1ea7n m\u1edf r\u1ed9ng t\u1ec7p v\u00e0 th\u01b0 m\u1ee5c cho Git bi\u1ebft t\u1ec7p n\u00e0o n\u00ean \u0111\u01b0\u1ee3c b\u1ecf qua trong m\u1ed9t d\u1ef1 \u00e1n. Git l\u00e0 m\u1ed9t t\u1ec7p ki\u1ec3m so\u00e1t phi\u00ean b\u1ea3n \u0111\u1ec3 theo d\u00f5i c\u00e1c thay \u0111\u1ed5i trong m\u00e3 ngu\u1ed3n trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n ph\u1ea7n m\u1ec1m Git.\r\n\r\n.metadata:<\/strong> N\u00f3 l\u00e0 m\u1ed9t t\u1ec7p \u0111\u01b0\u1ee3c t\u1ea1o t\u1ef1 \u0111\u1ed9ng b\u1edfi c\u00e1c c\u00f4ng c\u1ee5 Flutter, \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 theo d\u00f5i c\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a d\u1ef1 \u00e1n Flutter. T\u1ec7p n\u00e0y th\u1ef1c hi\u1ec7n c\u00e1c t\u00e1c v\u1ee5 n\u1ed9i b\u1ed9, v\u00ec v\u1eady b\u1ea1n kh\u00f4ng c\u1ea7n ph\u1ea3i ch\u1ec9nh s\u1eeda n\u1ed9i dung theo c\u00e1ch th\u1ee7 c\u00f4ng b\u1ea5t c\u1ee9 l\u00fac n\u00e0o.\r\n\r\n.packages:<\/strong> \u0110\u00e2y l\u00e0 m\u1ed9t t\u1ec7p \u0111\u01b0\u1ee3c t\u1ea1o t\u1ef1 \u0111\u1ed9ng b\u1edfi Flutter SDK, \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 ch\u1ee9a danh s\u00e1ch c\u00e1c ph\u1ee5 thu\u1ed9c cho d\u1ef1 \u00e1n Flutter c\u1ee7a b\u1ea1n.\r\n\r\nflutter_demoapp.iml:<\/strong> N\u00f3 lu\u00f4n \u0111\u01b0\u1ee3c \u0111\u1eb7t t\u00ean theo t\u00ean c\u1ee7a d\u1ef1 \u00e1n Flutter ch\u1ee9a c\u00e1c c\u00e0i \u0111\u1eb7t b\u1ed5 sung c\u1ee7a d\u1ef1 \u00e1n. T\u1ec7p n\u00e0y th\u1ef1c hi\u1ec7n c\u00e1c t\u00e1c v\u1ee5 n\u1ed9i b\u1ed9, \u0111\u01b0\u1ee3c qu\u1ea3n l\u00fd b\u1edfi Flutter SDK, v\u00ec v\u1eady b\u1ea1n kh\u00f4ng c\u1ea7n ph\u1ea3i ch\u1ec9nh s\u1eeda n\u1ed9i dung theo c\u00e1ch th\u1ee7 c\u00f4ng b\u1ea5t c\u1ee9 l\u00fac n\u00e0o.\r\n\r\npubspec.yaml:<\/strong> \u0110\u00f3 l\u00e0 t\u1ec7p c\u1ea5u h\u00ecnh c\u1ee7a d\u1ef1 \u00e1n s\u1ebd s\u1eed d\u1ee5ng r\u1ea5t nhi\u1ec1u trong qu\u00e1 tr\u00ecnh l\u00e0m vi\u1ec7c v\u1edbi d\u1ef1 \u00e1n Flutter. N\u00f3 cho ph\u00e9p b\u1ea1n c\u00e1ch \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n ho\u1ea1t \u0111\u1ed9ng. T\u1ec7p n\u00e0y ch\u1ee9a:\r\n\r\n \tC\u00e0i \u0111\u1eb7t chung c\u1ee7a d\u1ef1 \u00e1n nh\u01b0 t\u00ean, m\u00f4 t\u1ea3 v\u00e0 phi\u00ean b\u1ea3n c\u1ee7a d\u1ef1 \u00e1n.<\/li>\r\n \t S\u1ef1 ph\u1ee5 thu\u1ed9c c\u1ee7a d\u1ef1 \u00e1n.<\/li>\r\n \t N\u1ed9i dung d\u1ef1 \u00e1n (v\u00ed d\u1ee5: h\u00ecnh \u1ea3nh).<\/li>\r\n<\/ul>\r\npubspec.lock:<\/strong> N\u00f3 l\u00e0 m\u1ed9t t\u1ec7p \u0111\u01b0\u1ee3c t\u1ea1o t\u1ef1 \u0111\u1ed9ng d\u1ef1a tr\u00ean t\u1ec7p .yaml. N\u00f3 c\u00f3 thi\u1ebft l\u1eadp chi ti\u1ebft h\u01a1n v\u1ec1 t\u1ea5t c\u1ea3 c\u00e1c ph\u1ee5 thu\u1ed9c.\r\n\r\nREADME.md:<\/strong> N\u00f3 l\u00e0 m\u1ed9t t\u1ec7p \u0111\u01b0\u1ee3c t\u1ea1o t\u1ef1 \u0111\u1ed9ng ch\u1ee9a th\u00f4ng tin v\u1ec1 d\u1ef1 \u00e1n. Ch\u00fang t\u00f4i c\u00f3 th\u1ec3 ch\u1ec9nh s\u1eeda t\u1ec7p n\u00e0y n\u1ebfu ch\u00fang t\u00f4i mu\u1ed1n chia s\u1ebb th\u00f4ng tin v\u1edbi c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n.\r\n\r\nB\u01b0\u1edbc 7:<\/strong> L\u00e0m vi\u1ec7c v\u1edbi main.dart nh\u00e9, h\u00e3y th\u1eed thay \u0111o\u1ea1n\u00a0code\u00a0c\u00f3\u00a0s\u1eb5n\u00a0b\u1eb1ng \u0111o\u1ea1n code d\u01b0\u1edbi \u0111\u00e2y nh\u00e9 c\u00e1c b\u1ea1n.\r\nimport 'package:flutter\/material.dart';\r\n \r\nvoid main() => runApp(MyApp());\r\n \r\nclass MyApp extends StatelessWidget {\r\n \/\/ This widget is the root of your application.\r\n @override\r\n Widget build(BuildContext context) {\r\n return MaterialApp(\r\n title: 'Hello World Demo Application',\r\n theme: ThemeData(\r\n primarySwatch: Colors.blue,\r\n ),\r\n home: MyHomePage(title: 'Home page'),\r\n );\r\n }\r\n}\r\nclass MyHomePage extends StatelessWidget {\r\n MyHomePage({Key key, this.title}) : super(key: key);\r\n final String title;\r\n \r\n @override\r\n Widget build(BuildContext context) {\r\n return Scaffold(\r\n appBar: AppBar(\r\n title: Text(this.title),\r\n ),\r\n body: Center(\r\n child:\r\n Text(\r\n 'Hello World',\r\n )\r\n ),\r\n );\r\n }\r\n}<\/code><\/pre>\r\nB\u01b0\u1edbc 8:<\/strong> H\u00e3y b\u1eaft \u0111\u1ea7u hi\u1ec3u c\u00e1c d\u00f2ng code tr\u00ean n\u00e0o.\r\n\r\n \tD\u00f2ng 1<\/strong>\u00a0\u2212 import flutter package, t\u00ean l\u00e0\u00a0material<\/em>.\u00a0Material<\/strong>\u00a0l\u00e0 m\u1ed9t flutter package \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng theo Material design cho Android.<\/li>\r\n \t D\u00f2ng\u00a03<\/strong>\u00a0\u2212 l\u00e0 \u0111i\u1ec3m kh\u1edfi \u0111\u1ea7u c\u1ee7a Flutter application l\u00e0 h\u00e0m main c\u1ee7a \u1ee9ng d\u1ee5ng. Ph\u01b0\u01a1ng th\u1ee9c\u00a0runApp<\/em>\u00a0\u0111\u01b0\u1ee3c g\u1ecdi v\u00e0 truy\u1ec1n v\u00e0o \u0111\u1ed1i t\u01b0\u1ee3ng c\u1ee7a l\u1edbp\u00a0MyApp<\/em>. M\u1ee5c \u0111\u00edch ch\u00ednh c\u1ee7a ph\u01b0\u01a1ng th\u1ee9c\u00a0runApp<\/em>\u00a0l\u00e0 \u0111\u01b0a giao di\u1ec7n widget v\u00e0o hi\u1ec3n th\u1ecb tr\u00ean m\u00e0n h\u00ecnh.<\/li>\r\n \t D\u00f2ng 5-17<\/strong>\u00a0\u2212 Widget \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o UI (giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng) qua flutter framework.\u00a0StatelessWidget<\/em>\u00a0l\u00e0 m\u1ed9t widget, n\u00f3 kh\u00f4ng bao g\u1ed3m tr\u1ea1ng th\u00e1i n\u00e0o c\u1ee7a widget.\u00a0MyApp<\/em>\u00a0k\u1ebf th\u1eeba\u00a0StatelessWidget<\/em>\u00a0v\u00e0 ghi \u0111\u00e8 ph\u01b0\u01a1ng th\u1ee9c\u00a0build method<\/em>. M\u1ee5c \u0111\u00edch c\u1ee7a ph\u01b0\u01a1ng th\u1ee9c\u00a0build<\/em>\u00a0l\u00e0 t\u1ea1o m\u1ed9t ph\u1ea7n UI cho \u1ee9ng d\u1ee5ng. \u1ede \u0111\u00e2y, ph\u01b0\u01a1ng th\u1ee9c\u00a0build<\/em>\u00a0s\u1eed d\u1ee5ng\u00a0MaterialApp<\/em>, m\u1ed9t widget \u0111\u1ec3 t\u1ea1o layout UI g\u1ed1c cho \u1ee9ng d\u1ee5ng. Bao g\u1ed3m 3 th\u00e0nh ph\u1ea7n ch\u00ednh l\u00e0 \u2013\u00a0title (ti\u00eau \u0111\u1ec1), theme (ch\u1ee7 \u0111\u1ec1)<\/em>\u00a0v\u00e0\u00a0home (trang ch\u1ee7 hay ph\u1ea7n m\u00e0n h\u00ecnh)<\/em>.title<\/em>\u00a0l\u00e0 ti\u00eau \u0111\u1ec1 c\u1ee7a \u1ee9ng d\u1ee5ngtheme<\/em>\u00a0l\u00e0 ch\u1ee7 \u0111\u1ec1 c\u1ee7a widget. \u1ede \u0111\u00e2y, ch\u00fang ta set ch\u1ee7 \u0111\u1ec1 l\u00e0\u00a0blue<\/em>\u00a0\u0111\u00f3 l\u00e0 m\u00e0u s\u1eafc ch\u1ee7 \u0111\u1ea1o c\u1ee7a \u1ee9ng d\u1ee5ng th\u00f4ng qua class\u00a0ThemeData<\/em>\u00a0v\u00e0 c\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a n\u00f3 v\u00ed d\u1ee5\u00a0primarySwatch<\/em>.home ph\u1ea7n m\u00e0n h\u00ecnh c\u1ee7a \u1ee9ng d\u1ee5ng, n\u00f3 \u0111\u01b0\u1ee3c t\u1ea1o b\u1edfi m\u1ed9t widget kh\u00e1c,\u00a0MyHomePage<\/strong><\/li>\r\n \t D\u00f2ng 19 \u2013 38<\/strong>\u00a0\u2212\u00a0MyHomePage<\/em>\u00a0t\u01b0\u01a1ng t\u1ef1\u00a0MyApp<\/em>\u00a0ngo\u1ea1i tr\u1eeb n\u00f3 tr\u1ea3 v\u1ec1\u00a0Scaffold<\/em>\u00a0Widget.\u00a0Scaffold<\/em>\u00a0l\u00e0 m\u00f4t top level widget \u0111\u1ee9ng sau\u00a0MaterialApp<\/em>\u00a0widget \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o UI theo material design. N\u00f3 c\u00f3 hai thu\u1ed9c t\u00ednh quan tr\u1ecdng nh\u1ea5t l\u00e0\u00a0appBar<\/em>\u00a0\u0111\u1ec3 hi\u1ec3n th\u1ecb ph\u1ea7n \u0111\u1ea7u c\u1ee7a \u1ee9ng d\u1ee5ng v\u00e0 body \u0111\u1ec3 hi\u1ec3n th\u1ecb n\u00f4i dung ch\u00ednh c\u1ee7a \u1ee9ng d\u1ee5ng.\u00a0AppBar<\/em>\u00a0l\u00e0 m\u1ed9t widget kh\u00e1c \u0111\u1ec3 t\u1ea1o ph\u1ea7n \u0111\u1ea7u c\u1ee7a \u1ee9ng d\u1ee5ng v\u00e0 s\u1eed d\u1ee5ng c\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a\u00a0appBar<\/em>. Trong c\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a\u00a0body<\/em>, ch\u00fang ta s\u1eed d\u1ee5ng m\u1ed9t\u00a0Center<\/em>\u00a0widget, \u0111\u00e2y l\u00e0 m\u1ed9t widget con.\u00a0Text<\/em>\u00a0l\u00e0 m\u1ed9t widget cu\u1ed1i c\u00f9ng, ph\u1ed5 bi\u1ebfn \u0111\u1ec3 hi\u1ec3n th\u1ecb m\u1ed9t v\u0103n b\u1ea3n gi\u1eefa m\u00e0n h\u00ecnh<\/li>\r\n<\/ul>\r\nB\u01b0\u1edbc 9:<\/strong> B\u00e2y gi\u1edd th\u00ec b\u1ea1n c\u00f3 th\u1ec3 ch\u1ea1y tr\u01b0\u01a1ng ch\u00ecnh \u0111\u01b0\u1ee3c r\u1ed3i. H\u00ecnh b\u00ean d\u01b0\u1edbi \u0111\u00e2y h\u01b0\u1edbng d\u1eabn c\u00e1c b\u1ea1n ch\u1ea1y file main.dart, b\u1ea5m\u00a0v\u00f4 Run->Run main.dart.\r\nKh\u1edfi ch\u1ea1y \u1ee9ng d\u1ee5ng<\/figcaption><\/figure>\r\nB\u01b0\u1edbc 10:<\/strong> K\u1ebft qu\u1ea3 l\u00e0 ch\u00fang ta c\u00f3 d\u00f2ng ch\u1eef \u201cHello Word\u201d ra gi\u1eefa m\u00e0 h\u00ecnh.\r\n\r\nK\u1ebft qu\u1ea3 ch\u1ea1y th\u1eed Flutter<\/figcaption><\/figure>\r\n<\/div>\r\n\r\n \r\n\r\nhttps:\/\/github.com\/yennq\/Flutter\/tree\/main\/lession1<\/a>\r\n\r\nNh\u01b0 v\u1eady l\u00e0 c\u00e1c b\u1ea1n \u0111\u00e3 theo d\u00f5i 10 b\u01b0\u1edbc \u0111\u1ec3 c\u00f3 th\u1ec3 vi\u1ebft m\u1ed9t \u1ee9ng d\u1ee5ng nho\u00a0nh\u1ecf hi\u1ec3n th\u1ecb d\u00f2ng ch\u1eef ra gi\u1eefa m\u00e0n h\u00ecnh b\u1eb1ng Flutter<\/a> r\u1ed3i nh\u00e9. H\u00e3y th\u1eed th\u1ef1c hi\u1ec7n vi\u1ec7c n\u00e0y v\u00e0 xem ch\u1ea1y n\u00f3, b\u1ea1n s\u1ebd th\u1ea5y b\u1ea5t ng\u1edd l\u00e0 l\u00e0m mobile c\u0169ng \u0111\u01a1n gi\u1ea3n th\u00f4i.\r\nCh\u00fac\u00a0c\u00e1c\u00a0b\u1ea1n\u00a0th\u00e0nh\u00a0c\u00f4ng!<\/p>"]}],"jetpack_featured_media_url":"https:\/\/hvm.vn\/wp-content\/uploads\/2022\/08\/flutter-bai-1-huong-dan-viet-va-chay-chuong-trinh-dau-tien-7.png","post_categories":[{"id":132,"count":2,"description":"","name":"TIN T\u1ee8C","slug":"tin-tuc","parent":0}],"post_tags":[],"post_author":"hvmvn","post_author_avatar_urls":{"24":"https:\/\/secure.gravatar.com\/avatar\/67747ba0c260db041259742aba6ef55f?s=24&d=mm&r=g","48":"https:\/\/secure.gravatar.com\/avatar\/67747ba0c260db041259742aba6ef55f?s=48&d=mm&r=g","96":"https:\/\/secure.gravatar.com\/avatar\/67747ba0c260db041259742aba6ef55f?s=96&d=mm&r=g"},"post_comment_count":0,"image":"https:\/\/hvm.vn\/wp-content\/uploads\/2022\/08\/flutter-bai-1-huong-dan-viet-va-chay-chuong-trinh-dau-tien-7.png","thumb":"https:\/\/hvm.vn\/wp-content\/uploads\/2022\/08\/flutter-bai-1-huong-dan-viet-va-chay-chuong-trinh-dau-tien-7-150x150.png","thumb_medium":"https:\/\/hvm.vn\/wp-content\/uploads\/2022\/08\/flutter-bai-1-huong-dan-viet-va-chay-chuong-trinh-dau-tien-7-139x300.png","images":{"thumbnail":"https:\/\/hvm.vn\/wp-content\/uploads\/2022\/08\/flutter-bai-1-huong-dan-viet-va-chay-chuong-trinh-dau-tien-7-150x150.png","medium":"https:\/\/hvm.vn\/wp-content\/uploads\/2022\/08\/flutter-bai-1-huong-dan-viet-va-chay-chuong-trinh-dau-tien-7-139x300.png","medium_large":"https:\/\/hvm.vn\/wp-content\/uploads\/2022\/08\/flutter-bai-1-huong-dan-viet-va-chay-chuong-trinh-dau-tien-7-768x1662.png","large":"https:\/\/hvm.vn\/wp-content\/uploads\/2022\/08\/flutter-bai-1-huong-dan-viet-va-chay-chuong-trinh-dau-tien-7-473x1024.png","1536x1536":"https:\/\/hvm.vn\/wp-content\/uploads\/2022\/08\/flutter-bai-1-huong-dan-viet-va-chay-chuong-trinh-dau-tien-7-710x1536.png","2048x2048":"https:\/\/hvm.vn\/wp-content\/uploads\/2022\/08\/flutter-bai-1-huong-dan-viet-va-chay-chuong-trinh-dau-tien-7-947x2048.png","iteck-related-post":"https:\/\/hvm.vn\/wp-content\/uploads\/2022\/08\/flutter-bai-1-huong-dan-viet-va-chay-chuong-trinh-dau-tien-7.png","iteck-gallery":"https:\/\/hvm.vn\/wp-content\/uploads\/2022\/08\/flutter-bai-1-huong-dan-viet-va-chay-chuong-trinh-dau-tien-7.png"},"post_title":"Flutter | B\u00e0i 1: H\u01b0\u1edbng d\u1eabn vi\u1ebft v\u00e0 ch\u1ea1y ch\u01b0\u01a1ng tr\u00ecnh \u0111\u1ea7u ti\u00ean","_links":{"self":[{"href":"https:\/\/hvm.vn\/wp-json\/wp\/v2\/posts\/51354"}],"collection":[{"href":"https:\/\/hvm.vn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hvm.vn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hvm.vn\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hvm.vn\/wp-json\/wp\/v2\/comments?post=51354"}],"version-history":[{"count":2,"href":"https:\/\/hvm.vn\/wp-json\/wp\/v2\/posts\/51354\/revisions"}],"predecessor-version":[{"id":51384,"href":"https:\/\/hvm.vn\/wp-json\/wp\/v2\/posts\/51354\/revisions\/51384"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hvm.vn\/wp-json\/wp\/v2\/media\/51380"}],"wp:attachment":[{"href":"https:\/\/hvm.vn\/wp-json\/wp\/v2\/media?parent=51354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hvm.vn\/wp-json\/wp\/v2\/categories?post=51354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hvm.vn\/wp-json\/wp\/v2\/tags?post=51354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}