Select category Search articles
Flutter tutorial: Step-by-step guide to kick off
your first Flutter project
May 16, 2019
Flutter has been emerging as a great option for developing cross-platform
mobile apps since Google announced the rst stable version at Flutter Live.
But where to start? In this post, we will cover the step-by-step guide to get
started with Flutter.
What is Flutter
Simply put, Flutter is a framework which allows developers to create cross-
platform apps using a single programming language. Flutter can be
considered an alternative to the React Native framework. The Flutter
f ki b i d l d tG l b t it' t ll t l
framework is being developed at Google but it's open to all external
contributors. Flutter has been around for a long time, but it started getting
more attention when Google announced the release preview of Flutter. At
Select category Search articles
Flutter Live on 4 December 2018, with loads of new features. After this, the
popularity of Flutter apps grew drastically.
Flutter uses the Dart programming language which was introduced by
Google in 2011 and is rarely used by developers. Dart syntax is easy to
understand as it supports most of the object-oriented concepts. Flutter apps
are a collection of widgets, everything in the Flutter is a widget. Basically,
this information is enough for anyone to get their hands dirty with Flutter.
To learn more about the technical details of Flutter, refer to the technical
overview in the o cial cookbook.
Installing Software
In order to get started with Flutter, we have to install some software on your
local machine. You can either use macOS, Windows or Linux to get started
with Flutter, however, macOS has the bene t of getting both the iOS and
Android environment on the same machine. We will assume that you are
using macOS for Flutter development, but you can always follow the similar
instructions for Windows and Linux as well.
Install Flutter
Flutter installation needs some command line tools installed on macOS.
Most of the tools come with Xcode. You can download Flutter SDK either
from Github or the o cial download page. Once we have the Flutter SDK, we
have to add it into the PATH so that we can access Flutter binary globally.
The rst step is to download Flutter SDK and unzip it to a suitable location
on our disk. We can do this by using the following command:
on our disk. We can do this by using the following command:
$ cd ~/development
Select category
$ unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zipSearch articles
$ unzip flutter_macos_v0.7.3-beta.zip
Now that we have downloaded the Flutter SDK, we need to add Flutter to our
$PATH so that we can access Flutter globally. This varies from shell to shell,
bash, we can simply run this command:
$ export PATH=[PATH_TO_FLUTTER__DIRECTORY]/flutter/bin:$PATH
You can nd the instructions to update the Flutter PATH here. Once you set
up the PATH, you should then be able to con rm installation by running:
$ flutter --help
This command will print all available commands of Flutter.
Install Dart (Optional)
Once Flutter is installed, you may also want to install Dart. Usually, some
Dart libraries come with Flutter itself, but if you need more Dart developer
tools then you probably need to install Dart as well. This is optional but good
to have. You need to install Homebrew in order to get Dart on your machine.
You can install Homebrew by using the following command:
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew
Select category Search articles
This will take some time, but once the installation is complete, you should
be able to install any package using Homebrew. Let's install Dart by using
following commands:
$ brew tap dart-lang/dart
$ brew install dart
You will now have Dart installed on your local machine.
Install Xcode
You can develop both iOS and Android apps with Flutter. If you are
developing an iOS app with Flutter, you need to install Xcode on your macOS.
You can not install on other platforms like Windows or Linux. On macOS, it's
very easy to install Xcode, you simply need to use your Apple developer
account and download it from the App Store. Xcode is a large piece of
software so it will take some time to download. Once you have Xcode
installed, you will get most of the command line tools along with Xcode. We
might need to con gure the Xcode command line tools to use the newly-
installed version of Xcode by using the command:
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
Once the command line tools install, you need to agree on the Xcode terms
and conditions. You can do so by opening Xcode and clicking on the Agree
button or by con rming or running sudo xcodebuild - license from the
command line.
Select category Search articles
With Xcode, you'll be able to run Flutter apps on an iOS device or on the
simulator. The complete guide for the iOS setup is available in the Flutter
documentation, here.
Install Android SDK Studio
If you are developing apps for Android, you also need to complete Android
setup. If you download and install Android Studio then most of the basic
setup is covered. Once you start Android Studio, go through the ‘Android
Studio Setup Wizard’. This installs the latest Android SDK, Android SDK
Platform-Tools and Android SDK Build-Tools, which are required by Flutter
when developing for Android. You can also set up a device or emulator for
the Android development as mentioned in the Flutter documentation, here.
Use Flutter Doctor
Flutter comes up with an awesome command line utility to check if your
machine is set up for local development. Flutter has Flutter Doctor
command which guides developers through setting up the local
development environment for both iOS and Android. Flutter Doctor inspects
which tools are installed on the local machine and which tools need to be
con gured. Once the Flutter Doctor command is happy, we can carry on
creating a new Flutter app.
Select category Search articles
Setting up Editors
Flutter development can be done on any editor or IDE of your choice. The
getting started guide for Flutter contains detailed information on IDE setup
for Android Studio, IntelliJ and Visual Studio Code. However, you can use
lightweight editors like Sublime Text for Flutter development as well. The
choice of editor/IDE is completely up to the developer. Once we have nished
the setup for our favourite editor, we can start developing Flutter apps.
Know Pub Package Manager
Flutter uses the Pub Package Manager to manage the Dart packages inside
the Flutter project. You will nd the pubspec.yaml le in the Flutter project
which imports Dart dependencies inside the Flutter project. You can
mention all the dependencies in the le and install using the command:
$ flutter packages get
This will install all the dependencies and create a locked version of the le,
which is pubspec.lock , so that we will always lock dependencies. We can
upgrade the dependencies using the command:
$ flutter package upgrade
This will upgrade all packages to the latest version, or you can update
individual packages.
It's good to know the concept of Pub Package Manager well in advance in
It s good to know the concept of Pub Package Manager well in advance in
order to understand the Flutter project better.
Write Your First Flutter App
Select category Search articles
At this point, you will be able to start developing your rst Flutter app. There
are multiple ways to create a template app, such as using the command line,
using Android Studio or using IntelliJ. However, we will use the command
line way in order to understand the entire Flutter project. Flutter can
generate a boilerplate for the sample app by running the following
commands:
$ flutter create name_of_your_app
You can give any name to your app e.g utter_testing or hello_world. Let's
say “ utter_test” for now.
$ flutter create flutter_test
This command will create the boilerplate of the Flutter app inside the
utter_test directory. You can run your rst ever Flutter app using the
commands. However, you need to have a device/simulator running to see the
app.
$ cd flutter_test
$ flutter run
You can see the app running in the emulator/simulator or devices. This
would be the default Flutter app which counts how many times you pressed
the + button. The app looks like this in the simulator:
Select category Search articles
Congratulations! You have successfully run your rst Flutter app in
the simulator.
Understand the Directory Structure
Now that we have Flutter app up and running, it's very important to
understand the directory structure of the Flutter app. At the moment, we see
Select category Search articles
the directory structure as follows:
We have a dedicated directory for the iOS and Android app. Some
con guration les like pubspec.yaml, .gitignore, etc are there at the root of
the project. We have two main directories where most of our Flutter code
will live, i.e. lib and test . In the “lib” directory we have main.dart where
our app code lives, and we can write the tests in the “test” directory. In the
main dart le you can create widgets and develop Flutter apps as per your
main.dart le, you can create widgets and develop Flutter apps as per your
needs. You can refer to the great documentation of Flutter.
Write Your First Test
Select category Search articles
As you develop the Flutter app, it's great practice to test the app with a solid
set of automated tests. Flutter has a richer set of testing features than any
other cross-platform mobile app development framework. Flutter provides
a solid testing framework which allows developers to write tests at the unit,
functional and UI level. Widget testing is one cool feature that Flutter
provides to run UI tests as fast as unit tests. Flutter also has UI tests, known
as integration tests, that run on the simulator or on real devices. Flutter has
great documentation on how to test Flutter apps at di erent levels. You can
read our post on Full Stack testing of the Flutter apps to gain a practical
insight on Flutter testing.
Now let's add Widget tests for the demo app, which check the initial state of
the app, tap the + button and assert that the state has been and counter
incremented. The test will look something like this.
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:flutter_testing/main.dart';
void main() {
testWidgets('Counter increments smoke test', (WidgetTester tester) async {
// Build our app and trigger a frame.
await tester.pumpWidget(MyApp());
// Verify that our counter starts at 0.
expect(find.text('0'), findsOneWidget);
expect(find.text('1'), findsNothing);
// Tap the '+' icon and trigger a frame.
await tester.tap(find.byIcon(Icons.add));
await tester.pump();
// Verify that our counter has incremented.
expect(find.text('0'), findsNothing);
expect(find.text('1'), findsOneWidget);
Select category Search articles
});
}
Let's name this test widget_test.dart and keep it inside the test directory.
We can run the test from the command line using the flutter test
command which will execute all tests from the test directory. However, we
can execute a single test using the command
$ flutter test test/widget_test.dart
This command will execute the widget test only.
Now that we have added a test to our Flutter app, the next step is to run it
continuously on the CI server so that we will receive feedback if our
functionality continues to work with the latest code changes.
Subscribe to our newsletter
Select category Search articles
Enter your email address
Set up Your First Flutter app on CI
Setting up Continuous Integration for Flutter apps isn't easy if you want to
do it yourself on the blank server. The Flutter ecosystem has a lot of moving
parts and tools that you need to install before you can actually start your
Flutter build process. The steps include provisioning Flutter installation,
Dart VM, installing iOS and Android dependencies, installing Dart
dependencies, etc. Luckily, Codemagic has solved all our problems for us.
Codemagic does all this work for us; simply visit the codemagic.io website
and register yourself with your GitHub, GitLab or Bitbucket account and
point your app to Codemagic. You can nd the getting started guide to set up
your app using Codemagic. The default work ow of Codemagic is to build,
test and publish the artefacts of your iOS and Android builds. We have our
source code of the demo test app utter testing on Github, we have built the
“CI” branch and we are following as a build output without any
con guration.
Select category Search articles
We have now successfully added our app to the Codemagic CI/CD server. In
order to know more, refer to the Codemagic documentation.
Conclusion
Flutter is booming as a cross-platform mobile application development
framework, and developers are keen to get started with Flutter. We hope this
guide acts a great kick-o point for your rst Flutter project.
Flutter From Scratch video tutorials:
Select category Search articles
Flutter From Scratch, Episode 1: Installing Flutter and Con guring
Android Studio
Flutter From Scratch, Episode 2: Flutter Project Structure and Widgets
Flutter From Scratch, Episode 3: Widgets and States
Select category
Download free ebook Search articles
60+ must-have Flutter libraries to speed up your work
Enter your email address
How did you like this article?
Most popular articles
Ebook Flutter Libraries
Presenting our new ebook –
"Flutter libraries we love"
We have collected 60+ must-have Flutter libraries to speed up your
work. 11 different categories, pros and cons and a lot more!
Testing Publishing Building CI/CD Native IOS Native Android React Native
Getting Started with Codemagic CI/CD for mobile
Step by step guide how to set up Codemagic CI/CD for Flutter,
native iOS, native Android and React Native apps.
Select category Search articles
Mac Pro Business
How Mac Pro machines are saving you 40% of your
mobile app build time
Real life comparison. How much time is Mac Pro saving for you
compared to Mac mini
Latest articles
AWS Testing Android Automated Tests YAML Espresso UI
How to run Android instrumented tests on real
devices using AWS Device Farm
Learn how to run automated UI tests on real mobile devices using
AWS Device Farm and how to connect it with Codemagic.
SonarQube Integration Codemagic CI/CD Security
Integrating SonarQube with Codemagic
SonarQube is the leading tool for continuously inspecting the Code
Quality and Security of your codebase. Learn how to integrate
SonarQube with Codemagic.
Continuous Integration Integrations Testing Codemagic CI/CD
Our continuous integration tool is great for testing
mobile apps
We can see that more and more teams use our continuous
integration tool for testing.
Show more posts
Select category Search articles
Grow your business with Codemagic
Sign up today and deliver your apps in record time
Get Started Now
Product Company
Pricing Careers
Codemagic for iOS Contact
Codemagic for Android Terms
Codemagic for React Native Privacy policy
Developer resources Learn more
Documentation Blog
Community Slack Podcasts
Security statement Success stories
Status
© Nevercode Ltd. | All Rights Reserved | Codemagic is registered trademark of Nevercode Ltd.
Select category Search articles
