{"id":5634,"date":"2021-04-22T09:06:22","date_gmt":"2021-04-22T02:06:22","guid":{"rendered":"https:\/\/briswell-vn.com\/?p=5634"},"modified":"2021-04-22T09:06:22","modified_gmt":"2021-04-22T02:06:22","slug":"flutter2","status":"publish","type":"post","link":"https:\/\/www.briswell-vn.com\/en\/news\/flutter2\/","title":{"rendered":"Flutter2"},"content":{"rendered":"

At 2021\/3\/4, Flutter2 <\/a>\u00a0was released with new features added:<\/p>\n

\n

– Web’s , desktop’s support has been in stable channel (they were in beta channel before), which mean you can bring your app officially to Web, Mac OS and Windows OS.<\/p>\n

\n

– Sound Null Safety<\/a>, but not all packages has been updated with this feature so consider this when you intend to upgrade your current project with new Flutter version.<\/p>\n<\/div>\n

\n

– New widgets: Autocomplete<\/a>\u00a0and ScaffoldMessenger<\/a>.<\/p>\n

\n

– Upgrade on extensions for code editors(Visual Studio Code<\/a> and Android Studio<\/a>).<\/p>\n

\n

– Ecosystem and DevTools updates, Bug fixes, Flutter Fix are also included.<\/p>\n

You can refer all of updates at Announcing Flutter 2<\/a>. If you want to give it a try, you can download it at here.<\/a><\/p>\n

And right now we will show you from how to configure 1 Flutter2 app in MacOS and run it in different platforms (iOS, Web, MacOS), keep reading!<\/div>\n<\/div>\n
\n
<\/div>\n

Configure Flutter2<\/h2>\n
\n
In case you have been working in some Flutter1 projects and you don’t want to upgrade them to Flutter2, you have to configure the path for Flutter as following, otherwise you can skip this step.<\/div>\n<\/div>\n

After unzipping downloaded Flutter2 folder, open Terminal<\/strong> app then type:<\/p>\n

nano ~\/.bash_profile<\/pre>\n
\n
Add alias path to Flutter2 folder to .bash_profile<\/em> file:<\/div>\n<\/div>\n<\/div>\n
\n
alias flutter2=\/path\/to\/flutter2\/bin\/flutter<\/pre>\n
\n
Reload .bash_profile<\/em> file<\/div>\n
\n
\n
source ~\/.bash_profile<\/pre>\n
\n
Now when you run flutter2 <\/strong>command you will work in Flutter2 only. You can check version for sure:<\/div>\n
flutter2 --version<\/pre>\n<\/div>\n<\/div>\n
You will see some thing like below:<\/div>\n
\n
Flutter 2.0.1 \u2022 channel stable \u2022 https:\/\/github.com\/flutter\/flutter.git\r\nFramework \u2022 revision c5a4b4029c (2 weeks ago) \u2022 2021-03-04 09:47:48 -0800\r\nEngine \u2022 revision 40441def69\r\nTools \u2022 Dart 2.12.0<\/pre>\n
\n
Upgrade if needed:<\/div>\n
\n
flutter2 upgrade<\/pre>\n
\n
Create new project and configure with Visual Studio Code (VSCode)<\/h2>\n
Open Terminal<\/strong> app, create a new project named sample_flutter2<\/strong><\/p>\n
\n
flutter2 create sample_flutter2<\/pre>\n
Open project with VSCode, then add flutter2 SDK path by creating file settings.json<\/em> in folder .vs_code\/ <\/span><\/em>then paste following:<\/p>\n
\n
{\r\n\"dart.flutterSdkPath\": \"path\/to\/flutter2\/folder\"\r\n}<\/pre>\n
Run in iOS<\/h2>\n
\n
From VSCode<\/strong>, select iphone as run device(in here we select iphone simulator iPhone12 Pro Max)<\/div>\n
\"\"<\/div>\n
\n
\n
Then run, easy!!<\/div>\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
Build to .ipa<\/h4>\n
flutter2 build ipa --profile<\/pre>\n
Above command will output Runner.xcarchive at folder build\/ios\/archive, which click on it will open Xcode, you can archive to .ipa file normally from then<\/p>\n
\"\"<\/p>\n
Note: besides –profile<\/em> flag you can also choose –release<\/em> flag for release mode,(Flutter has 3 build mode: debug, profile and release mode)<\/p>\n
Run in Web<\/h2>\n
\n
From VSCode<\/strong>, select Chrome<\/strong> as run device<\/div>\n
\"\"<\/div>\n
Then you will see what exactly with iOS version<\/div>\n
\"\"<\/div>\n
<\/div>\n
\n
Build to html<\/h4>\n
\n
flutter2 build web --web-renderer html --profile<\/pre>\n
–profile<\/em>: build mode (profile<\/em> or release<\/em> flag)<\/div>\n
–web-renderer html<\/em>: render mode, there are 3 options:<\/div>\n
\u00a0 – auto<\/em>: When app run in mobile browser, it will use HTML render. In case app run in desktop browser, it will use CanvasKit renderer<\/div>\n
\n
\u00a0 – html<\/em>: App always use HTML render.<\/div>\n
\u00a0 – canvaskit<\/em>: App always use Canvaskit render.<\/div>\n
<\/div>\n<\/div>\n
\n
Above command will output .html, .css, .js files at build\/web\/ folder. If you try running .\/build\/web\/index.html<\/em> directly in Chrome, you may have the following error:<\/p>\n
\n
Access to internal resource at 'file:\/\/\/manifest.json' from origin 'null' has been blocked by CORS policy: \r\nCross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.<\/pre>\n
To avoid that, you can use a Chrome’s extension named Web Server for Chrome<\/a> to simulate a local server on the folder .\/build\/web\/<\/em> then you can try to run index.html<\/em> again.<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
Run in Mac OS<\/h2>\n
\n
You need to enable desktop develop first<\/div>\n
\n
– For MacOS<\/strong> development<\/p>\n
flutter2 config --enable-macos-desktop<\/pre>\n<\/div>\n
\n
– For Windows<\/strong> development<\/p>\n
flutter2 config --enable-windows-desktop<\/pre>\n<\/div>\n
\n
– For Linux<\/strong> development<\/p>\n
flutter2 config --enable-linux-desktop<\/pre>\n<\/div>\n
\n
Then add desktop support to existing project<\/div>\n
flutter2 create --platforms=windows,macos,linux .<\/pre>\n
You can choose what OS as you want (windows\/macos\/linux).<\/div>\n
<\/div>\n
\n
From VSCode, select desktop version as run device(in here we select macOS<\/strong>)<\/div>\n<\/div>\n
\"\"<\/div>\n
\n
\n
Then run, that all!!<\/div>\n
\"\"<\/div>\n<\/div>\n
Output to .app file<\/h4>\n
\n
flutter2 build macos --profile<\/pre>\n
Above command will output sample_flutter2.app<\/em> file at \/build\/macos\/Build\/Products\/Profile<\/em> with profile build mode (you can select –release<\/em> flag if you want)<\/div>\n
<\/div>\n
Flutter’s pros (Good points)<\/h2>\n<\/div>\n
\n
\n
– Obviously, the best of Flutter is multi-platform supported, which is the good choice for start-up to start with. We can implement from iOS or Android\u00a0 then re-use source code for Web version in the future with the cost is much below than building from the beginning in each platform.<\/div>\n<\/div>\n
\n
\n
<\/div>\n
– The app UI and logic don\u2019t change depending on the platform, it look and work exactly in every platform.<\/div>\n
<\/div>\n
– Flutter is growing very fast with many 3rd party libraries at pub.dev<\/a><\/div>\n<\/div>\n
\n
\n
<\/div>\n
– Hot reload<\/strong> easily with VSCode or Android Studio, so compare with native languages like Swift, Kotlin, developing progress will save a ton of time for debugging, which save much cost in development progress.<\/div>\n<\/div>\n
<\/div>\n
– Reduce UI coding time with a lot of custom and ready-made Widget.<\/div>\n<\/div>\n
<\/div>\n
– Dart is a simple to learn language, many people with little coding knowledge can develop prototypes and apps.<\/div>\n
\n
\n
<\/div>\n<\/div>\n
\n
\n
– Flutter documentations are also highly recommended, those are from the UI tutorial<\/a> understanding easily to the detailed document<\/a><\/div>\n
.<\/p>\n<\/div>\n<\/div>\n
<\/div>\n
\n
Flutter’s cons (Disadvantages)<\/h2>\n
\n
– First of all,Dart is not a widespread language compared to Kotlin, Swift, so you need to learn a new language (Dart), new concepts(BLOC,Widgets,..) for Flutter development<\/div>\n
<\/div>\n<\/div>\n
– You still need a good base knowledge in native languages(Swift, kotlin) to solve problems in a specific platform, a OS version, or even in a specific device models which Android has so many trouble on this.<\/div>\n
<\/div>\n
\n
\n
– Not all 3rd libraries support all your expected platforms. Almost of them support iOS and Android (or 1 in 2 only).<\/div>\n<\/div>\n
\n
\n
<\/div>\n
– When developing, the error screen that you get when there\u2019s a layout error (or something else at a lower level) can be very confusing.<\/div>\n
\"\"<\/div>\n<\/div>\n<\/div>\n
\n
\n
<\/div>\n
– There are still animation issues (for example<\/a>), so please consider this if you want to build an app with complex animation effects.<\/div>\n<\/div>\n
\n
\n
<\/div>\n
– This framework basically aim for building mobile applications so with web or desktop platforms, there are some different UI, UX, so you can not take them all(business, UI, UX) to every platform with the same code. Solution for this issue: you can create common components, business process in a package (how to do<\/a>) then create different projects for each platform implementing those package. Perhaps this is not the best solution but at least you sill can share the common point in every platforms.<\/div>\n<\/div>\n
\n
Overview<\/h2>\n<\/div>\n<\/div>\n
\n
\n
Flutter has many more advantages for business and development teams than risks. It\u2019s a great chance to build beautiful, high-performance, and outstanding apps that fit your custom needs and requirements. It\u2019s worth considering Flutter, especially if you want an app both for iOS and Android.<\/div>\n
Flutter 2 is already available, give it a try and we believe you wont’t regret about that!<\/div>\n<\/div>\n
Refers<\/h2>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
– https:\/\/proxify.io\/articles\/flutter-2-null-safety<\/a><\/div>\n
– https:\/\/developers.googleblog.com\/2021\/03\/announcing-flutter-2.html<\/a><\/div>\n
– https:\/\/medium.com\/coding-with-flutter\/whats-great-about-flutter-c1b4e44c69ac<\/a><\/div>\n
– https:\/\/www.thedroidsonroids.com\/blog\/flutter-in-mobile-app-development-pros-and-cons-for-app-owners<\/a><\/div>\n
– https:\/\/flutter.dev<\/a><\/div>\n
– https:\/\/pub.dev\/<\/a><\/div>\n
– https:\/\/www.youtube.com\/playlist?list=PLOU2XLYxmsIL0pH0zWe_ZOHgGhZ7UasUE<\/a><\/div>\n<\/div>\n
 <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/p>","protected":false},"excerpt":{"rendered":"
At 2021\/3\/4, Flutter2 \u00a0was released with new features added: – Web’s , desktop’s support has been in stable channel (they were in beta channel before), which mean you can bring your app officially to Web, Mac OS and Windows OS. – Sound Null Safety, but not all packages has been updated with this feature so consider this when you intend to upgrade your current project […]<\/p>\n","protected":false},"author":2,"featured_media":5713,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"footnotes":""},"categories":[4,71],"tags":[85,86,94,95],"class_list":["post-5634","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","category-it-tec","tag-ios","tag-android","tag-it","tag-flutter"],"_links":{"self":[{"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/posts\/5634","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/comments?post=5634"}],"version-history":[{"count":0,"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/posts\/5634\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/media\/5713"}],"wp:attachment":[{"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/media?parent=5634"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/categories?post=5634"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/tags?post=5634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}