So with all of this cross-platform trend that is going on 🤩, Flutter is setting some greater standards compared to other frameworks. The main added advantage is that it compiles directly to machine code.
Let's see how it's done on Flutter for desktop applications 😁. Since the feature has not been standardised it's available in the master branch of the repo.
Clone the repo into folder like
/etc/bin for linux, or
C:\Program Files\ for windows.
git clone https://github.com/flutter/flutter.git
If you have to checkout other versions, you can list out the remote branches and checkout and use them.
git branch -a #will list out branches git checkout <your-specific-branch>
After cloning, add the bin folder path along with the prefix to environment variables
Make sure to add it in .bashrc for linux and environment variables console for windows. This will store the path permanently.
Now see that if you're able to access the flutter-cli
This command install some binaries for flutter later printing out the version. Mine was 1.13.5 at the time of writing.
Flutter 1.13.5-pre.11 • channel master • https://github.com/flutter/flutter.git Framework • revision 72a3d914ee (6 hours ago) • 2019-12-20 08:50:42 -0800 Engine • revision 472197a8e9 Tools • Dart 2.8.0 (build 2.8.0-dev.0.0 8d11c1dce6)
Now let's check if it has all dependencies to run desktop application. For this we need to run
#Prints out devices if available for desktop flutter devices 1 connected device: Windows • Windows • windows-x64 • Microsoft Windows [Version 10.0.18362.535]
Now, let's see if the toolchain to build application is ready.
#This'll run a basic diagnosis on the requirements flutter doctor Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel master, v1.13.5-pre.11, on Microsoft Windows [Version 10.0.18362.535], locale en-IN) [!] Android toolchain - develop for Android devices (Android SDK version 29.0.1) X Android license status unknown. Try re-installing or updating your Android SDK Manager. See https://developer.android.com/studio/#downloads or visit https://flutter.dev/setup/#android-setup for detailed instructions. [!] Visual Studio - develop for Windows (Visual Studio Community 2019 16.2.2) X Visual Studio is missing necessary components. Please re-run the Visual Studio installer for the "Desktop development with C++" workload, and include these components: MSBuild MSVC v142 - VS 2019 C++ x64/x86 build tools - If there are multiple versions, install the latest one Windows 10 SDK (10.0.17763.0) [√] Android Studio (version 3.5) [√] VS Code (version 1.41.1) [√] Connected device (1 available) ! Doctor found issues in 2 categories.
In my case i was missing three dependencies to build desktop applications which are
- windows 10 SDK
- MSVC V142
Start Visual studio Installer. Select modify option under Visual Studio 2019.
Then select the following components.
Now click on modify to begin the installation process. Once the installation process is done. Run flutter doctor to see if everything is good.
Once the installation is done. Re-run the flutter doctor to see if everything is as expected.
flutter doctor [√] Flutter (Channel master, v1.13.5-pre.11, on Microsoft Windows [Version 10.0.18362.535], locale en-IN) [!] Android toolchain - develop for Android devices (Android SDK version 29.0.1) X Android license status unknown. Try re-installing or updating your Android SDK Manager. See https://developer.android.com/studio/#downloads or visit https://flutter.dev/setup/#android-setup for detailed instructions. [√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.4.2) [√] Android Studio (version 3.5) [√] VS Code (version 1.41.1) [√] Connected device (1 available) ! Doctor found issues in 1 category.
So leaving the android toolchain, Let's run our first project flutter desktop. Let's create a flutter project. Move into directory where you'd like to have the source code of the application or place where you think is suitable for your playground.
flutter create command is supported only for macOS we need make use of an example repo which has modified template that includes for windows for linux.
git clone https://github.com/google/flutter-desktop-embedding desktop_app
Now let's enable desktop feature for our project.
flutter config --enable-linux-desktopto enable Linux.
flutter config --enable-macos-desktopto enable macOS.
flutter config --enable-windows-desktopto enable Windows.
After enabling the feature, that actually sets environment variable. Now cd into the project folder and into a folder name example
In the project tree you can find folder specific to windows and linux which contains configurations for desktop application specific to platform which are not stable and yet to change as said by the flutter team.
├───fonts │ └───Roboto ├───lib ├───linux │ └───flutter ├───macos │ ├───Flutter │ ├───Runner │ │ ├───Assets.xcassets │ │ │ └───AppIcon.appiconset │ │ ├───Base.lproj │ │ └───Configs │ ├───Runner.xcodeproj │ │ ├───project.xcworkspace │ │ │ └───xcshareddata │ │ └───xcshareddata │ │ └───xcschemes │ └───Runner.xcworkspace │ └───xcshareddata ├───test └───windows ├───flutter ├───resources └───scripts
Now let's build the application and see how it looks.
Once finishing build, the application starts and you can edit to see your changes reflect.
You need to make changes in
Focus the terminal and enter
r key refreshes the application..
Hope you loved the article 🤗, comment your thoughts and feel free ask any doubts in comments.
🏇 Actually here i'm starting on my journey with Flutter.