A Step-By-Step Guide To Develop Your First Ever Application Using Flutter
As an application developer, have you ever earned for a single programming language for developing apps for multiple platforms? If not, then by a miracle, Google has fulfilled your wish! How? Read further!
Here’s how Google gifted the best gift to the application developers by developing Flutter.
Flutter is an open-source SDK by Google for creating cross-platform applications. By the term “cross-platform, ”, I mean to say that now, your code, written in a single language, will run on various platforms like Android, iOS, Windows, etc.
And that single programming language is Dart Google developed which in 2011. So, this is the introduction of Flutter. In the next section, I will present a brief step-by-step guide to help you with your first Flutter application.
A step-by-step guide for your first ever Flutter application
Following the below steps will take you closer to your first ever Flutter app.
Step 1: Installing the software
First, you need to install software on your local machine. You can go with either macOS, Linux, or Windows. For this blog, I’m going with macOS. No need to worry, follow the same instructions for other software too.
Step 2: Installing Flutter
You can either download Flutter SDK from GitHub or its official download page. After downloading, unzip it at a particular location on your disk. Use the below commands.
Now, let’s add Flutter to our $PATH in order to access it globally. For this, use the below command.
$ export PATH=[PATH_TO_FLUTTER__DIRECTORY]/flutter/bin:$PATH
After adding it to the path, confirm its installation by running the below command.
$ flutter –help
Step 3: Installing Dart (Optional)
Yes, installing Dart is optional. This is because Flutter comes with some useful Dart libraries. If you can work with those only, there is no need to install Dart further. But I would suggest its complete installation. And for this, you need to install Homebrew. For this, use the below command.
$ /usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
It’s a time-consuming process but it’s all worth it. Now, you can install Dart by running the following command.
$ brew tap dart-lang/dart
$ brew install dart
Congratulations, Dart is now installed on your local machine.
Step 4: Installing Xcode
While using macOS for developing iOS applications, you need to install this Xcode. For this, use your Apple developer account and get it installed from the App Store.
After its installation, you get most of the command-line tools forth with Xcode. With this Xcode, you can run your Flutter application on iOS.
Step 5: Installing Android SDK Studio
Just for iOS, you need to install Xcode, likewise for Android, you need to install its SDK Studio. Once installed, head to its Setup Wizard. It automatically installs:
- Latest Android SDK
- Android SDK platform-tools
- Android SDK built-in tools
In this way, you can run your Flutter application on Android.
Step 6: Flutter Doctor
If you want to confirm whether your local machine is ready for the development process or not, use this Flutter doctor.
That is an awesome command line that inspects your local machine.
It checks whether you have installed all the prerequisite tools. It also informs you whether any tool(s) needs configuration. If everything goes right, now you can write your first Flutter application.
Here’s what the Flutter doctor’s report looks like.
Step 7: Writing your first ever Flutter application
Now, let’s utilize all the hard work done so far by creating our first application in Flutter. There are multiple ways of doing so.
You can use command lines, IntelliJ, or even Android Studio. For convenience, I’ll illustrate using command lines.
Use the following command to create a boilerplate for your app.
$ flutter create name_of_your_app
Now, give a name to your app. Like sample_app, flutter_app, sample_first, flutter_test, etc.
$ flutter create flutter_test
This command creates a boilerplate for your sample app in the app’s directory. In this way, using a set of command lines, you can run your first app.
However, to see it running, you need to have a simulator running.
$ cd flutter_test
$ flutter run
So, with this, you created your first app, which looks like the image below in the simulator.
This app is the most basic one and counts the number of times you pressed that blue + button. For now, it’s zero.
So, go ahead and create your first Flutter application (apart from this).