This tutorial gives a brief introduction to the Flutter SDK
1. Flutter
1.1. Overview
The Flutter SDK allows you to build beautiful and fast native apps for both iOS and Android with a single codebase. It was introduced by Google in 2017 and has reached v1.0 on December 4th, 2018.
It is written in C, C++ and Dart. The SDK utilizes the Skia Graphics Engine to render on iOS and Android.
2. Installation of Flutter
To develop Flutter apps you need the Flutter SDK and a text editor. Follow the instructions on the Flutter installation page for your operating system.
Apart from the SDK itself Flutter also needs a few other tools to function properly. Namely the Android SDK is needed for Android development. Follow the instructions here: https://developer.android.com/studio
For iOS development you also need XCode. Follow the instructions here: https://flutter.dev/docs/get-started/install/macos#install-xcode
| Due to the nature of iOS apps they can only be developed on macOS devices. |
To test your installation run the $ flutter doctor command.
The output should look like this:
[✓] Flutter (Channel stable, v1.2.1, on Linux, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[!] Android Studio (version 3.3)
✗ Flutter plugin not installed; this adds Flutter specific functionality. (1)
✗ Dart plugin not installed; this adds Dart specific functionality. (1)
[!] VS Code (version 1.32.3)
✗ Flutter extension not installed; install from
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter (2)
[!] Connected device
! No devices available (3)
| 1 | If you’re not using Android Studio for development you can ignore these errors |
| 2 | Configuration of the editor will be covered later |
| 3 | Configuring devices for debugging will be covered later |
2.1. Licenses
The Android SDK requires you to sign licenses.
This will only be relevant once you publish the app, but $ flutter doctor will nag you about this.
You can run the command $ flutter doctor --android-licenses to view and accept the licenses.
| If you get a Java exception when running the above command, make sure the shell you’re currently in has Java 8 available. The command will only work with Java 8 (not 9 or higher). |
2.2. Special note for Linux users
If you are on Linux (Ubuntu, Fedora, Arch, etc.) you might need to install an additional package.
The output of $ flutter doctor will show you the following message:
✗ Downloaded executables cannot execute on host.
See https://github.com/flutter/flutter/issues/6207 for more information
On Debian/Ubuntu/Mint: sudo apt-get install lib32stdc++6
On Fedora: dnf install libstdc++.i686
On Arch: pacman -S lib32-libstdc++5 (you need to enable multilib:
https://wiki.archlinux.org/index.php/Official_repositories#multilib)For Flutter to function correctly you need to install the packages mentioned in the message.
-
For ubuntu:
sudo apt-get install lib32stdc++6 -
For fedora:
dnf install libstdc++.i686 -
For arch:
pacman -S lib32-libstdc++5along with following the instructions on this link: https://wiki.archlinux.org/index.php/Official_repositories#multilib
2.3. Setup of the Android Emulator
The emulator can be a powerful replacement of a physical Android device.
Before setting it up it is advisable to enable VM Acceleration on your development machine. This can sometimes drastically improve performance of the emulator.
2.4. Setup of ADB on a physical device
Flutter allows to use your physical android device as a debug target. To enable this functionality you need to enable ADB debugging on the device. This setting can be found in the developer options of your phone.
Open the settings app on the phone and got to About Phone and tap Build Number seven times. This enables a sub menu in the settings app.
Go to Developer options at the bottom and enable USB-Debugging.
| On some devices the Developer Options can be located or activated differently. If unsure search for the instructions for your specific device. |
Connect your smartphone to your PC via USB.
Now run $ flutter doctor again and there should be 1 connected device:
[✓] Connected device (1 available)
| On some devices you will first have accept the connection by your PC. |
3. Configuration of the development environment
Generally Flutter can be developed with both VSCode and Android Studio. Even just a text editor and a command line could be sufficient. But it should be noted that a proper IDE (or VSCode with plugins) will greatly enhance the development experience through proper debugging, etc.
3.1. Visual Studio Code
Visual Studio Code is a very lightweight text editor with support for a wide-array of plugins.
Follow the instructions on https://code.visualstudio.com/ for your platform.
For Flutter development there are two plugins required:
By clicking each link above Visual Studio Code will open the installation page of each plugin. Install both and reload the program if prompted.
Alternatively you can click on the extension icon on the left sidebar and search for Dart and Flutter and install the extensions manually.
3.2. Android Studio
Since the Android Studio is required for multiple setup steps you should have Android Studio already installed.
To add support for Dart and Flutter there are two plugins required. Install them by navigating to and search for 'Flutter'. Click on Install to install the plugin. You will be asked to also install the Dart plugin.
After the installation has finished restart the IDE.
4. Exercise: Creating a new project
Currently there are 3 different ways of developing Flutter applications:
-
Visual Studio Code (or VSCode for short)
-
Android Studio (or any other JetBrains IDE)
-
A TextEditor and a Terminal
| This tutorial will use Visual Studio Code for development |
4.1. Creating the project
Open VSCode and invoke the command palette via ( or button:[Ctrl + Shift + P]).
-
Select Flutter: New Project.
-
Enter a name for your project.
-
Select a folder where the project should be saved.
VSCode will now restart after it restarted it will run the actual creation of template code.
This will create the hello_world project.
Your explorer on the left should look similar to this:
If the project is not automatically created, make sure the Dart and Flutter extensions are enabled.
|
4.2. Starting the application
On the right side of the status bar at the bottom of VSCode you should see multiple information about your development environment. One of these indicators shows the current status of the target device (or emulator):
If you set up an emulator or your physical device earlier you can click on the No Devices button. A pop up will open that lets you chose which device you want to develop on. The list contains the emulators as well as any ADB enabled device your PC has access to.
Choose one of the listed devices. If the target device is an emulator wait for it to fully start.
Press F5 to start the application.
The build process is now started.
Depending on your internet connection and host device speed the initial build could take several minutes.
You can see the current step/progress in the builtin DEBUG CONSOLE of VSCode.
If it did not open automatically you can open it using the command Debug: Focus on Debug Console View
|
After the build process finished the app should now appear on your target device:
Tap 3 times on the + in the bottom right.
Now go ahead and change
primarySwatch: Colors.blue,to
primarySwatch: Colors.red,on line 12 of the generated code.
When saving the change should automatically show up in the running app. Notice how the number of times you clicked the button stayed the same. This a feature of the Flutter toolkit that allows state to be persisted between hot reloads.
You can trigger a hot reload manually by using the respective button in the debug toolkit at the top of you VSCode instance:
Appendix A: Copyright, License and Source code
Copyright © 2012-2019 vogella GmbH. Free use of the software examples is granted under the terms of the Eclipse Public License 2.0. This tutorial is published under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Germany license.