Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source. Build beautiful native apps in Flutter. In this Flutter Tutorial Series, we will cover Flutter tutorials for beginners, Flutter SDK, and how to build a simple Hello World Flutter app for Android and iOS.
Note: Flutter is still in Beta 1 at the time of this tutorial post.
Flutter comes with a lot of features packed in like Hot Reload, Expressive Beautiful UIs, Native performance. But then the biggest feature of them all is Unified App Development using a single code base. You can now build native apps on both Android and iOS apps using a single code base in Flutter.Furthermore, apps and interfaces made with Flutter are built from a single codebase, compiled directly to native arm code, use the GPU, and can access platform APIs and services.
Now that we have a pretty good idea on Flutter, let's get started. In this tutorial, we will follow the steps to have flutter installed and setup.
To install and run Flutter, your development environment must meet these minimum requirements:
Make sure all the tools are already installed on your system. first of all, Open the Terminal on Mac and then check the following.
As you can see from the above image when I ran the git command, it threw the following error.xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrunThis error occurs due to the recent upgrade of your system to OS X El Capitan from the App Store. Hence, you can fix this issue by executing the following command in your Mac Terminal.xcode-select --installThe above command will bring up a pop-up window to install it on your system. So in MAC, git is attached to XCode's Command line tools.Once you have installed successfully, your git command will start working again without throwing that error again. Now that we have all the necessary tools in our system, let's proceed to get the Flutter SDK.
First of all, let's decide where to put our Flutter SDK. So I have created a folder called Flutter Workspace. Using the command terminal, go to that folder using the following command.cd Flutter\ WorkspaceTo get Flutter SDK, use git to clone the repository and then add the flutter tool to your path. Running flutter doctor shows any remaining dependencies you may need to install.git clone -b beta https://github.com/flutter/flutter.git
You’ll probably want to update PATH variable permanently, so you can run flutter commands in any terminal session.The steps for modifying this variable permanently for all terminal sessions are machine-specific. So, Typically you add a line to a file that is executed whenever you open a new window. For example:
$ export PATH=[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin:$PATH
$ echo $PATH
Run the following command to see if there are any dependencies you need to install to complete the setup:$ flutter doctorThe first time you run a flutter command (such as flutter doctor), it downloads its own dependencies and compiles itself. Subsequent runs should be much faster.
To develop Flutter apps for Android, you can use a Mac, Windows, or Linux (64-bit) machine.Flutter requires Android Studio to be installed and configured:
To prepare to run and test your Flutter app on an Android device, you’ll need an Android device running Android 4.1 (API level 16) or higher.
By default, Flutter uses the version of the Android SDK where your adb tool is based. If you want Flutter to use a different installation of the Android SDK, you must set the ANDROID_HOME environment variable to that installation directory.
To prepare to run and test your Flutter app on the Android emulator, follow these steps:
Flutter is supported by two plugins:
So, to install these:
Now that all the groundwork is done and flutter is setup. Since this Flutter Tutorial Series is all about Flutter tutorials for beginners. Therefore, let us build a simple Flutter Hello World App.
As a result, the above command creates a Flutter project directory calledhelloworldflutter that contains a simple demo app that uses Material Components.In the project directory, the code for your app is in lib/main.dart.
We can go ahead and change some of the things in the app and can see the app change or reflect immediately in the device or simulator without running the application again. This is Flutter's Hot Reload feature. Below is the code for the default main.dart file where we have made changes to the Home Page Title to "Flutter Hello World". Hence, to try hot reload, click on the lightning icon as shown in the screenshots below of the Hello World Flutter App.
Now that we have successfully run a simple Hello World Flutter app as part of Flutter tutorials for beginners. Therefore, it is now time to build beautiful native apps for both Android and iOS using Flutter in the upcoming Flutter Tutorial Series. Until then, check out other tutorials like how to Build your own Google Voice Assistant without code and Sentiment Analysis using Google Cloud Natural Language API and others on my blog section.