[{"data":1,"prerenderedAt":644},["ShallowReactive",2],{"news-item-\u002Fvi\u002Fnews\u002Fflutter2":3},{"id":4,"title":5,"body":6,"category":629,"created by":632,"date":633,"description":634,"extension":635,"meta":636,"navigation":637,"path":638,"sections":639,"seo":640,"stem":641,"thumbnail":642,"__hash__":643},"content_vi\u002Fvi\u002Fnews\u002Fflutter2.md","Flutter2",{"type":7,"value":8,"toc":617},"minimark",[9,20,68,82,85,90,93,101,112,120,126,131,137,144,150,153,159,162,168,172,181,187,198,204,208,219,227,230,234,239,245,252,257,268,272,282,286,289,293,297,303,315,321,341,352,358,375,379,382,390,396,403,409,416,422,425,431,434,437,441,444,448,452,458,472,476,520,524,538,543,563,567,570,573,577],[10,11,12,13,19],"p",{},"Vào ngày 4\u002F3\u002F2021, ",[14,15,5],"a",{"href":16,"rel":17,"title":5},"https:\u002F\u002Fdevelopers.googleblog.com\u002F2021\u002F03\u002Fannouncing-flutter-2.html",[18],"nofollow"," đã được công bố với các tính năng mới như sau:",[21,22,23,27,35,50,65],"ul",{},[24,25,26],"li",{},"Hỗ trợ  cho web và desktop(ứng dụng trên hệ điều hành) đã ở trên kênh stable(trước đây chúng ở trên kênh beta), điều này có nghĩa là bạn có thể chính thức mang ứng dụng của mình chạy trên Web, hệ điều hành Mac và Windows.",[24,28,29,34],{},[14,30,33],{"href":31,"rel":32},"https:\u002F\u002Fproxify.io\u002Farticles\u002Fflutter-2-null-safety",[18],"Sound Null Safety",": không phải tất cả các thư viện đều cập nhật tính năng này nên bạn cần xem xét vấn đề này khi có ý định cập nhật phiên bản Flutter cho dự án của bạn.",[24,36,37,38,43,44,49],{},"Các Widget mới : ",[14,39,42],{"href":40,"rel":41},"https:\u002F\u002Fapi.flutter.dev\u002Fflutter\u002Fmaterial\u002FAutocomplete-class.html",[18],"Autocomplete"," và ",[14,45,48],{"href":46,"rel":47},"https:\u002F\u002Fapi.flutter.dev\u002Fflutter\u002Fmaterial\u002FScaffoldMessenger-class.html",[18],"ScaffoldMessenger",".",[24,51,52,53,58,59,64],{},"Nâng cấp phần mở rộng cho các công cụ lập trình(",[14,54,57],{"href":55,"rel":56},"https:\u002F\u002Fflutter.dev\u002Fdocs\u002Fdevelopment\u002Ftools\u002Fvs-code",[18],"Visual Studio Code"," và ",[14,60,63],{"href":61,"rel":62},"https:\u002F\u002Fflutter.dev\u002Fdocs\u002Fdevelopment\u002Ftools\u002Fandroid-studio",[18],"Android Studio",").",[24,66,67],{},"Cập nhật Ecosystem và DevTools, thêm Flutter Fix và fix các lỗi.",[10,69,70,71,75,76,81],{},"Bạn có thể tham khảo toàn bộ cập nhật mới ở ",[14,72,74],{"href":16,"rel":73},[18],"Announcing Flutter 2",". Nếu bạn muốn trải nghiệm thì bạn có thể tải về bản cài đặt ở ",[14,77,80],{"href":78,"rel":79},"https:\u002F\u002Fflutter.dev\u002Fdocs\u002Fget-started\u002Finstall",[18],"đây"," .",[10,83,84],{},"Sau đây chúng tôi sẽ hướng dẫn bạn cấu hình cho 1 dự án Flutter2 trên hệ điều hành Mac và chạy nó trên các nền tảng khác nhau(iOS, Web, Mac). Tiếp tục đọc nhé!",[86,87,89],"h2",{"id":88},"cấu-hình-flutter2","Cấu hình Flutter2",[10,91,92],{},"Trong trường hợp bạn đang làm việc với 1 số dự án Flutter1 và bạn không muốn nâng cấp chúng lên Flutter2, bạn sẽ phải cấu hình đường dẫn cho Flutter như sau, còn nếu không bạn có thể bỏ qua bước này.",[10,94,95,96,100],{},"Sau khi giải nén thư mục Flutter2 mới tải về, mở ứng dụng ",[97,98,99],"strong",{},"Terminal"," sau đó gõ vào:",[102,103,108],"pre",{"className":104,"code":106,"language":107},[105],"language-text","nano ~\u002F.bash_profile\n","text",[109,110,106],"code",{"__ignoreMap":111},"",[10,113,114,115,119],{},"Thêm đường dẫn định danh đến thư mục Flutter vào file ",[116,117,118],"em",{},".bash_profile",":",[102,121,124],{"className":122,"code":123,"language":107},[105],"alias flutter2=\u002Fđường\u002Fdẫn\u002Fđến\u002Fflutter2\u002Fbin\u002Fflutter\n",[109,125,123],{"__ignoreMap":111},[10,127,128,129],{}," Tải lại file ",[116,130,118],{},[102,132,135],{"className":133,"code":134,"language":107},[105],"source ~\u002F.bash_profile\n",[109,136,134],{"__ignoreMap":111},[10,138,139,140,143],{},"Bây giờ khi bạn chạy lệnh ",[116,141,142],{},"flutter2"," bạn sẽ chỉ làm việc với Flutter2. Để chắc chắn bạn nên kiểm tra phiên bản Flutter2 trước.",[102,145,148],{"className":146,"code":147,"language":107},[105],"flutter2 --version\n",[109,149,147],{"__ignoreMap":111},[10,151,152],{},"Bạn sẽ thấy kết quả đại loại như sau:",[102,154,157],{"className":155,"code":156,"language":107},[105],"Flutter 2.0.1 • channel stable • https:\u002F\u002Fgithub.com\u002Fflutter\u002Fflutter.git\nFramework • revision c5a4b4029c (2 weeks ago) • 2021-03-04 09:47:48 -0800\nEngine • revision 40441def69\nTools • Dart 2.12.0\n",[109,158,156],{"__ignoreMap":111},[10,160,161],{},"Nâng cấp phiên bản nếu bạn thấy cần thiết:",[102,163,166],{"className":164,"code":165,"language":107},[105],"flutter2 upgrade\n",[109,167,165],{"__ignoreMap":111},[86,169,171],{"id":170},"tạo-1-dự-án-mới-và-cấu-hình-với-visual-studio-code-vscode","Tạo 1 dự án mới và cấu hình với Visual Studio Code (VSCode)",[10,173,174,175,177,178],{},"Mở ứng dụng ",[97,176,99],{},", tạo 1 dự án mới tên là ",[97,179,180],{},"sample_flutter2.",[102,182,185],{"className":183,"code":184,"language":107},[105],"flutter2 create sample_flutter2\n",[109,186,184],{"__ignoreMap":111},[10,188,189,190,193,194,197],{},"Mở dự án với VSCode, sau đó thêm đường dẫn tới thư mục flutter bằng cách tạo 1 file ",[116,191,192],{},"settings.json"," trong thư mục ",[116,195,196],{},".vs_code\u002F"," sau đó dán đoạn mã sau vào:",[102,199,202],{"className":200,"code":201,"language":107},[105],"{\n\"dart.flutterSdkPath\": \"đường\u002Fdẫn\u002Fđến\u002Fflutter2\"\n}\n",[109,203,201],{"__ignoreMap":111},[86,205,207],{"id":206},"chạy-trên-ios","Chạy trên iOS",[10,209,210,211,214,215,218],{},"Trong ",[97,212,213],{},"VSCode",", chọn thiết bị chạy iPhone(ở đây chúng ta chọn iPhone simulator ",[97,216,217],{},"iPhone12 Pro Max",")",[220,221],"img",{"className":222,"alt":111,"src":225,"style":226},[223,224],"block","mx-auto","https:\u002F\u002Fs3-ap-southeast-1.amazonaws.com\u002Fhomepage-media\u002Fwp-content\u002Fuploads\u002F2021\u002F03\u002F29104853\u002Fselect_iphone.png","width: 50%;",[10,228,229],{},"Sau đó chạy thôi nào, thật dễ dàng phải không?",[220,231],{"className":232,"alt":111,"src":233,"style":226},[223,224],"https:\u002F\u002Fs3-ap-southeast-1.amazonaws.com\u002Fhomepage-media\u002Fwp-content\u002Fuploads\u002F2021\u002F03\u002F29104929\u002Frun_in_iphone.png",[235,236,238],"h4",{"id":237},"xuất-file-ipa","Xuất file .ipa",[102,240,243],{"className":241,"code":242,"language":107},[105],"flutter2 build ipa --profile\n",[109,244,242],{"__ignoreMap":111},[10,246,247,248,251],{},"Lệnh trên sẽ xuất ra 1 file ",[97,249,250],{},"Runner.xcarchive"," tại thư mục build\u002Fios\u002Farchive, hãy click vào nó, Xcode sẽ tự động được mở và bạn có thể kết xuất ra file .ipa như với 1 app iOS thông thường",[220,253],{"className":254,"alt":111,"src":255,"style":256},[223,224],"https:\u002F\u002Fs3-ap-southeast-1.amazonaws.com\u002Fhomepage-media\u002Fwp-content\u002Fuploads\u002F2021\u002F03\u002F29131227\u002FScreen-Shot-2021-03-29-at-13.12.14-1024x199.png","width: 100%;",[10,258,259,260,263,264,267],{},"Chú ý: bên cạnh cờ ",[116,261,262],{},"--profile"," bạn cũng có thể sử dụng cờ ",[116,265,266],{},"--release"," cho chế độ release(Flutter có 3 chế độ build: debug, profile và release)",[86,269,271],{"id":270},"chạy-trên-web","Chạy trên Web",[10,273,274,275,277,278,281],{},"Trong ",[97,276,213],{},", chọn ",[97,279,280],{},"Chrome"," làm thiết bị chạy",[220,283],{"className":284,"alt":111,"src":285,"style":226},[223,224],"https:\u002F\u002Fs3-ap-southeast-1.amazonaws.com\u002Fhomepage-media\u002Fwp-content\u002Fuploads\u002F2021\u002F03\u002F29105750\u002Fselect_device.png",[10,287,288],{},"Và bạn sẽ thấy chính xác những gì bạn thấy trên phiên bản iOS",[220,290],{"className":291,"alt":111,"src":292,"style":256},[223,224],"https:\u002F\u002Fs3-ap-southeast-1.amazonaws.com\u002Fhomepage-media\u002Fwp-content\u002Fuploads\u002F2021\u002F03\u002F29124734\u002Fchrome_result-1024x960.png",[235,294,296],{"id":295},"xuất-ra-html","Xuất ra html",[102,298,301],{"className":299,"code":300,"language":107},[105],"flutter2 build web --web-renderer html --profile\n",[109,302,300],{"__ignoreMap":111},[10,304,305,307,308,311,312,218],{},[116,306,262],{},": chế độ build(",[116,309,310],{},"profile"," hay ",[116,313,314],{},"release",[10,316,317,320],{},[116,318,319],{},"--web-renderer html",": chế độ render, có 3 lựa chọn:",[21,322,323,329,335],{},[24,324,325,328],{},[116,326,327],{},"auto",": Khi ứng dụng chạy trên trình duyệt di động, nó sẽ sử dụng cơ chế render HTML. Khi ứng dụng chạy trên trình duyệt máy tính, nó sẽ sử dụng cơ chế render CanvasKit.",[24,330,331,334],{},[116,332,333],{},"html",": ứng dụng luôn sử dụng cơ chế render HTML.",[24,336,337,340],{},[116,338,339],{},"canvaskit",": ứng dụng luôn sử dụng cơ chế render CanvasKit.",[10,342,343,344,347,348,351],{},"Lệnh trên sẽ xuất ra các file .html, .css, .js tại thư mục ",[116,345,346],{},"\u002Fbuild\u002Fweb\u002F",". Nếu bạn chạy trực tiếp file ",[116,349,350],{},".\u002Fbuild\u002Fweb\u002Findex.html,"," bạn có thể gặp phải lỗi sau:",[102,353,356],{"className":354,"code":355,"language":107},[105],"Access to internal resource at 'file:\u002F\u002F\u002Fmanifest.json' from origin 'null' has been blocked by CORS policy: \nCross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.\n",[109,357,355],{"__ignoreMap":111},[10,359,360,361,366,367,370,371,374],{},"Để tránh lỗi trên thì bạn có thể sử dụng 1 phần mở rộng của Chrome tên là ",[14,362,365],{"href":363,"rel":364},"https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fweb-server-for-chrome\u002Fofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en)",[18],"Web Server for Chrome"," để giả lập 1 local server trong folder ",[116,368,369],{},".\u002Fbuild\u002Fweb\u002F"," và sau đó bạn hãy chạy thử lại file ",[116,372,373],{},"index.html"," 1 lần nữa.",[86,376,378],{"id":377},"chạy-trên-hệ-điều-hành-mac","Chạy trên hệ điều hành Mac",[10,380,381],{},"Bạn cần kích hoạt chế độ phát triển cho hệ điều hành trước",[21,383,384],{},[24,385,386,387],{},"Dành cho hệ điều hành ",[97,388,389],{},"Mac",[102,391,394],{"className":392,"code":393,"language":107},[105],"flutter2 config --enable-macos-desktop\n",[109,395,393],{"__ignoreMap":111},[21,397,398],{},[24,399,386,400],{},[97,401,402],{},"Windows",[102,404,407],{"className":405,"code":406,"language":107},[105],"flutter2 config --enable-windows-desktop\n",[109,408,406],{"__ignoreMap":111},[21,410,411],{},[24,412,386,413],{},[97,414,415],{},"Linux",[102,417,420],{"className":418,"code":419,"language":107},[105],"flutter2 config --enable-linux-desktop\n",[109,421,419],{"__ignoreMap":111},[10,423,424],{},"Sau đó thêm hỗ trợ cho hệ điều hành vào dự án",[102,426,429],{"className":427,"code":428,"language":107},[105],"flutter2 create --platforms=windows,macos,linux .\n",[109,430,428],{"__ignoreMap":111},[10,432,433],{},"Bạn có thể chọn bất kỳ hệ điều hành nào mà bạn muốn (windows\u002Fmacos\u002Flinux).",[10,435,436],{},"Chọn thiết bị chạy là macOS trên VSCode",[220,438],{"className":439,"alt":111,"src":440,"style":226},[223,224],"https:\u002F\u002Fs3-ap-southeast-1.amazonaws.com\u002Fhomepage-media\u002Fwp-content\u002Fuploads\u002F2021\u002F03\u002F29140531\u002Fselect_desktop.png",[10,442,443],{},"Sau đó chạy thôi!!",[220,445],{"className":446,"alt":111,"src":447,"style":256},[223,224],"https:\u002F\u002Fs3-ap-southeast-1.amazonaws.com\u002Fhomepage-media\u002Fwp-content\u002Fuploads\u002F2021\u002F03\u002F29140649\u002Fdesktop_version-1024x738.png",[235,449,451],{"id":450},"xuất-file-app","Xuất file .app",[102,453,456],{"className":454,"code":455,"language":107},[105],"flutter2 build macos --profile\n",[109,457,455],{"__ignoreMap":111},[10,459,460,461,464,465,468,469,471],{},"Lệnh trên sẽ xuất ra file ",[116,462,463],{},"sample_flutter2.app"," tại thư mục ",[116,466,467],{},"\u002Fbuild\u002Fmacos\u002FBuild\u002FProducts\u002FProfile"," với chế độ build là profile(bạn có thể chọn cờ ",[116,470,266],{}," nếu bạn muốn)",[86,473,475],{"id":474},"ưu-điểm-của-flutter","Ưu điểm của Flutter",[21,477,478,481,484,493,500,503,506],{},[24,479,480],{},"Hiển nhiên, thế mạnh nhất của Flutter là hỗ trợ đa nền tảng, đây là 1 lựa chọn khởi đầu tốt cho các công ty start-up. Chúng ta có thể xây dựng từ nền tảng iOS hay Android trước và sau đó sử dụng code lại cho  bản Web sau này, điều này sẽ giúp cắt giảm công số cho việc xây dựng lại hoàn toàn từ đầu khi bắt đầu xây dựng 1 nền tảng mới.",[24,482,483],{},"UI và logic của ứng dụng không thay đổi dù cho ở nền tảng nào.",[24,485,486,487,492],{},"Flutter đang phát triển rất nhanh với rất nhiều thư viện được phát triển bởi bên thứ 3 tại  ",[14,488,491],{"href":489,"rel":490},"https:\u002F\u002Fpub.dev\u002F",[18],"pub.dev"," .",[24,494,495,496,499],{},"Tính năng ",[97,497,498],{},"Hot reload"," vô cùng dễ dàng trên VSCode và Android Studio, nếu so sánh với các ngôn ngữ như Swift, Kotlin thì việc phát triển sẽ tiết kiệm được 1 mớ thời gian cho việc debug, từ đó sẽ giảm thiểu công số cho giai đoạn phát triển.",[24,501,502],{},"Flutter cung cấp rất nhiều Widget và có thể điều chỉnh được, giúp tiết kiệm được thời gian cho việc xây dựng giao diện.",[24,504,505],{},"Dart là 1 ngôn ngữ đơn giản và dể học, rất nhiều người với rất ít kiến thức lập trình cũng có thể phát triển được các bản thử và ứng dụng.",[24,507,508,509,514,515],{},"Tài liệu Flutter cũng được đánh giá cao, từ các ",[14,510,513],{"href":511,"rel":512},"https:\u002F\u002Fwww.youtube.com\u002Fplaylist?list=PLOU2XLYxmsIL0pH0zWe_ZOHgGhZ7UasUE",[18],"hướng dẫn UI"," ngắn nhưng dễ hiểu tới các ",[14,516,519],{"href":517,"rel":518},"https:\u002F\u002Fflutter.dev\u002Fdocs\u002Fdevelopment\u002Fui\u002Flayout\u002Fconstraints",[18],"tài liệu chi tiết",[86,521,523],{"id":522},"nhược-điểm-của-flutter","Nhược điểm của Flutter",[21,525,526,529,532,535],{},[24,527,528],{},"Trên hết Dart vẫn chưa phải là 1 ngôn ngữ phổ biến nếu so sánh với Kotlin, Swift, vì vậy bạn cần phải học 1 ngôn ngữ mới và các khái niệm mới (Bloc, Widget,..) nếu bạn muốn sử dụng Flutter.",[24,530,531],{},"Bạn vẫn cần 1 kiến thức nền tảng nhất định về các ngôn ngữ gốc (Swift, Kotlin) để giải quyết các vấn đề xảy ra trên 1 nền tảng nhất định, 1 phiên bản hệ điều hành hay thậm chí là ở trên 1 dòng máy nhất định điều mà rất hay phổ biến ở Android.",[24,533,534],{},"Không phải tất cả thư viện thứ 3 đều hỗ trợ tất cả các nền tảng mà bạn mong muốn, hầu hết chúng chỉ hỗ trợ đa số là iOS và Android (đôi khi chỉ là 1 trong 2).",[24,536,537],{},"Khi phát triển, việc xuất hiện của màn hình lỗi đỏ khi có 1 lỗi layout (hay những xử lý ở lớp thấp hơn) sẽ khá khó hiểu.",[220,539],{"className":540,"alt":111,"src":541,"style":542},[223,224],"https:\u002F\u002Fs3-ap-southeast-1.amazonaws.com\u002Fhomepage-media\u002Fwp-content\u002Fuploads\u002F2021\u002F03\u002F29142020\u002Ferror.png","width: 20%;",[21,544,545,554],{},[24,546,547,548,553],{},"Hiện tại thì vẫn còn nhiều vấn đề liên quan đến xử lý hiệu ứng hình ảnh(",[14,549,552],{"href":550,"rel":551},"https:\u002F\u002Fgithub.com\u002Fflutter\u002Fflutter\u002Fissues\u002F61450",[18],"ví dụ","), vì thế cần cân nhắc khi bạn muốn xây dựng 1 ứng dụng với các xử lý hiệu ứng hình ảnh phức tạp.",[24,555,556,557,562],{},"Framework Flutter về căn bản thì chủ yếu hướng tới việc xây dựng các ứng dụng cho di động vì thế với các nền tảng như web hay hệ điều hành thì chắc chắn sẽ có sự khác nhau về UX, UI, vì thế bạn không thể mang tất cả (xử lý logic, UI, UX) vào tất cả các nền tảng trong cùng 1 source code. Tuy nhiên cũng có 1 giải pháp cho điều này là bạn có thể tạo ra những Widget, xử lý logic chung chứa trong 1 hay nhiều package (",[14,558,561],{"href":559,"rel":560},"https:\u002F\u002Fflutter.dev\u002Fdocs\u002Fdevelopment\u002Fpackages-and-plugins\u002Fdeveloping-packages",[18],"cách tạo package","), sau đó hãy tạo từng dự án riêng biệt cho từng nền tảng và sử dụng các package trên giống như cách bạn sử dụng thư viện bên thứ 3. Có thể đây không phải là 1 giải pháp tốt nhất nhưng ít ra thì bạn vẫn có thể chia sẻ những điểm chung ở tất cả các nền tảng.",[86,564,566],{"id":565},"lời-kết","Lời kết",[10,568,569],{},"So với những rủi ro thì Flutter vẫn có nhiều ưu điểm cho kinh doanh và đội ngũ phát triển hơn. Đây là 1 lựa chọn rất tuyệt để xây dựng các ứng dụng với giao diện đẹp, hiệu suất cao, đáp ứng hết các yêu cầu của khách hàng của bạn. Đặc biệt nếu bạn mong muốn 1 ứng dụng mobile iOS, Android thì chắc chắn rất đáng để thử đấy.",[10,571,572],{},"Flutter 2  đã chính thức ra mắt rồi, hãy thử sử dụng nào, chúng tôi tin bạn sẽ không hối tiếc về sự lựa chọn này đâu!",[86,574,576],{"id":575},"tham-khảo","Tham khảo",[21,578,579,584,589,595,601,607,612],{},[24,580,581],{},[14,582,31],{"href":31,"rel":583},[18],[24,585,586],{},[14,587,16],{"href":16,"rel":588},[18],[24,590,591],{},[14,592,593],{"href":593,"rel":594},"https:\u002F\u002Fmedium.com\u002Fcoding-with-flutter\u002Fwhats-great-about-flutter-c1b4e44c69ac",[18],[24,596,597],{},[14,598,599],{"href":599,"rel":600},"https:\u002F\u002Fwww.thedroidsonroids.com\u002Fblog\u002Fflutter-in-mobile-app-development-pros-and-cons-for-app-owners",[18],[24,602,603],{},[14,604,605],{"href":605,"rel":606},"https:\u002F\u002Fflutter.dev",[18],[24,608,609],{},[14,610,489],{"href":489,"rel":611},[18],[24,613,614],{},[14,615,511],{"href":511,"rel":616},[18],{"title":111,"searchDepth":618,"depth":618,"links":619},2,[620,621,622,623,624,625,626,627,628],{"id":88,"depth":618,"text":89},{"id":170,"depth":618,"text":171},{"id":206,"depth":618,"text":207},{"id":270,"depth":618,"text":271},{"id":377,"depth":618,"text":378},{"id":474,"depth":618,"text":475},{"id":522,"depth":618,"text":523},{"id":565,"depth":618,"text":566},{"id":575,"depth":618,"text":576},[630,631],"tech talk","mobile","Briswell Vietnam Co Ltd","2021-04-22","Vào ngày 4\u002F3\u002F2021 Flutter2 đã được công bố với các tính năng mới như sau: Hỗ trợ  cho web và desktop(ứng dụng trên hệ điều hành) đã ở trên kênh stable(trước đây chúng ở trên kênh beta), điều này có nghĩa là bạn có thể chính thức mang ứng dụng của mình chạy trên Web, hệ điều hành Mac và Windows.","md",{},true,"\u002Fvi\u002Fnews\u002Fflutter2",null,{"title":5,"description":634},"vi\u002Fnews\u002Fflutter2","https:\u002F\u002Fs3-ap-southeast-1.amazonaws.com\u002Fhomepage-media\u002Fwp-content\u002Fuploads\u002F2021\u002F04\u002F06103446\u002Fflutter2.png","Yb3edSzV-mq-7aNxI5qFwp_BYzCC8bVwnwCoy-FjqYM",1782205037269]