At 2021/3/4, Flutter2 was 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 with new Flutter version.
– New widgets: Autocomplete and ScaffoldMessenger.
– Upgrade on extensions for code editors(Visual Studio Code and Android Studio).
– Ecosystem and DevTools updates, Bug fixes, Flutter Fix are also included.
You can refer all of updates at Announcing Flutter 2. If you want to give it a try, you can download it at here.
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!
Configure Flutter2
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.
After unzipping downloaded Flutter2 folder, open Terminal app then type:
nano ~/.bash_profile
Add alias path to Flutter2 folder to .bash_profile file:
alias flutter2=/path/to/flutter2/bin/flutter
Reload .bash_profile file
source ~/.bash_profile
Now when you run flutter2 command you will work in Flutter2 only. You can check version for sure:
flutter2 --version
You will see some thing like below:
Flutter 2.0.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision c5a4b4029c (2 weeks ago) • 2021-03-04 09:47:48 -0800
Engine • revision 40441def69
Tools • Dart 2.12.0
Upgrade if needed:
flutter2 upgrade
Create new project and configure with Visual Studio Code (VSCode)
Open Terminal app, create a new project named sample_flutter2
flutter2 create sample_flutter2
Open project with VSCode, then add flutter2 SDK path by creating file settings.json in folder .vs_code/ then paste following:
{
"dart.flutterSdkPath": "path/to/flutter2/folder"
}
Run in iOS
From VSCode, select iphone as run device(in here we select iphone simulator iPhone12 Pro Max)
Build to .ipa
flutter2 build ipa --profile
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
Note: besides –profile flag you can also choose –release flag for release mode,(Flutter has 3 build mode: debug, profile and release mode)
Run in Web
From VSCode, select Chrome as run device
Then you will see what exactly with iOS version
Build to html
flutter2 build web --web-renderer html --profile
–profile: build mode (profile or release flag)
–web-renderer html: render mode, there are 3 options:
– auto: When app run in mobile browser, it will use HTML render. In case app run in desktop browser, it will use CanvasKit renderer
– html: App always use HTML render.
– canvaskit: App always use Canvaskit render.
Above command will output .html, .css, .js files at build/web/ folder. If you try running ./build/web/index.html directly in Chrome, you may have the following error:
Access to internal resource at 'file:///manifest.json' from origin 'null' has been blocked by CORS policy:
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
To avoid that, you can use a Chrome’s extension named
Web Server for Chrome to simulate a local server on the folder
./build/web/ then you can try to run
index.html again.
Run in Mac OS
You need to enable desktop develop first
– For MacOS development
flutter2 config --enable-macos-desktop
– For Windows development
flutter2 config --enable-windows-desktop
– For Linux development
flutter2 config --enable-linux-desktop
Then add desktop support to existing project
flutter2 create --platforms=windows,macos,linux .
You can choose what OS as you want (windows/macos/linux).
From VSCode, select desktop version as run device(in here we select macOS)
Output to .app file
flutter2 build macos --profile
Above command will output sample_flutter2.app file at /build/macos/Build/Products/Profile with profile build mode (you can select –release flag if you want)
Flutter’s pros (Good points)
– 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 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.
– The app UI and logic don’t change depending on the platform, it look and work exactly in every platform.
– Flutter is growing very fast with many 3rd party libraries at
pub.dev
– Hot reload 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.
– Reduce UI coding time with a lot of custom and ready-made Widget.
– Dart is a simple to learn language, many people with little coding knowledge can develop prototypes and apps.
Flutter’s cons (Disadvantages)
– 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
– 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.
– Not all 3rd libraries support all your expected platforms. Almost of them support iOS and Android (or 1 in 2 only).
– When developing, the error screen that you get when there’s a layout error (or something else at a lower level) can be very confusing.
– There are still animation issues (
for example), so please consider this if you want to build an app with complex animation effects.
– 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) 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.
Overview
Flutter has many more advantages for business and development teams than risks. It’s a great chance to build beautiful, high-performance, and outstanding apps that fit your custom needs and requirements. It’s worth considering Flutter, especially if you want an app both for iOS and Android.
Flutter 2 is already available, give it a try and we believe you wont’t regret about that!
Refers
日本語
Vietnamese
