{"id":7,"date":"2026-04-03T09:54:52","date_gmt":"2026-04-03T09:54:52","guid":{"rendered":"https:\/\/hoangnam26.id.vn\/?p=7"},"modified":"2026-04-03T11:33:25","modified_gmt":"2026-04-03T11:33:25","slug":"flutter-gioi-thieu-ve-kien-truc","status":"publish","type":"post","link":"https:\/\/hoangnam26.id.vn\/?p=7","title":{"rendered":"Flutter &#8211; Gi\u1edbi thi\u1ec7u v\u1ec1 ki\u1ebfn tr\u00fac"},"content":{"rendered":"\n<figure class=\"wp-block-image alignfull size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/hoangnam26.id.vn\/wp-content\/uploads\/2026\/04\/Blog_Common_Image_Flutter_OG_Image_1e84f31275-1024x538.webp\" alt=\"\" class=\"wp-image-28\" srcset=\"https:\/\/hoangnam26.id.vn\/wp-content\/uploads\/2026\/04\/Blog_Common_Image_Flutter_OG_Image_1e84f31275-1024x538.webp 1024w, https:\/\/hoangnam26.id.vn\/wp-content\/uploads\/2026\/04\/Blog_Common_Image_Flutter_OG_Image_1e84f31275-300x158.webp 300w, https:\/\/hoangnam26.id.vn\/wp-content\/uploads\/2026\/04\/Blog_Common_Image_Flutter_OG_Image_1e84f31275-768x403.webp 768w, https:\/\/hoangnam26.id.vn\/wp-content\/uploads\/2026\/04\/Blog_Common_Image_Flutter_OG_Image_1e84f31275-1536x806.webp 1536w, https:\/\/hoangnam26.id.vn\/wp-content\/uploads\/2026\/04\/Blog_Common_Image_Flutter_OG_Image_1e84f31275-2048x1075.webp 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">1. Tri\u1ebft l\u00fd &#8220;Everything is a Widget&#8221; (C\u01a1 ch\u1ebf Composition)<\/h2>\n\n\n\n<p>Trong Flutter, Widget kh\u00f4ng ch\u1ec9 l\u00e0 m\u1ed9t Component UI (nh\u01b0 Button hay Label), n\u00f3 l\u00e0 m\u1ed9t&nbsp;<strong>Configuration (C\u1ea5u h\u00ecnh)<\/strong>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Logic l\u1eafp gh\u00e9p (Composition over Inheritance):<\/strong>&nbsp;Thay v\u00ec t\u1ea1o ra m\u1ed9t Class ph\u1ee9c t\u1ea1p k\u1ebf th\u1eeba h\u00e0ng ch\u1ee5c thu\u1ed9c t\u00ednh, Flutter d\u00f9ng c\u00e1c Widget nh\u1ecf th\u1ef1c hi\u1ec7n duy nh\u1ea5t m\u1ed9t nhi\u1ec7m v\u1ee5 (Single Responsibility).\n<ul class=\"wp-block-list\">\n<li>Mu\u1ed1n c\u0103n gi\u1eefa? D\u00f9ng Widget&nbsp;<code>Center<\/code>.<\/li>\n\n\n\n<li>Mu\u1ed1n c\u00e1ch l\u1ec1? D\u00f9ng Widget&nbsp;<code>Padding<\/code>.<\/li>\n\n\n\n<li>Mu\u1ed1n b\u1eaft s\u1ef1 ki\u1ec7n? D\u00f9ng Widget&nbsp;<code>GestureDetector<\/code>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>H\u1ec7 qu\u1ea3:<\/strong>&nbsp;M\u1ed9t m\u00e0n h\u00ecnh l\u00e0 m\u1ed9t&nbsp;<strong>c\u00e2y Widget (Widget Tree)<\/strong>. T\u1ea1i \u0111\u1ec9nh cao nh\u1ea5t l\u00e0&nbsp;<code>MaterialApp<\/code>&nbsp;(ho\u1eb7c&nbsp;<code>CupertinoApp<\/code>), v\u00e0 c\u00e1c nh\u00e1nh con l\u00e0 s\u1ef1 l\u1ed3ng gh\u00e9p v\u00f4 t\u1eadn c\u1ee7a c\u00e1c Widget kh\u00e1c. \u0110i\u1ec1u n\u00e0y gi\u00fap \u0111\u1ed9 ph\u1ee9c t\u1ea1p c\u1ee7a UI \u0111\u01b0\u1ee3c gi\u1ea3i quy\u1ebft b\u1eb1ng c\u00e1ch chia nh\u1ecf module.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">2. Qu\u1ea3n l\u00fd tr\u1ea1ng th\u00e1i (State Management &amp; Reactive UI)<\/h2>\n\n\n\n<p>D\u00e2n k\u1ef9 thu\u1eadt nh\u00ecn UI c\u1ee7a Flutter qua c\u00f4ng th\u1ee9c to\u00e1n h\u1ecdc:<strong>UI = f(state)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>StatelessWidget (Immutable):<\/strong>&nbsp;L\u00e0 c\u00e1c Widget c\u00f3 h\u1eb1ng s\u1ed1. Khi \u0111\u00e3 build, thu\u1ed9c t\u00ednh kh\u00f4ng thay \u0111\u1ed5i. Ph\u00f9 h\u1ee3p cho c\u00e1c th\u00e0nh ph\u1ea7n t\u0129nh \u0111\u1ec3 t\u1ed1i \u01b0u b\u1ed9 nh\u1edb.<\/li>\n\n\n\n<li><strong>StatefulWidget (Mutable):<\/strong>&nbsp;Cho ph\u00e9p UI thay \u0111\u1ed5i theo th\u1eddi gian.<strong>C\u01a1 ch\u1ebf Re-render:<\/strong>&nbsp;Khi tr\u1ea1ng th\u00e1i ($state$) thay \u0111\u1ed5i, h\u00e0m&nbsp;<code>setState()<\/code>&nbsp;\u0111\u01b0\u1ee3c g\u1ecdi. Flutter s\u1ebd ch\u1ea1y l\u1ea1i h\u00e0m&nbsp;<code>build()<\/code>&nbsp;\u0111\u1ec3 t\u1ea1o ra m\u1ed9t Widget Tree m\u1edbi.<\/li>\n\n\n\n<li><strong>Thu\u1eadt to\u00e1n Diffing:<\/strong>&nbsp;Flutter kh\u00f4ng h\u1ee7y to\u00e0n b\u1ed9 m\u00e0n h\u00ecnh \u0111\u1ec3 v\u1ebd l\u1ea1i (v\u00ec qu\u00e1 t\u1ed1n k\u00e9m). N\u00f3 so s\u00e1nh c\u00e2y c\u0169 v\u00e0 c\u00e2y m\u1edbi, x\u00e1c \u0111\u1ecbnh ch\u00ednh x\u00e1c Node n\u00e0o thay \u0111\u1ed5i v\u00e0 ch\u1ec9 c\u1eadp nh\u1eadt ph\u1ea7n \u0111\u00f3 tr\u00ean Layer Rendering. Hi\u1ec7u n\u0103ng \u0111\u1ea1t m\u1ee9c&nbsp;<strong>60fps &#8211; 120fps<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">3. GestureDetector (C\u01a1 ch\u1ebf h\u01b0\u1edbng s\u1ef1 ki\u1ec7n)<\/h2>\n\n\n\n<p>N\u1ebfu Widget l\u00e0 &#8220;x\u00e1c&#8221; th\u00ec GestureDetector l\u00e0 &#8220;h\u1ec7 th\u1ea7n kinh&#8221;.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Invisible Wrapper:<\/strong>&nbsp;\u0110\u00e2y l\u00e0 m\u1ed9t Widget kh\u00f4ng c\u00f3 h\u00ecnh th\u00e1i hi\u1ec3n th\u1ecb. N\u00f3 bao b\u1ecdc l\u1ea5y m\u1ed9t Widget kh\u00e1c \u0111\u1ec3 l\u1eafng nghe c\u00e1c s\u1ef1 ki\u1ec7n th\u00f4 t\u1eeb ph\u1ea7n c\u1ee9ng (m\u00e0n h\u00ecnh c\u1ea3m \u1ee9ng).<\/li>\n\n\n\n<li><strong>Event Mapping:<\/strong>&nbsp;N\u00f3 chuy\u1ec3n \u0111\u1ed5i c\u00e1c t\u00edn hi\u1ec7u ch\u1ea1m (Touch events) th\u00e0nh c\u00e1c h\u00e0nh \u0111\u1ed9ng c\u00f3 \u00fd ngh\u0129a:\n<ul class=\"wp-block-list\">\n<li><code>onTap<\/code>: Nh\u1ea5n nhanh.<\/li>\n\n\n\n<li><code>onLongPress<\/code>: Nh\u1ea5n gi\u1eef.<\/li>\n\n\n\n<li><code>onPanUpdate<\/code>: K\u00e9o r\u00ea (Drag).<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>T\u00ednh t\u00f9y bi\u1ebfn:<\/strong>&nbsp;B\u1ea1n c\u00f3 th\u1ec3 bi\u1ebfn b\u1ea5t c\u1ee9 th\u1ee9 g\u00ec (m\u1ed9t d\u00f2ng ch\u1eef, m\u1ed9t t\u1ea5m \u1ea3nh) th\u00e0nh m\u1ed9t n\u00fat b\u1ea5m b\u1eb1ng c\u00e1ch b\u1ecdc n\u00f3 trong&nbsp;<code>GestureDetector<\/code>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">4. Layered Architecture (Ph\u00e2n t\u1ea7ng h\u1ec7 th\u1ed1ng)<\/h2>\n\n\n\n<p>Flutter kh\u00f4ng s\u1eed d\u1ee5ng c\u00e1c UI Component c\u00f3 s\u1eb5n c\u1ee7a h\u1ec7 \u0111i\u1ec1u h\u00e0nh (Native Controls). N\u00f3 t\u1ef1 v\u1ebd m\u1ecdi th\u1ee9. Ki\u1ebfn tr\u00fac n\u00e0y \u0111\u01b0\u1ee3c chia l\u00e0m 3 t\u1ea7ng ch\u00ednh:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>T\u1ea7ng (Layer)<\/strong><\/td><td><strong>Th\u00e0nh ph\u1ea7n ch\u00ednh<\/strong><\/td><td><strong>Vai tr\u00f2 k\u1ef9 thu\u1eadt<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>Framework (Dart)<\/strong><\/td><td>Widgets, Material, Cupertino, Animation.<\/td><td>N\u01a1i l\u1eadp tr\u00ecnh vi\u00ean thao t\u00e1c. Cung c\u1ea5p c\u00e1c kh\u1ed1i x\u00e2y d\u1ef1ng b\u1eadc cao.<\/td><\/tr><tr><td><strong>Engine (C++)<\/strong><\/td><td>Skia (Graphics Engine), Dart VM, Text.<\/td><td>T\u1ea7ng th\u1ea5p lo vi\u1ec7c t\u00ednh to\u00e1n t\u1ecda \u0111\u1ed9 pixel, n\u1ea1p font v\u00e0 qu\u1ea3n l\u00fd b\u1ed9 nh\u1edb.<\/td><\/tr><tr><td><strong>Embedder (Platform)<\/strong><\/td><td>Shell (Android\/iOS\/Windows).<\/td><td>T\u1ea7ng giao ti\u1ebfp v\u1edbi ph\u1ea7n c\u1ee9ng, qu\u1ea3n l\u00fd v\u00f2ng \u0111\u1eddi \u1ee9ng d\u1ee5ng v\u00e0 lu\u1ed3ng s\u1ef1 ki\u1ec7n.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">5. Ph\u00e2n t\u00edch lu\u1ed3ng d\u1eef li\u1ec7u (Data Flow) trong m\u1ed9t App c\u01a1 b\u1ea3n<\/h2>\n\n\n\n<p>T\u1eeb th\u00f4ng tin b\u1ea1n cung c\u1ea5p, ta suy ra lu\u1ed3ng v\u1eadn h\u00e0nh c\u1ee7a m\u1ed9t \u1ee9ng d\u1ee5ng nh\u01b0 sau:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Kh\u1edfi t\u1ea1o:<\/strong>&nbsp;<code>main()<\/code>&nbsp;g\u1ecdi&nbsp;<code>runApp(MyApp)<\/code>.<\/li>\n\n\n\n<li><strong>D\u1ef1ng khung:<\/strong>&nbsp;<code>MaterialApp<\/code>&nbsp;thi\u1ebft l\u1eadp c\u00e1c th\u00f4ng s\u1ed1 v\u1ec1 Theme v\u00e0 Navigation.<\/li>\n\n\n\n<li><strong>D\u1ef1ng x\u01b0\u01a1ng:<\/strong>&nbsp;<code>Scaffold<\/code>&nbsp;cung c\u1ea5p c\u00e1c slot (Body, AppBar, FloatingActionButton, Drawer) \u0111\u1ec3 l\u1eadp tr\u00ecnh vi\u00ean &#8220;\u0111\u1ed5&#8221; d\u1eef li\u1ec7u v\u00e0o \u0111\u00fang v\u1ecb tr\u00ed.<\/li>\n\n\n\n<li><strong>B\u1ed1 c\u1ee5c:<\/strong>&nbsp;<code>Center<\/code>&nbsp;t\u00ednh to\u00e1n t\u1ecda \u0111\u1ed9 d\u1ef1a tr\u00ean k\u00edch th\u01b0\u1edbc c\u1ee7a Parent (l\u00e0 Scaffold) v\u00e0 Child (l\u00e0 Text).<\/li>\n\n\n\n<li><strong>Hi\u1ec3n th\u1ecb:<\/strong>&nbsp;<code>Text<\/code>&nbsp;nh\u1eadn chu\u1ed7i String v\u00e0 g\u1eedi xu\u1ed1ng Engine \u0111\u1ec3 v\u1ebd t\u1eebng n\u00e9t ch\u1eef l\u00ean m\u00e0n h\u00ecnh th\u00f4ng qua Skia.<\/li>\n<\/ol>\n\n\n\n<p><strong>K\u1ebft lu\u1eadn:<\/strong>&nbsp;Flutter gi\u1ed1ng nh\u01b0 vi\u1ec7c l\u1eafp gh\u00e9p c\u00e1c kh\u1ed1i&nbsp;<\/p>\n\n\n\n<p><strong>Lego<\/strong>. M\u1ed7i kh\u1ed1i l\u00e0 m\u1ed9t Widget, v\u00e0 s\u1ee9c m\u1ea1nh n\u1eb1m \u1edf ch\u1ed7 c\u00e1c kh\u1ed1i n\u00e0y c\u00f3 th\u1ec3 l\u1ed3ng v\u00e0o nhau kh\u00f4ng gi\u1edbi h\u1ea1n \u0111\u1ec3 t\u1ea1o n\u00ean nh\u1eefng h\u1ec7 th\u1ed1ng ph\u1ee9c t\u1ea1p nh\u01b0ng v\u1eabn \u0111\u1ea3m b\u1ea3o t\u00ednh module h\u00f3a c\u1ef1c cao.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" height=\"456\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEipVRx2xZ3bv1Ed2kuOcA5bllaeNzMJfkKdnP9ajh5Ia7FQCxa7Z4Ip7_C-12LDNo9Pg8JWppYDgg8enm_ksAnlbwnbY7YVardACCquTyRe1KvLtyG_YBe1Gr0H-HOGEAxgdFJm7ts0JUyjXk9jKg8CXLZgdnYd3sNjLCXFwA6v7ge5UqkbFLElPNjYg7s=w670-h456\" width=\"670\"><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Widget<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\">1. B\u1ea3n ch\u1ea5t c\u1ee7a Widget: C\u01a1 ch\u1ebf &#8220;Build&#8221;<\/h2>\n\n\n\n<p>M\u1ecdi Widget trong Flutter \u0111\u1ec1u ho\u1ea1t \u0111\u1ed9ng d\u1ef1a tr\u00ean m\u1ed9t nguy\u00ean l\u00fd:&nbsp;<strong>\u0110\u1ec7 quy kh\u1edfi t\u1ea1o.<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>H\u00e0m&nbsp;<code>build(BuildContext context)<\/code>:<\/strong>&nbsp;\u0110\u00e2y l\u00e0 tr\u00e1i tim c\u1ee7a m\u1ed9t Widget. N\u00f3 kh\u00f4ng &#8220;v\u1ebd&#8221; l\u00ean m\u00e0n h\u00ecnh m\u00e0 &#8220;tr\u1ea3 v\u1ec1&#8221; m\u1ed9t c\u1ea5u tr\u00fac Widget kh\u00e1c.<\/li>\n\n\n\n<li><strong>Lu\u1ed3ng th\u1ef1c thi:<\/strong>&nbsp;*&nbsp;<code>MyHomePage<\/code>&nbsp;g\u1ecdi&nbsp;<code>Scaffold<\/code>.\n<ul class=\"wp-block-list\">\n<li><code>Scaffold<\/code>&nbsp;g\u1ecdi&nbsp;<code>AppBar<\/code>&nbsp;v\u00e0&nbsp;<code>Center<\/code>.<\/li>\n\n\n\n<li><code>Center<\/code>&nbsp;g\u1ecdi&nbsp;<code>Image<\/code>&nbsp;ho\u1eb7c&nbsp;<code>Text<\/code>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u00dd ngh\u0129a k\u1ef9 thu\u1eadt:<\/strong>&nbsp;\u0110i\u1ec1u n\u00e0y t\u1ea1o ra m\u1ed9t&nbsp;<strong>C\u00e2y Widget (Widget Tree)<\/strong>.&nbsp;<code>BuildContext<\/code>&nbsp;ch\u00ednh l\u00e0 &#8220;t\u1ecda \u0111\u1ed9&#8221; c\u1ee7a Widget \u0111\u00f3 trong c\u00e2y \u0111\u1ec3 h\u1ec7 th\u1ed1ng bi\u1ebft n\u00f3 \u0111ang n\u1eb1m \u1edf \u0111\u00e2u v\u00e0 nh\u1eadn d\u1eef li\u1ec7u t\u1eeb cha n\u00e0o.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">2. Ph\u00e2n lo\u1ea1i Widget theo c\u00f4ng n\u0103ng<\/h2>\n\n\n\n<p>Flutter chia Widget th\u00e0nh 4 nh\u00f3m chi\u1ebfn l\u01b0\u1ee3c \u0111\u1ec3 qu\u1ea3n l\u00fd giao di\u1ec7n v\u00e0 tr\u1ea3i nghi\u1ec7m:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">A. Platform Specific (Widget \u0111\u1eb7c th\u00f9 n\u1ec1n t\u1ea3ng)<\/h3>\n\n\n\n<p>Flutter kh\u00f4ng d\u00f9ng UI c\u1ee7a h\u1ec7 \u0111i\u1ec1u h\u00e0nh nh\u01b0ng n\u00f3 &#8220;gi\u1ea3 l\u1eadp&#8221; ho\u00e0n h\u1ea3o ng\u00f4n ng\u1eef thi\u1ebft k\u1ebf c\u1ee7a h\u1ecd:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Material Design (Android):<\/strong>&nbsp;C\u00e1c Widget nh\u01b0&nbsp;<code>Scaffold<\/code>,&nbsp;<code>FloatingActionButton<\/code>,&nbsp;<code>AppBar<\/code>. Mang phong c\u00e1ch \u0111\u1ed5 b\u00f3ng, hi\u1ec7n \u0111\u1ea1i c\u1ee7a Google.<\/li>\n\n\n\n<li><strong>Cupertino (iOS):<\/strong>&nbsp;C\u00e1c Widget nh\u01b0&nbsp;<code>CupertinoButton<\/code>,&nbsp;<code>CupertinoNavigationBar<\/code>. Mang phong c\u00e1ch m\u1edd \u1ea3o (blur) v\u00e0 t\u1ed1i gi\u1ea3n c\u1ee7a Apple.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">B. Layout Widgets (Widget b\u1ed1 c\u1ee5c)<\/h3>\n\n\n\n<p>\u0110\u00e2y l\u00e0 c\u00e1c Widget \u0111\u00f3ng vai tr\u00f2 &#8220;\u0111\u1ecbnh v\u1ecb&#8221; cho c\u00e1c Widget con:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Container:<\/strong>&nbsp;Widget \u0111a n\u0103ng (nh\u01b0 th\u1ebb&nbsp;<code>&lt;div&gt;<\/code>&nbsp;trong Web), d\u00f9ng \u0111\u1ec3 t\u1ea1o khung, \u0111\u1ed5 m\u00e0u, bo g\u00f3c, t\u1ea1o b\u00f3ng.<\/li>\n\n\n\n<li><strong>Row\/Column:<\/strong>&nbsp;S\u1eafp x\u1ebfp theo tr\u1ee5c ngang\/d\u1ecdc (t\u01b0\u01a1ng t\u1ef1 Flexbox).<\/li>\n\n\n\n<li><strong>Stack:<\/strong>&nbsp;Ch\u1ed3ng c\u00e1c Widget l\u00ean nhau theo chi\u1ec1u s\u00e2u (Z-axis).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">C. State Maintenance (Widget qu\u1ea3n l\u00fd tr\u1ea1ng th\u00e1i)<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>StatelessWidget:<\/strong>&nbsp;D\u00f9ng cho d\u1eef li\u1ec7u t\u0129nh. M\u1ed9t khi \u0111\u00e3 d\u1ef1ng xong l\u00e0 &#8220;\u0111\u00f3ng b\u0103ng&#8221;, kh\u00f4ng thay \u0111\u1ed5i tr\u1eeb khi Widget cha d\u1ef1ng l\u1ea1i n\u00f3.<\/li>\n\n\n\n<li><strong>StatefulWidget:<\/strong>&nbsp;C\u00f3 kh\u1ea3 n\u0103ng t\u1ef1 l\u00e0m m\u1edbi ch\u00ednh m\u00ecnh khi d\u1eef li\u1ec7u b\u00ean trong (<code>State<\/code>) thay \u0111\u1ed5i.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">D. Basic\/Independent Widgets (Widget c\u01a1 b\u1ea3n)<\/h3>\n\n\n\n<p>C\u00e1c \u0111\u01a1n v\u1ecb hi\u1ec3n th\u1ecb n\u1ed9i dung nguy\u00ean t\u1eed:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Text:<\/strong>&nbsp;Hi\u1ec3n th\u1ecb chu\u1ed7i. C\u00f3&nbsp;<code>Text.rich<\/code>&nbsp;\u0111\u1ec3 \u0111\u1ecbnh d\u1ea1ng ki\u1ec3u &#8220;m\u1ed7i ch\u1eef m\u1ed9t m\u00e0u&#8221; (d\u00f9ng&nbsp;<code>TextSpan<\/code>).<\/li>\n\n\n\n<li><strong>Image:<\/strong>&nbsp;C\u00f3 4 ngu\u1ed3n n\u1ea1p d\u1eef li\u1ec7u ch\u00ednh:&nbsp;<code>asset<\/code>&nbsp;(trong app),&nbsp;<code>file<\/code>&nbsp;(trong m\u00e1y),&nbsp;<code>network<\/code>&nbsp;(t\u1eeb internet),&nbsp;<code>memory<\/code>&nbsp;(t\u1eeb m\u1ea3ng byte).<\/li>\n\n\n\n<li><strong>Icon:<\/strong>&nbsp;S\u1eed d\u1ee5ng glyph t\u1eeb font ch\u1eef (nh\u01b0&nbsp;<code>Icons.email<\/code>), gi\u00fap icon s\u1eafc n\u00e9t \u1edf m\u1ecdi \u0111\u1ed9 ph\u00e2n gi\u1ea3i m\u00e0 kh\u00f4ng t\u1ed1n dung l\u01b0\u1ee3ng nh\u01b0 \u1ea3nh.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3. \u0110i\u1ec3m nh\u1ea5n k\u1ef9 thu\u1eadt c\u1ea7n l\u01b0u \u00fd<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Thu\u1ed9c t\u00ednh&nbsp;<code>Key<\/code><\/h3>\n\n\n\n<p>Trong constructor:&nbsp;<code>MyHomePage({Key key, ...})<\/code>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Vai tr\u00f2:<\/strong>&nbsp;Gi\u00fap Flutter \u0111\u1ecbnh danh ch\u00ednh x\u00e1c m\u1ed9t Widget khi n\u00f3 di chuy\u1ec3n trong c\u00e2y Widget. C\u1ef1c k\u1ef3 quan tr\u1ecdng khi b\u1ea1n c\u00f3 m\u1ed9t danh s\u00e1ch c\u00e1c ph\u1ea7n t\u1eed gi\u1ed1ng h\u1ec7t nhau v\u00e0 mu\u1ed1n thay \u0111\u1ed5i th\u1ee9 t\u1ef1 ho\u1eb7c x\u00f3a ch\u00fang m\u00e0 kh\u00f4ng l\u00e0m m\u1ea5t tr\u1ea1ng th\u00e1i (state).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Qu\u1ea3n l\u00fd Asset (\u1ea2nh\/Font)<\/h3>\n\n\n\n<p>\u0110\u1ec3 d\u00f9ng \u1ea3nh trong Flutter, b\u1ea1n ph\u1ea3i khai b\u00e1o trong file c\u1ea5u h\u00ecnh h\u1ec7 th\u1ed1ng:&nbsp;<code>pubspec.yaml<\/code>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Logic:<\/strong>&nbsp;\u0110\u0103ng k\u00fd \u0111\u01b0\u1eddng d\u1eabn &gt;&nbsp;Flutter \u0111\u00f3ng g\u00f3i v\u00e0o file c\u00e0i \u0111\u1eb7t (APK\/IPA) &gt;&nbsp;D\u00f9ng&nbsp;<code>Image.asset<\/code>&nbsp;\u0111\u1ec3 g\u1ecdi.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">4. T\u00f3m t\u1eaft m\u00f4 h\u00ecnh v\u1eadn h\u00e0nh<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>D\u1eef li\u1ec7u \u0111\u1ea7u v\u00e0o:<\/strong>&nbsp;Th\u00f4ng qua Constructor (v\u00ed d\u1ee5:&nbsp;<code>this.title<\/code>).<\/li>\n\n\n\n<li><strong>X\u1eed l\u00fd:<\/strong>&nbsp;H\u00e0m&nbsp;<code>build<\/code>&nbsp;t\u00ednh to\u00e1n logic hi\u1ec3n th\u1ecb.<\/li>\n\n\n\n<li><strong>\u0110\u1ea7u ra:<\/strong>&nbsp;Tr\u1ea3 v\u1ec1 m\u1ed9t Widget con ph\u1ee9c h\u1ee3p.<\/li>\n\n\n\n<li><strong>Hi\u1ec3n th\u1ecb:<\/strong>&nbsp;Engine Render qu\u00e9t qua c\u00e2y Widget v\u00e0 v\u1ebd c\u00e1c pixel t\u01b0\u01a1ng \u1ee9ng.<\/li>\n<\/ol>\n\n\n\n<p><strong>Nh\u1eadn x\u00e9t:<\/strong>&nbsp;B\u00e0i gi\u1ea3ng n\u00e0y cung c\u1ea5p c\u00e1i nh\u00ecn t\u1ed5ng quan t\u1eeb c\u1ea5u tr\u00fac code (Class\/Override) \u0111\u1ebfn c\u00e1ch t\u1ed5 ch\u1ee9c th\u01b0 vi\u1ec7n Widget. N\u1ebfu b\u1ea1n n\u1eafm ch\u1eafc nh\u00f3m&nbsp;<strong>Layout<\/strong>&nbsp;v\u00e0&nbsp;<strong>Basic<\/strong>, b\u1ea1n \u0111\u00e3 c\u00f3 th\u1ec3 x\u00e2y d\u1ef1ng 80% giao di\u1ec7n \u1ee9ng d\u1ee5ng. 20% c\u00f2n l\u1ea1i n\u1eb1m \u1edf vi\u1ec7c t\u1ed1i \u01b0u h\u00f3a hi\u1ec7u n\u0103ng v\u1edbi&nbsp;<strong>StatefulWidget<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. Tri\u1ebft l\u00fd &#8220;Everything is a Widget&#8221; (C\u01a1 ch\u1ebf Composition) Trong Flutter, Widget kh\u00f4ng ch\u1ec9 l\u00e0 m\u1ed9t Component UI (nh\u01b0 Button hay Label), n\u00f3 l\u00e0 m\u1ed9t&nbsp;Configuration (C\u1ea5u h\u00ecnh). 2. Qu\u1ea3n l\u00fd tr\u1ea1ng th\u00e1i (State Management &amp; Reactive UI) D\u00e2n k\u1ef9 thu\u1eadt nh\u00ecn UI c\u1ee7a Flutter qua c\u00f4ng th\u1ee9c to\u00e1n h\u1ecdc:UI = f(state) 3. GestureDetector (C\u01a1 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/hoangnam26.id.vn\/index.php?rest_route=\/wp\/v2\/posts\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hoangnam26.id.vn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hoangnam26.id.vn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hoangnam26.id.vn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hoangnam26.id.vn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":9,"href":"https:\/\/hoangnam26.id.vn\/index.php?rest_route=\/wp\/v2\/posts\/7\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/hoangnam26.id.vn\/index.php?rest_route=\/wp\/v2\/posts\/7\/revisions\/29"}],"wp:attachment":[{"href":"https:\/\/hoangnam26.id.vn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hoangnam26.id.vn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hoangnam26.id.vn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}