This tutorial will discuss installing Flutter on Windows, Mac OS, and Linux Operating Systems. The first Flutter project will also accompany this tutorial, so we can understand more about the Flutter Framework we will use.
Here you can see the difference: Flutter can already be multi-platform. We can program directly from Android Studio or use Microsoft Visual Studio Code in Fluter programming. Virtual devices can now use AVD (Android Virtual Device); we can use XCode for IOS applications.
Code once, your application can be run directly on Android and IOS. Interesting right?
What is Flutter?
Flutter is a framework for developing mobile applications that are open source. Flutter was acquired by Google and was introduced in May 2017. Because Flutter is Open Source, development is faster. Flutter can create multi-platform mobile applications, making it easier for developers to publish their applications.
The first version of Flutter was named sky, which could only run on the Android Operating System. As a Framework, Flutter is written using the Dart language, which already provides essential functions or classes for building mobile applications.
Dart is a language that supports Object Oriented (OOP) with C-Style syntax (similar to C language), which can be optionally changed to JavaScript.
Widget
Flutter has a widget system, which makes it more unique than other app builders. The designing system in Flutter uses widgets, which combine simple widgets into more complex ones. With Flutter, you can create different and stable application designs that run on Android and IOS.
This is because Flutter has its rendering engine system. Widgets in Flutter have a hierarchical structure that makes it easier to design applications. This hierarchical class system maximizes the possibilities of design combinations. An overview of the Flutter class hierarchy is shown in the image below.
Stateful Widget
Stateful Widgets are dynamic widgets and require a session. In Flutter, Stateful Widgets generally indicate that the specified component has a state property.
Stateless Widget
Stateless Widgets are static and don't need to use as a session. A stateless Widget can mean the component does not have a state property.
Hot Reload
If you have ever made an application with Android Studio, we will usually rebuild it so that the appearance can change when there is a change. Unlike Flutter, in Flutter projects in Android Studio, there is a hot reload button that will refresh the view instantly without having to rebuild. This is a distinct advantage for developers because it will speed up the application development process.
Advantages of Flutter
Then what are the advantages of Flutter as a material for consideration? We will use this Framework. Here are some of the benefits of Flutter to consider.
More Productive
Flutter uses a modern, expressive and declarative approach. With Flutter, you can create applications that run on Android and iOS simultaneously with the same code. This will undoubtedly save more time and increase productivity. With Flutter, because classes are already available for building mobile applications, you will use very little code in your application, but of course, with full features.
It will be easier for developers to detect program errors on the prototyping and debugging side. At the practical level, for example, trying a specific code, you will see the results immediately. This is because Flutter comes with a hot reload, which shows your code results immediately without rebuilding. You can fix errors on the spot after the app stops.
Easy and More Attractive Application Design
Flutter provides Material Design themes for Android and Cupertino for IOS. With this design framework, developers only need to modify a few application templates. With a widget system and class hierarchy, it will make it easier for developers to design beautiful applications.
Widgets that can be customized will produce a more varied and unique appearance of the application. Flutter indulges developers in making faster, more precise, and more accurate applications.
Flutter Studio
Flutter launches Flutter Studio in a web-based form. Flutter Studio is very useful for those who want to learn Flutter without installing an application. All you have to do is open a web page, and you can immediately modify the application layout and the source code. Please try directly on the page URL https://flutterstudio.app/.
Install Flutter on Windows
Installing Flutter on Windows is relatively easy. But make sure your Windows meets the requirements. Here are some recommendations that are needed.
- Microsoft Windows 7 SP1 or above, recommended Windows 10.
- Disk Space 400MB
- Windows PowerShell 5.0 or above (Already included in Windows 10) If you are using Windows 7 or 8, you must first install Windows PowerShell; please follow the article on the Microsoft Docs page.
- Git for Windows version 2.0 or above
- The complete Android Studio application has been installed, including the AVD. Or, you can use Microsoft Visual Studio Code. I suggest installing both.
This article uses Windows 10 64-bit with Android Studio and Microsoft Visual Studio Code installed.
Install Flutter Plugin
Before the Flutter installation process is carried out, we must install the Plugin on Android Studio and Microsoft Visual Studio Code. Please follow the steps below to install the Plugin.
Android Studio
Open your Android Studio application. At the start screen, click Configure, then select Plugin.
Type the keyword "flutter" in the Search field, then press enter. After the Flutter plugin appears, click Install. Please wait for it to finish. Once done, restart your Android Studio.
Microsoft Visual Studio Code
If you haven't installed Microsoft Visual Studio Code, please download the installation file on the https://code.visualstudio.com/ page, then do the installation as usual.
Open your Microsoft Visual Studio Code application. Once open, click on the Extension tab (1), then search for the keyword "flutter" (2), click on the Flutter search results (3), then click Install (4). Wait until the installation process is complete. If necessary, restart your Microsoft Visual Studio Code.
Install Git
Download the latest Git Installer application. You can find the git installation files on the Git Installer page. When this Flutter Tutorial was written, the newest git version was 2.22.0. You can download the git installer for Windows 10 64-bit via the Git 2.22.0 64-bit page.
Install Git as usual. This Git application is an essential component of Flutter. You must successfully install Git before proceeding with installing Flutter.
Next, we will work using PowerShell. Open your PowerShell by searching for search Windows 10, typing the keyword "PowerShell," right-clicking on the PowerShell menu, then clicking on Run as Administrator. We need administrator access because we will do some installations.
We'll work on the C:\src\ directory to keep things more structured and tidy. Create the folder first and enter the directory by typing the command below.
cd /
mkdir src
cd srcNow let's check whether Git has been installed correctly. Type the following command.
git --versionIf the git version appears, the git installation is successful.
If the git command displays an error message, ensure you have successfully installed Git again. Then try closing PowerShell and reopening it. Recheck the git installation with the command git --version.
Install Flutter
Next, we will install Flutter. You can see all Flutter SDK releases directly on the page: https://flutter.dev/docs/development/tools/sdk/releases. When this Flutter tutorial was written, the latest version was v1.7.8+hotfix.3. We will install that version. Enter your PowerShell and type the following command.
wget https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_v1.7.8+hotfix.3-stable.zip -Outfile flutter.zip
Expand-Archive flutter.zip flutterThe command above will download Flutter version v1.7.8+hotfix.3 with the name flutter.zip, extract it, and then enter the flutter directory.
The method above is how to use Windows PowerShell; you can use the download method via a browser and extract the zip file to the src folder.
Next, we will enter the Flutter directory and run the flutter_console.bat file.
cd flutter/flutter
.\flutter_console.bat
Next, we will approve the Android Studio license by typing the following command.
flutter doctor --android-licensesYou can read the Android Studio license terms, and if you agree, press the y button to finish. When finished, you can verify the installation results by typing the command below.
flutter doctor
As you can see in the image above, the installation process was successful. The exclamation mark identified above is because I didn't turn on the AVD or connect the Android Device. You can depend on the Android virtual device from Android Studio by clicking on the AVD Manager menu, then running the Android Emulator. Once done, type flutter doctor again to verify.
Update Path
The flutter command above can only be executed from the path or folder where the Flutter SDK is located. We need it so that flutter commands can be run from all folders. The solution we have is to add a default path for Flutter. The default path on the Windows Operating System can be set from the environment parameter.
To enter environment settings in Windows 10, in the Search column, type "env" and then select Edit environment variables for your account. Click on the Path variable, click New, and enter your Flutter SDK location.
If you followed this Flutter Tutorial, the location of the Flutter SDK is C:\src\flutter\flutter. Then you have to fill in C:\src\flutter\flutter\bin. Examples like in the image below.
At this point, the flutter installation on your Windows has been completed. You can move on to the Creating Your First App with Flutter section.
Install Flutter on Mac OS
Installing Flutter on the Mac OS is relatively easier than installing it on Windows. This is because Mac OS is built with the terminal and Git; we only need a few extra modules.
In this article, we are using Mac OS Mojave version 10.14.5. It will probably run normally on earlier Mac OS.
Before continuing, ensure you have installed Android Studio, Microsoft Visual Studio, and XCode on your Mac. You can install XCode directly through the App Store for free. If so, you can continue installing the Flutter plugin. To do this, please follow how to install the Plugin on Android Studio and Microsoft Visual Studio on the Windows 10 operating system above. Because the method is the same on Windows, Mac OS, and Linux.
After the plugin installation is complete, we will start installing Flutter.
Install Homebrew and wget
Homebrew is package management on Mac OS. The installation method can use Ruby, which is already included on Mac OS. For complete information about HomeBrew, please read our article on how to install Homebrew.
Type the following command to install Homebrew.
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"Once done, make sure your homebrew installation is successful by checking the version. Use the following command.
brew --versionIf the output of the above command is the version of Homebrew, it means your homebrew installation is complete.
Next, we install wget using the Homebrew that we previously installed. Use the following command on your terminal.
brew install wgetWait until the process is complete. Please check your wget by typing the command below.
wget --versionAn example of the output is as follows.
GNU Wget 1.20.3 built on darwin18.6.0.Install and Link the XCode license
Next, we will activate the XCode license; please type the following command.
brew update
sudo xcodebuild -license
sudo xcode-select --switch /Applications/Xcode.app/Contents/DeveloperFor the sudo command, it requires your Mac password; please enter your Mac password if prompted. The license and XCode links work so Flutter can build iOS apps using XCode.
Install USBMux and IOS Deploy
USB Mux functions so that applications coded using Flutter can be run on the original device connected by USB. How to install it? Please type the following code.
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deployInstall CocoaPods
Cocoapods is a dependency manager for Swift and Objective-C for the Cocoa Project in XCode. According to the original site, currently, Cocoapods has 63 thousand libraries and is used by more than 3 million applications. For Cocoapods installation, we will use the pre-installed Homebrew. Please type the following command on your Mac OS terminal.
brew install cocoapods
pod setupInstall Flutter
In this Flutter Tutorial, we will try to install Flutter Version v1.7.8+hotfix.3 for Mac OS. Next, we will immediately install Flutter on Mac OS. You can see all the SDK Releases for Mac OS on the Flutter MacOS page.
Download Flutter
We will work on the ~/development directory; previously, we created and entered that directory. Type the following command.
mkdir ~/development
cd ~/developmentNext, we will download Flutter, extract and install it in the ~/development directory.
wget https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_v1.7.8+hotfix.3-stable.zip -O flutter.zip
unzip flutter.zip
cd flutter
export PATH="$PATH:`pwd`/flutter/bin"Precache
Next, we need binaries for IOS and Android. Use the following command.
flutter precacheWhen finished, continue to check the installation.
flutter doctor
Update Path
Like on Windows, flutter commands can only be executed from the path or folder where we extracted the Flutter SDK. We need the flutter command to be run from any path. You do this by updating the environment path on Mac Os.
To change the environment on Mac Os, all you have to do is add a source profile. Edit or create a new file in $HOME/.bash_profile. Use the following command.
nano $HOME/.bash_profileIf the .bash_profile file already contains content, add the code below at the very bottom, but if it is still empty, fill it in with the following line.
export PATH="$PATH:~/developement/flutter/bin"When finished, save by pressing CTRL+X then Enter, and confirm by pressing the Y button.
To make the new environment active, use the source command.
source $HOME/.bash_profileVerify the results of our settings by typing the command below.
echo $PATHIf your new path appears, it means the path setting is complete. Now the flutter command can be executed from any path.
At this point, the Flutter installation process on Mac OS has been completed. You can skip ahead to the Creating Your First App With Flutter section.
Install Flutter on Linux
In this Flutter tutorial, we will try to install Flutter on Linux Ubuntu. When this tutorial was written, we used Ubuntu 18.04, which had Microsoft Visual Studio, and Android Studio installed.
Installing Flutter on Ubuntu Linux isn't much different from installing it on Mac OS. Ubuntu is equipped with Git, wget, and other packages. Some of the requirements and tools that must be met for Flutter installation are as follows.
- Linux 64 Bit
- Remaining disk space above 600MB
- Some of the tools needed:
- Bash
- curl
- Git Version 2
- which
- mkdir
- rm
- unzip
- xz-utils - Shared libraries must be available in environments such as libGLU.so.1 and libglu1-mesa.
The above packages are usually available if you use Ubuntu 18.04 Desktop. So we don't need to install these packages.
Before proceeding with the installation process, please install the Flutter plugin on Android Studio and Microsoft Visual Studio Code, following how to install the Plugin on Windows. The plugin installation process is the same as in Windows 10. Please click on How to Install the Flutter Plugin in Microsoft Visual Studio and Android Studio.
Install Flutter
We'll install it in the ~/development folder to keep things neat and organized. Create the folder and enter it with the following command. Use the terminal on Ubuntu to type this command.
mkdir ~/development
cd ~/developmentDownload and Install Flutter.
Next, we will download the Flutter SDK for Linux. Please look at the Flutter SDK Linux page for all SDK versions. When this Flutter Tutorial was written, the latest SDK version was v1.7.8+hotfix.3. We will download and install that version.
wget https://storage.googleapis.com/flutter_infra/releases/stable/linux/flutter_linux_v1.7.8+hotfix.3-stable.tar.xz -O flutter.zip
tar -xvf flutter.tar.gz
cd flutterAdd Flutter to Path with the following command.
export PATH="$PATH:`pwd`/flutter/bin"Then run Flutter precache with the following command.
flutter precache
Then run the android license command as below. Accept all requests by pressing the y button at the end.
flutter doctor --android-licensesThen, run flutter doctor.
flutter doctorIf the installation is successful, the output of the flutter doctor command is as shown below.
Update Path
Next, we will set up a profile so the flutter command can be executed from any path on your Ubuntu. Edit or create a new one if the $HOME/.bash_profile file doesn't exist yet.
nano $HOME/.bash_profileFill in or add the following lines.
export PATH="$PATH:~/developement/flutter/bin"Then use the source command.
source $HOME/.bash_profileVerify the result by typing the command below.
echo $PATHUp to this point, the Flutter installation process on Linux Ubuntu has been completed. Next, we will try to create our first application with Flutter.
Creating Your First App with Flutter
Our application can use the Android Studio editor and Microsoft Visual Studio Code. We'll try both to understand Flutter better. Later, please decide whether to use Android Studio or Microsoft Visual Studio Code. I am more comfortable using Microsoft Visual Studio Code because it feels lighter.
Flutter with Android Studio
Open your Android Studio application. Select the button to start a new Flutter project. Because we have previously installed the Flutter plugin, a new option will appear on the Android Studio Start Screen: Start a New Flutter Project.
Select Project Type
Next, a new window will appear in the form of application options. Select the Flutter Application, then click the Next button.
Application Configuration
The window that will appear next is the Application configuration window. Fill in the application according to what you want, for example, as in the image below.
In the Flutter Tutorial during the installation above, fill in the path according to your operating system. For the Flutter SDK Path, fill in according to when we download Flutter. The details are as follows.
- Windows:
C:\src\flutter\flutter - Mac OS:
~/development/flutter - Linux:
~/development/flutter
Especially for Mac OS and Linux, if there is an error in the SDK directory that is not found, use the full path. You can use the following command.
which flutterAn example of the result is as below.
/Users/away/development/flutter/bin/flutterThen, fill in the Flutter SDK Path with /Users/away/development/flutter. Usually, you can't use the home path with a ~ sign on macOS.
Setting PackageName
After completing the project configuration, press the Next button. The following window will appear in the package name window. Try filling in, for example, with coba.com, as in the image below. Once done, click on the Finish button.
Running Programs
When finished, the main window will appear. The first file to open is the main.dart file. We will try to run the program with the AVD. Or you can connect your mobile phone to a USB device. To use an AVD, activate the AVD by pressing the AVD Manager button. Then, run one of the simulators of your choice.
After the simulator appears, click the Run button, and wait for Initializing Gradle to finish. When finished, your first application will immediately appear in the simulator.
On the simulator, try pressing the + (plus) button on the bottom right, and see what happens to the numbers. This happens because the class code is in the loop when pressing the button.
int _counter = 0;
void _incrementCounter() {
setState(() {
// This call to setState tells the Flutter framework that something has
// changed in this State, which causes it to rerun the build method below
// so that the display can reflect the updated values. If we changed
// _counter without calling setState(), then the build method would not be
// called again, and so nothing would appear to happen.
_counter++;
});
}If we look at the code above, it looks straightforward to read. This is because Flutter uses the Dart language, which is C-Style.
Modifying Application Code
Next, we will try to modify the code. We do the essential thing: changing the title text and the application theme color. Try making changes to lines 21 and 23.
primarySwatch: Colors.blue,
menjadi
primarySwatch: Colors.green,
dan
home: MyHomePage(title: 'Flutter Demo Home Page')
menjadi
home: MyHomePage(title: 'Aplikasi Pertamaku'Try saving the project by pressing CTRL+S. Pay attention to your Android Emulator or device. After you save the changes, the simulator screen will immediately change to the latest update without doing a rebuild at all. This is how great Flutter is with the hot reload feature. If it's like this, application programming will be faster, correct?
OK, the first Flutter application development with Android Studio was successful. Next, we will try to create an application using Microsoft Visual Studio Code.
Flutter with Microsoft Visual Studio Code
Please open your Microsoft Visual Studio Code. We will start a new Flutter project with Microsoft Visual Studio Code. Once open, go to the View menu -> Command Palette. Or you can use a shortcut by pressing CTRL+SHIFT+P on Windows and Linux, andCOMMAND+SHIFT+P Mac OS.
Create New Project
In the Command Palette, type Flutter and select Flutter: New Project. For the first time, if there is a warning that the SDK is not found, we point the SDK to the Flutter download folder like in Android Studio. Then restart your Microsoft Visual Studio Code.
After restarting, repeat by going to the Command Pallete and selecting Flutter: New Project; if the SDK is OK, the application name input field will immediately appear. Enter your application name, then press Enter.
Next, a storage location request will appear. Please select the storage location for your project, then click select folder. When finished, an editor window will appear as below.
Running Applications
To run the application, you can use the Android AVD or IOS simulator if you use Mac OS. Or you can connect your mobile phone device directly with USB. To select which device to use, we enter the Command Palette by pressing CTRL+SHIFT+P. Type Flutter and select Flutter: Launch Emulator.
In this tutorial, I will use the Emulator from AVD. Because I use the Pixel 2 Emulator, I chose the Pixel_2 option.
The AVD emulator will appear, but the program is not running yet. To run the program, we will use the console. Visual Studio is equipped with a terminal to make it easier to access applications. In the main.dart editor window, click on the terminal tab, then type:
flutter runWait for your application to appear in the Emulator.
Well, now your application has appeared. Easy isn't it?
Another alternative to running Flutter, you can use the debug button. In Microsoft Visual Studio Code, you click on the Debug icon (1), then click the Play button (2).
Or you can directly access the Debug -> Start Debugging the menu to run the application. If you want it faster, you can use a hotkey by pressing the F5 key.
Application Modification
To modify the app, it's the same as in Android Studio. Try changing the color; for example, change the color to red and change the text. When finished, press CTRL+S to save and see the results in the Emulator.
Views change immediately when we save program changes. This is the power of the hot reload feature from Flutter.
Flutter's First Application with Microsoft Visual Studio Code is a success. You can explore other features by experimenting with changing the code in main.dart.
Try Ready-made Flutter Apps
Flutter is Open Source. You can find it on GitHub. Many developers create Flutter applications that are published publicly.
One GitHub user put together a Flutter Open Source app that you can try. You can take a look at this page https://github.com/tortuvshin/open-source-flutter-apps. Lots of great apps on that page. You click on the link provided to open the relevant GitHub page.
In this experiment, we will try the tubi_tv_flutter application from the GitHub page https://github.com/xieweizhi/tubi_tv_flutter which is an online movie player application.
To start trying this application, we will clone it with Git. Prepare your terminal or PowerShell. We'll create a ~/Project folder and work in that folder.
Create a Project Directory
For Windows, use PowerShell, then type the following code.
cd /
mkdir Project
cd ProjectFor Mac OS or Linux, use the following command.
mkdir ~/Project
cd ~/ProjectClone and Open Project
Next, we will clone from GitHub and use the following command from your Project directory.
git clone https://github.com/xieweizhi/tubi_tv_flutter.git
cd tubi_tv_flutterOpen your Microsoft Visual Studio, select file -> Open, and select the cloned project folder above. If you get a warning that some packages must be downloaded, click on Get Package.
Do Launch Emulator as in trying to create a new application with Visual Studio Code. On the terminal tab, type the flutter run command. And wait for the results in your Emulator.
The application is running well; try to open the menus. With the ready-made application, you can explore the code created by Flutter experts. This will help your understanding of the structure of applications with Flutter.
Then you can try other applications with the steps above.
Possible Errors
On Mac OS Error: RPC failed
On Mac OS, when you want to run on the IOS emulator if you get the error "error: RPC failed; curl 56 LibreSSL SSL_read: SSL_ERROR_SYSCALL, errno 54". This is because Git experienced a timeout during Cocoapod's setup. The solution is to change the value of the git buffer globally, then do a pod setup.
git config --global http.postBuffer 524288000
pod setupConclusion
Now, you can create your first Flutter app using Android Studio and Microsoft Visual Studio Code. The Flutter Tutorial is complete this time, starting from understanding Flutter, installing it, creating the first application, and trying the finished application.
You can already choose whether to use Android Studio or Visual Studio Code. Please try both, and choose the most comfortable platform.
With Flutter, app creation is faster. Because Flutter is equipped with default classes commonly used in mobile applications, we'll try to create a simple application with Flutter in the following tutorial. Keep following TeknoTut for quality articles and tutorials.
I hope this Tutorial helps.
