Setting Up a Flutter Project

We started to learn Flutter while it was in beta release and we learned a lot. In this article, we want to share some fresh tips and thoughts about Flutter development.

Setting up the environment and choosing a proper editor

To start developing applications in Flutter it’s necessary to install Flutter SDK. The first step of installation process is to download SDK and unzip in the desired location and update your path. Next step is to run Flutter Doctor. Flutter Doctor is a tool that checks if there are any dependencies that need to be installed and also displays an overall report about the environment. As Flutter runs on iOS and Android its good to have at least iOS simulator or Android emulator, here you can find a step-by-step guide on how to set up each platform.

When we are talking about development, one of the first thing that we need to choose is IDE. There are two IDEs that can be used for Flutter development: Visual Studio Code and Android Studio (IntelliJ IDEA).

Visual Studio Code

Visual Studio Code is a lightweight code editor that allows developing Flutter applications with a good set of tools. To start writing the Flutter app in Visual Studio Code it’s necessary to install the Flutter extension that provides many helpful tools like Hot Reload or formatting Dart code.

IntelliJ IDEA / Android Studio

IntelliJ IDEA is the second way for Flutter development. It provides an additional plugin for Flutter and Dart which works pretty well. This IDE is much bigger than VS Code and provides many more tools.

Comparing Visual Studio Code to IntelliJ it looks like IntelliJ plugin has more useful tools, for example, you can launch iOS simulator or Android emulator right from IDE. On the other hand, VS Code is simpler and less resource consuming.

Which IDE should I choose? It depends. If you are Android or Java developer it’s natural to use IntelliJ based solution. Visual Studio Code is much simpler and is a much better choice for developers that don’t have a Java background.

How to set up Continuous Integration for Flutter?

There are already many tools that allow taking advantage of Continous Integration with Flutter. In Netguru for any iOS or Android project, we use Bitrise as a continuous integration tool, so we wanted to use the same tool also for Flutter. Fortunately, with release Flutter 1.0, Bitrise started to support Flutter builds. A configuration of CI is super easy. After creating a new project on Bitrise and providing URL to your repository Bitrise scans the content of code and starts the Flutter configuration wizard. Bitrise provides two Flutter specific workflows which will allow to test, build and deploy the application. There is also another continuous integration tool created especially for Flutter called Codemagic developed by Nevercode.

Quick overview

Flutter is a great cross-platform framework that allows building apps that can run both on Android and iOS from a single code base. By default apps created in Flutter works on iOS and Android, but there are many scenarios when it’s necessary to create some platform-specific code for example for better UI.

Creating a new application

Flutter plugin provides a way to create a new project, with whole project structure and sample screen.

In basic Flutter application, there are a couple of directories and files:

• android - this directory consists of all Android specific code

• ios - this directory consists of all iOS specific code

• lib - this is the main directory, where all source code is placed

• test - in this directory unit and widget tests are placed

• pubspec.yaml - in this file you can place external dependencies

Widgets overview

In Flutter, according to its official documentation, everything is a widget. Widgets are the basic building elements that are used for the user interface. Using widget we can define UI element (like button or image), style element (colors, fonts) or layout properties (like padding). Widgets are designed with composition over inheritance rule, which is very good practice in object-oriented languages. There are two types of widgets:

• StatelessWidget - can be used to create a widget with static content, without an ability to update it.

• StatefulWidget - can be used to create a widget that manages state. This kind of widget can be updated.

Every widget in Flutter is built on top of StatelessWidget or StatefulWidget. Below you can find a couple of most commonly used widgets that help to build great UI.

MaterialApp / CupertinoApp

MaterialApp or Cupertino app is the entry point of every application. It defines things like localization, home page, navigation and all the other properties that are app-wide.

Scaffold

There is a set of guidelines on how an application should look to be most user-friendly. A scaffold is a widget that handles most common screen UI patterns like app bar, or bottom navigation with just a couple lines of code. By default, scaffold renders basic platform-specific components (like back button or scroll behavior), and in general, better supports material design. But sometimes it’s necessary to customize app appearance to look more iOS-like. Then you can use CupertinoPageScaffold, which by default applies an iOS style.

Container

A most basic widget that can contain only a single widget. It has plenty of properties like padding, margin or decoration. Its used almost everywhere.

Row / Column

Row and column are similar to each other. Both can wrap more than one widget and allows to specify both axis alignment. The only difference between them is that in row children are drawn next to each other and in column one below another.

Stack

There are some cases when its needed to place widgets that overlay each other. A Stack widget can be a perfect match in this case.

SafeArea

In the past in most devices display had a rectangle shape. Currently, smartphone’s display can be curved, contain notch or some additional elements. SafeArea widget allows to constraint its child to be drawn in an area without unexpected behavior.

Form

Almost in every app, there is a need for gaining some data from a user. A Form is a great and powerful widget, which along with FormField allows creating great forms with automatic data validation and even more.

Supporting different iOS and Android UI components

Flutter allows creating applications that run well on both iOS and Android. Despite both systems are similar in some cases it’s needed to display some components in a platform-specific way. Some of the Flutter’s widgets automatically supports differences in platform design. For example, Scaffold automatically displays an app bar in a platform-specific way.

This is how the app bar is displayed on Android:

And this is how it looks on iOS:

This example is from Flutter documentation. It clearly shows that differences are subtle, but it’s good to fit application for user habits.
Unfortunately, for now, most of the widgets are not handled automatically and the developer needs to write different code for each platform. There is a project called Platform Widgets which aim is to automatically display the right widget depending on the operating system.

What to do next?

Flutter gains more and more community and great learning resources. If you are looking for a more technical overview of flutter you can check our codestories.